CSS Notes

References

I've posted some CSS references in the Links section of the class home page. Start with Dave Raggert's introduction.

In any technical area, one needs to be able to read standards documents with understanding. This is in particular true of CSS. Read the following chapters of the W3C's CSS2 Specification:

These chapters contain a lot of basic "how-to" information about CSS. The other chapters deal with formalities such as the complex style models implemented in CSS. These can be skipped on first reading, but if you're interested in web design at a professional level, you might want to have a look at them. There are some appendices that you might find useful as references as well.

Have a look at the other references I've posted too. You might notice things that interest you.

An example

As an example of what can be done with stylesheets, I've posted four examples using Lincoln's Gettysburg Address as content. The documents have identical XHTML source. The only differences are the stylesheets that they link to.

You'll notice that the presentations are quite difference in appearance. In the last, you shouldn't be able to see the text at all. (Puzzle: Figure out how to make the text appear in the browser window without viewing the document source.)

Do look at the home-grown stylesheet. It's intended as a stylesheet appropriate for the display of short documents with a title, brief text, and author's signature. Look also at the XHTML source Gettysburg Address Document itself. Note the used of the <div> tag to apply a style to a section of the document. I used it to place a border around the text portion.

Answers to some questions raised in class

Question: Can you link one stylesheet to another?
Answer: Yes, using the @import at-rule. If style-sheet foo.css contains a line @import "bar.css", then the rules defined in bar.css will be applied whenever foo.css is used. This is applied recursively. A stylesheet can have any number of import rules; they must appear before any local rules.
Question: Can you specify media types in an external stylesheet?
Answer: Yes, Using an @media rule. See the home-grown stylesheet linked to above for an example.
Question: What media types does CSS2 support?
Answer: Quite a few. See the Media type chapter of the CSS2 specification for discussion. Supported media types include screen (for conventional graphical browsers), print (for printed media), aural (speech synthesizers), braille (braille tactile feedback devices), handheld (small screen monochrome devices such as PDAs), projection (projected presentations), tv (television screens - low resolution, limited scrollability, sound available).

Valid XHTML 1.1! Valid CSS!