Cascading Style Sheets
Created | Updated Oct 30, 2006
This entry assumes prior knowledge of HTML and the basics of web page design. If you are not familiar with HTML, you might want to visit one of the sites below. They all have tutorials on HTML, but they also have tutorials on more advanced topics such as Javascript, Cascading Style Sheets, and more.
What Are Cascading Style Sheets?
HTML has grown and evolved substantially since its creation. However, it does have its limitations. Cascading Style Sheets (CSS) do not replace HTML but enhance it. CSS are an attempt to make pages display more uniformly across browsers and to make them more compatible with user preferences and with the World Wide Web Consortium recommended standards: letting HTML handle the structure of a document while CSS handles the layout.
Why Are They 'Cascading'?
This has to do with a feature of CSS called 'inheritance'. It is similar to the idea of 'nesting' in HTML. For example, take an average car. The car has wheels, windows, lights, etc. If you specify that the whole car (including the windscreen!) needs to be painted red, then the wheels, windows, etc, will also be coloured red. In other words, they inherited the colour from the parent object (the car). However, if you also specified that one wheel should be blue, you would override the colour property inherited from the car.
What Can You Do With CSS?
They allow greater control over the layout of the page: for example, you can now indent paragraphs, set page margins, create customized headings, etc.
They also save you time as the style sheet acts as a template. Once you've established what you want paragraphs, headers, text, etc, to look they will stay that way until you say otherwise. You don't have to repeat all the specific instructions. If you establish in your style sheet that paragraphs are indented x amount, this font face, that font size, and such-and-such color, in the page itself all you have to say is <P> .
You could create a different style sheet for each section of your site. This is particularly useful for large sites with many pages.
At this time, browsers will accept either pure HTML or HTML mixed with style sheets. As time goes on and new releases of browsers come out, the formatting tags like FONT will be deprecated (ie, they'll no longer recognized by browsers).
Using Style Sheets in Your Web Page - The 'STYLE' Tag
There are two ways of using CSS in your web page. The first is to use the STYLE1 tag. This method will probably be very familiar to people with some HTML experience. For example, at the beginning of the document you would have:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<--
BODY{}
H1{}
P{ }
-->
</STYLE>
</HEAD>
The TYPE part tells the browser which stylesheet language you are using (at the moment, "text/css" is the only option). The comments are there so that older browsers will ignore the style sheet parts. Finally, whatever is in the brackets describes how you want that particular aspect of your page to look (the body, the paragraph, level 1 headers, etc.)
You can also use STYLE tags in the body of your page to change just certain parts of it.
<P> blah blah blah </P>
<P STYLE="text-color: red;">very important yadda</P>
<P> blah blah blah </P>
The middle paragraph only will show up in red, but the rest will be in the default colour.
While this method works, it is not the most efficient way to make full use of style sheets.
Using Style Sheets on your Webpage - LINK to an External Style Sheet
It is much easier to set down all your layout preferences at a go in a separate ('external') document, and simply tell each page 'go look here for how to display the page'. The way you do that is this:
<HEAD>
<LINK REL=STYLESHEET HREF="[url of style sheet]" TYPE="text/css">
</HEAD>
Be sure to take out the [ ] when you put the URL in there.
Then the page will go fetch all the layout information from the style sheet. You can have more than one style sheet, and have different pages point to different ones if you want a drastically different look for each page or each section of your site.
If you want to deviate from the style sheet in just a couple places, you could use the STYLE element within a tag.
<P STYLE="..."></P> will affect just that one paragraph.
<SPAN STYLE= "..."></SPAN> will affect whatever is between the SPAN tags. This is useful when you only want to change one or a few words within a paragraph.
<DIV STYLE="..."></DIV> This is for larger chunks: several paragraphs that you want different from the style sheet, or a table and a paragraph together.
Creating a style sheet: syntax and properties
To create the style sheet, make a new text document and name it 'stylesheet.css'. You can put anything you want in the first part (section1style, bluescheme, mystyle, whatever) but it has to end in '.css' so that the browser knows that it's a style sheet.
The style sheet is made up of 'rules'. The rule starts with the tag, then has brackets, then the instructions for what you want text within that tag to look like.
H1 {font-size=125%;}
So in the example above, this would tell the browser to display anything within the H1 tags at 125% of the default text size.
Here is a sample of a style sheet. You'll find that many of the properties2 of a style sheet are pretty self-explanatory, but a few may be unfamiliar. Let's take it one chunk at a time.
BODY
{background-color: #FFFFFF;
font-family: Verdana, Tahoma, Arial, sans-serif;}
This sets the background colour and font for the entire page. The colour can be described either by words ('black', 'white', etc.) or in hex code (#RRGGBB). There are many different font families: serif (Times), sans serif (Arial and similar), cursive (Zapf-Chancery), fantasy (Western- not accepted by all browsers), and monospace (Courier). You can describe the specific font you want, or only the family: if you just state the family then the specific font within that family will be determined by the viewer's browser settings.
A:LINK {color: #CC66FF;}
A:VISITED {color: #000000;}
A:ACTIVE {color: #00EE00;}
A:HOVER {color: #00EE00;}
LINK is the link colour for new links that haven't been clicked on yet. VISITED is for links that have already been clicked on. ACTIVE is what colour the link turns to when you are actually clicking on it. HOVER is what colour the link turns to when you put the cursor over the link but haven't clicked it yet3.
P
{font-style: normal;
font-variant: normal;
font-size: 100%;
text-align: justify;
text-indent: 2.5em;
margin-left: 1.5em;
margin-right: 2.5em;}
(Since 'color' and 'font-family' have already been discussed above, I won't repeat them here to save space. However, in your own style sheet you would want to put these two properties in.) FONT STYLE is either normal or italic. FONT VARIANT is either normal or SMALL CAPS for small capital letters. FONT SIZE is fairly obvious. TEXT ALIGN can be either left, right, center, or justify. TEXT INDENT can be measured in ems or in pixels (more on that in a bit). Same goes for MARGIN LEFT and MARGIN RIGHT.
H1
{font-weight: bold;
font-size: 175%;}
FONT WEIGHT can be either bold, bolder, or 100 through 900. (I don't believe all browsers support the numbered grades of bold yet.) Here the font size has been increased to make the heading stand out. You could also change the font family or color to make the headings stand out- the choice is yours!
H2
{color: #000000;
font-family: serif;
font-size: 125%;
text-align: left;
text-indent: 2em;}
Here we decided to make heading 2 stand out by having a bigger indent, a smaller font size than heading 1 but larger than normal text, and a different font family.
UL {list-style-type: disc;}
All of the other properties such as FONT FAMILY, COLOR, MARGIN LEFT, etc can be specified, but to save space I'm only including a property that is unique to lists. LIST STYLE TYPE can be disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, or upper-alpha. (Roman being Roman numerals, of course, and alpha meaning letters.)
UL UL {list-style-type: circle;}
This says that a list-within-a-list would be noted with hollow circles to set it off from the main list which has solid dots.
TABLE {background-color: #FFFFFF;}
You could also say:
TABLE {background-image: [url of image]}
Be sure to take out the [ ] when you put this in your style sheet.
TR {...}
TD {...}
CAPTION {...}
You could use any of the properties described above for fonts, colors, margins, alignment, etc to specify how you want the table rows, cells, and captions to look.
Keep in mind that the list of properties that are found here are only the most commonly used ones. The Web Design Group has a more comprehensive list of the various properties and options available to you.
Creating your own tags
That's right: CSS will actually allow you to in essence create custom HTML tags. How?
Say, for example, you are creating a book list so you know that you will be including many book titles in the page. You want the titles to stand out by being a different color, italic, and capitalised. Rather than having to say -
<SPAN STYLE="color: #0000CC; font-family: Verdana, Tahoma, Arial, sans-serif; text-variant: italic; text-transform: capitalize;" > title of book </SPAN>
...for every book title, which would be quite tedious, you can define a book title style:
#booktitle
{color: #0000CC;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-variant: italic;
text-transform: capitalize;}
The '#' sign means that this is a custom-defined tag. From now on, whenever you wanted to designate a book title, all you have to write is:
<SPAN ID="booktitle">title of book</SPAN>
Definitely preferable, no?
Relative vs Absolute Measurements
In the section describing paragraphs attributes, reference was made to measurements of margins and font sizes. There are two general ways to describe size to a browser: in relative or in absolute measurements.
Absolute measurements are fixed, standardized so that everyone agrees on them: pixels and points are examples. 5 pixels is 5 pixels regardless of what browser you're using.
Relative measurements will vary according to the viewer's browser settings. Someone with vision impairment, for example, may set their default to 16 point rather than 12. If you declare your regular font size to be 9pt and your headings to be 12pt, this will override the user's defaults and the poor soul won't be able to see anything but your headings. If you set your font size to 100% and your headings to 125%, then your viewer will be able to read the text and understand that the headings are headings because they stand out.
The same goes for page margins. Users with older monitors have a smaller field to play on so to speak. If you establish your margins using a fixed width, this may cause problems for someone viewing it on a small screen. That is why the measurements in the examples above are listed in 'ems'. An 'em' is a relative measurement: one em is the width of a capital letter M. Naturally, this will vary depending on the font and default font size chosen by the user in their browser settings.
Overall, it is better to use relative measurements to make your pages as friendly as possible to the widest range of people and browsers. However, since it's your site feel free to do as you wish.
Links/Resources
Web Monkey: Mulder's Style Sheets Tutorial : very straightforward writing and beginner-friendly.
Dave Raggett's Introduction to Style Sheets : also a beginner-friendly tutorial.
Cascading Style Sheets: Designing for the Web : written by Håkon Wium Lie and Bert Bos, the original developers of style sheets. Bit technical in places but thorough.
Web Design Group : comprehensive list of CSS properties.
The World Wide Web Consortium (W3C) : CSS the W3C's list of resources for learning and using CSS.
Web Developer's Virtual Library : thorough but technical.
