Advanced HTML Programming

CSS Notes




This note page discusses features of Cascading Style Sheets, as discussed in class. References will be made to web sites linked below:

CSS Master Grid - what works in what browsers, from WebReview
CSS References - from Web Design Group

Key Concepts:

I highly recommend that you spend some time looking at the Master Grid reference above. (For your convenience, I have coded that link to open in a new window.) It lists many Style Sheet selectors and gives the good news that most of them work in browsers that your readers may actually use. There is also bad news. In this chart, look for green squares, showing that a browser supports a feature. Any other color means trouble.

As an illustration of how to use the chart, consider the a problem we encountered in class last week. Mike M. tried to apply an interesting idea. He wanted the first line of each paragraph to look different from the other lines, and he wanted the first letter of the first line of a paragraph to be larger than the others. This is what two pseudo-classes should allow: first-line and first-letter. (Every paragraph has a first line, even if it has only one line, and every paragraph has a first letter.)

A pseudo-class is something that works like a class, but the browser itself has to know when to apply it. We have used pseudo-classes before. The construction "a:vlink" is a pseudo-class for the anchor element. If a browser understands it, you don't have to explain in your code where to apply it. Current Navigator and Internet Explorer versions both support this example.

However, looking at the chart of pseudo-classes, you can see that only Navigator 6 (or later) and Internet Explorer 5.5 (or later) understand the first-line and first-letter pseudo-classes. This is why the page that Mike constructed did not work in the classroom. Our lab has Navigator 4.7 and Internet Explorer 5.01. When Mike ran his experiment at home, he must have been using Internet Explorer 5.5, since he reported success with a Microsoft browser.

The second link above will take you to a series of explanations about CSS that I found to be more readable than most. Again, the links to W3C are certainly authoritative, but they are not much fun to plow through.