BWD Chapter 14: More CSS
2004-12-17 20:30 - Beginners Web Development
Chapter 14
More CSS
There are more advanced selectors, some of which make very powerful and dazzling techniques available. Each different web browser, though, supports a slightly different set of the features described in the standard. The more advanced features you make use of, the more careful you must be that your code works in all appropriate browsers.
At the time of writing, the combination of Microsoft's internet explorer and Mozilla's Firefox and Mozilla browser make up some 95-98% of the common browser market. For that reason, i personally test only in IE and Firefox. I hope/assume that my generally standards compliant code will fare alright in the other available browsers.
The first advanced selector type we will cover is pseudoclasses. As the word clearly implies, pseudoclasses are classes that are not quite real. Some examples are first-line and first-child. The former applies to the first line of text in an element, the latter to the first child element inside the targeted element. A pseudoclass is applied to a regular selector by appending a colon and the name of the pseudoclass. The result is something like this;
a {
color: blue;
}
a:hover {
color: yellow;
}
In this example I have snuck in one of the most important pseudoclasses, hover. This is of course applied while the mouse is hovering over the element. The example says that all anchors will be in blue text, but the anchor my mouse pointer is hovering over will be drawn in yellow.
The hover pseudoclass is a wonderful way to create a bit of extra flavor on a page, while keeping the code to produce it very small. A disappointing problem, though, is that Internet Explorer has absolutely horrid support for the hover pseudoclass. In IE, it may only be applied to anchors. Other more standards compliant browsers support hover for any elemenr, but the market share that IE commands keeps hover from being used for anything besides anchors.
There are a few other pseudoclasses which effect links, namely link, visited, hover and active. Their meaning is rather clear, but what is less clear is that when defined, they should always be used in that order to work properly. When styling links, remember your "LoVe/HAte" relationship with pseudoclasses to remember which order to put them in.
There are some more truly wonderful selectors available, except again, IE does not support them. It will be an exercise for the reader to visit the CSS standard at W3C and learn about the more advanced selectors.
It is finally time for the style in cascading style sheets, the properties that you can define. Again, the W3C standard is a wonderful resource, it will list all the standard properties and what values they can be given. There are also important things to keep in mind for all possible properties.
Accessibility has been mentioned before, and will again, It comes strongly into play with styles. Some color combinations are difficult or unpleasant to read (red on blue anyone?). Moreover, some text is just too small to read for some people. Good thing the browser has a built in function to let them increase the size of the text, no? Sometimes it works and sometims it doesn't, because it is possible to break it with a style sheet.
The biggest thing to do to help accessibility is to define your font sizes properly. In short, alwas use the right unit: em. An em is defined as the length from top to bottom of a capital m in the current font. (There is also ems little known smaller brother ex: the length from top to bottom of a lowercase x in the current font.) An em is a relative unit. A font set to size 1em is 1 time the size it would be. At 2em it is twice, at 0.5em it is half. And, all browsers will resize an em properly. Fonts laid out with em values get bigger and smaller as the user chooses, an important thing for those with poor eyes or small monitors.
But wait! An em is not just for fonts! It is a length unit that can be applied anywhere one is needed. You can apply a padding of 0.5em to put a half a line space between two elements. Even better, you can define a containing boxes width with an em, and it will grow/shrink exactly with the text, keeping the lines wrapping at the same word.
You may think, "But I do not want the user to grow and shrink my document, I do not want him to break my layout!" If so, you must learn the zen art of liquid layouts. Though you may appreciate the beauty of your styles, someone who cannot read the words they decorate will not. He will surely prefer a page which is not so pretty that he can read. And, properly designed pages can maintain their style, even when presented in different font sizes, on different monitors and different computers, and all the other things that happen to a web page!
The wildly different types of browsers available also make our semantic layout of HTML important. If you are not using Mozilla Firefox, please do. And if you do not have the web developer toolbar installed, please do. You will thank me for both. Using that toolbar, you can completely disable the styles in my webpage (or any). See how, though not quite as pretty, my page continues to make sense even with no styles? The section headings use header tags. The lists use list tags. It has semantic meaning, and all browsers know those semantic meanings. "Pointless!" you may say. "Who goes around disabling web sites style sheets?" Well, probably noone. But more and more simple devices are learning to access the web. My cell phone can. It cannot use the style sheets. But my pages make sense. This is important.
There are many different properies. Just like attributes, some work for all kinds of tags, and some work for only specific kinds. Some common universal properties are: padding, margin, border, and font. These are each actually shortcuts, they can be used on their own but they stand for a combination of properties.
The font property can be used to stand for one or more of font-weight, font-size, font-family and so on. The padding and margin tags can be used to specify all in one go the top, right, bottom, and left values. The same goes for border, plus each of the four border properties are themselves shortcuts for specifying the thickness, color and style of the border. In the next chapter we will discuss the border, padding, and margin. What they are, what they do and how they are used.
