What are Cascading Style Sheets and how is this different from HTML?
HTML was developed as a structural language. It was designed solely todescribe how a page was structured such as paragraph here, headline
here. The boom of the web has created a lot of demand on more controlon how the page looks such as colors, fonts, margins. Using HTML to do
this has created a lot of bloated pages. Cascading Style Sheets (CSS)are used for formatting the look of a web pages so the HTML can remain clean and fast loading.
Using CSS will allow you an easier wayto change colors, fonts, font size and other attributes without having to edit every single tag in a page or site. The “cascade” means that you can have internal styles that will overrule the imported rules from an external sheet.
How do you use CSS?
Inline (inside the HTML tag itself)
- advantage: very specific
- disadvantage: you still have to edit every single page and tag, deprecated (going away)
Internal (styles listed inside the head of the HTML page)
- advantage: easier to edit than single tags
- disadvantage: for more than a few pages, it is still a lot of editing unless each page needs to look different from the other
External (styles are listed in a separate file and referenced by the page inside the head of the HTML code) –
- advantage: single location to make changes that affect every page
- Disadvantage: another file to create and maintain
Unless you only have a few pages, using an external style sheet (or two) is usually the best method.
What are style elements?
Well, any of the usual HTML tags like P, H1 or B can have a style applied to them. You can also apply styles to the BODY, list elements and to table
cells. The basic way to write a CSS style element is like this:
Selector { property: declaration; }
EXAMPLE: h1 { color: #003366; }
You can have more than one declearation for a property. If I wanted to give the h1 tag a font style as well, I would write this:
- h1 { color: #003366; font-family: arial, helvetica, sans-serif }
you can also write it like this:
- h1 {
color: #003366;
font-family: arial, helvetica, sans-serif;
}
Eitherway, I have a nice Pellissippi blue, sans serif header whenever I use the <h1> tag. You can use named colors if you don’t want to use
the values. That would look like this:
h1 { color: blue;}
You can also group selectors to all have the same property:
body, h1, h2, h3, h4, p, b, I { color: black; }
The standard set of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. However, the use of values allows more variety. There are plenty of charts on the web with the color values available for your use.
Say you want all of your pages to have a white background and black text. Rather than add that to the body tag for every page, you can use this:
- body { color: #000000; background: #ffffff; }
or
- body { color: black; background: white; }
A quick change to the values above and your entire site can have a red background with blue text!
OK, the bonus info, how to make your links change color (and not be underlined) when the cursor rolls over them.
NOTE: This effect does not work in Netscape 4.x
Use the following CSS tags:
- a { color: #333366; font-weight: bolder; text-decoration: underline; }
a:hover { color: #3366cc; text-decoration: none; }
Changing the color values and text-decoration values will allow your links to be different colors and be underlined or not when the cursor is over them.
How can I get started?
To create an internal style sheet, open the HTML file in a text editor and add the CSS elements. To write an external style sheet, you can use a plain text editor like Notepad or SimpleText. In the blank document, start with the tag or element you wish to “style”. Other ways to create CSS include using WYSIWYG editors like GoLive or Dreamweaver. You can also download external style editors such as TopStyle and CSS Editor from Causeway.
As with learning HTML, the best way to learn CSS is to look at other style sheets and learn from them. Pellissippi State’s home page uses CSS as does the ETS site (http://www.pstcc.edu/ets/ets.css)
Take those, edit away and see how the results work out for you. Start basic before you get into classes and pseudoclasses, which allow you apply styles to parts of the page using a style or div tag.
RESOURCES
David Raggett’s Guide to CSS: http://www.w3.org/MarkUp/Guide/Style.htm…
A nice, clear explanation with a well done chart of web safe colors and their hex values.
The CSSShark How-To Site: http://www.mako4css.com/index.htm
A good FAQ on CSS and the basics. This site also has a lot of info about using CSS with Netscape 4.x browsers
Anthony’s CSS2 Tutorial: http://www.dynamicdeezign.com/css/index….
A little mind-blowing in design color choices but good materials, nonetheless.
House of Style: http://www.westciv.com.au/style_master/a…
From the vendor who sells Style Master, another CSS editor
Causeway CSS editor: http://www.causeway.co.uk/freestuf/cssed…
Free editor to make external style sheets.