Advanced HTML Programming
CSS Notes
Objectives:
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.
|