Andrea's Blogger Templates

With even a moderately complicated style sheet, it is likely that two or more rules will target the same element. CSS handles such conflicts through a process known as the  cascade. The cascade works by assigning an importance to each rule. Author style sheets are those written by the site developers and are considered the most important. Users can apply their own styles via the browser and these are considered the next most important. Finally, the default style sheets used by your browser or user agent are given  the least importance so you can always override them. To give users more control, they can override any rule by specifying it as !important even a rule flagged as !important by the author. This is to allow  for specific accessibility needs such as using a medium contrast user style sheet if you have a certain forms of dyslexia.

For example, when you hover over an element with a title attribute, most browsers will display a tooltip. You can use this behavior to expand the meaning of things such as acronyms and abbreviations:

The first of these advanced selectors is the child selector. Whereas a descendant selector will select all the descendants of an element, a child selector only targets the element’s immediate descendants, or children. In the following example, the list items in the outer list will be given a custom icon while list items in the nested list will remain unaffected (see Figure 2-1):

CSS 2.1 and CSS 3 have a number of other useful selectors. Unfortunately, while most modern browsers support these advanced selectors, older browsers like IE 6 do not. Luckily, CSS was created with backward compatibility in mind. If a browser doesn’t understand a selector, it ignores the whole rule. That way, you can apply stylistic and usability embellishments in more modern browsers and not worry about it causing problems  in older browsers. Just remember to avoid using these more advanced selectors for anything critical to the function or layout of your site.

The universal selector is possibly one of the most powerful and least used of all the selectors. The universal selector acts like a wild card, matching all the available elements. Like wild cards in other languages, the universal selector is denoted by an asterisk. The universal selector is often used to style every element on a page. For instance, you can remove the default browser padding and margin on every element using the following rule:

When combined with other selectors, the universal selector can be used to style all the descendants of a particular element or skip a level of descendants. You will see how this can be put to practical effect a little later in this chapter.

There are instances where you may want to style an element based on something other than the structure of the document—for instance, the state of a link or form element. This can be done using a pseudo-class selector.

:link and  :visited are known as  link pseudo-classes and can only be applied to anchor elements.  :hover,  :active, and  :focus are known as  dynamic pseudo-classes and can theoretically be applied to any element. Most modern browsers support this functionality. Unsurprisingly, IE 6 only pays attention to the :active and :hover pseudo-classes when applied to an anchor link, and ignores :focus completely. IE7 supports :hover on arbitrary elements but ignores :active and :focus.

Last, it’s worth pointing out that pseudo-classes can be strung together to create more complex behaviors, such as styling the hover effect on visited links different from those on unvisited links.

The most common kinds of selectors are type and descendant selectors. Type selectors are used to target a particular type of element, such as a paragraph or a heading element. You do this by simply specifying the name of the element you wish to style. Type selectors are sometimes also referred to as element or simple selectors.