CSS Basics 103 - Review of Selector Styling

Home Tutorials Reviews Weblog

Featuring: Review of targeting style rules with selectors and inheritance

This will be a quick review of the two most important targeting rules in CSS . Here are the example CSS styles that will be used in this review:

h2 , li { color: red; background-color: yellow; font-weight: bolder;}
.altrow { background-color: white}
#backer {background-image:url(images/1animphotof.gif); height:200px; width:790px;}
.whiter { color:white; font-weight:bold}
In our previous CSS tutorials, we have seen how to apply styles contained in a .css file or in a <style>..</style> section at the top of a Web page in the <head> block. Remember if the CSS style rule is in a <style>..</style> section it only applies to that Web page unless you copy the style to other pages. If it is in a .css file then the CSS style can be applied to any Web pages with <link...>s to that .css file.

The most important rule for applying CSS is simple:

Rule I - define styles for one or more HTML tags

h2 , li { color: red; background-color: yellow; font-weight: bolder;}
This is a multi-tag styling rule which creates a warning style that will apply to all <h2> and <li> tags used on this page. Thus I have defined the rule in the <style> .. <style> section. Henceforth on this page, these two tags will have a bold red font and yellow background like so:

This is an example of a Tag Selector CSS Rule


  • Note this <li> warning does not look identically the same as the <h2> warning
  • that is because both <h2> and <li> retain their inherent properties
  • unless those properties are overridden in the style rule
  • so the black border on the <h2> tag continues but is not seen on the <li>

Notice that the stylings for the two tags did come out not identically the same - the <h2> has a border, the <li> does not. That is because back in the master styling file, osstyle.css, which is linked to this page there is a prior definition for <h2>(in contrast <li>starts with its default styling). Ahhh the plot thickens. What happens when there are two definitions for the same tag. Think Cascade.

Here are the two definitions for <h2> in the order they are appear and therefore are parsed:
   h2 { font-family: Times, Bookman, serif;  font-size: 24pt;  border: thin solid black;  
      font-weight: bold;}
/* From the osstyle.css file */
   h2 { color: red; background-color: yellow; font-weight: bolder;} /* from <style>..</style> */

CSS-Cascading StyleSheets allows for just such multiple or cascading definitions of style. So how do they get resolved? Basically its a case of inheritance and, when two properties collide, the latest (or last) takes precedence. Actually the cascading rules are quite a bit more complicated, but the essence follows this core. So lets see how the basic cascade rules effects the <h2> styling.

First, the margins and padding associated with <h2> by default are not overridden by either of the stylings above so they are inherited and followed as one would expect. Second, the font-family and font-size options from the first <h2> style definition do override any <h2> defaults and because there is no counterpart in the second <h2> style definition, 24pt Bookman, Times, serif becomes the text font style. Likewise, because, the border styling is not overridden in the second <h2> styling it gets carried through and is applied. Finally, the second <h2> styling calls for a red font and yellow background and that is delivered as well. Hence the CSS styling for <h2> is all accounted for.

So now we are ready to go onto the second most important CSS styling rule.

Rule II - define Class or ID Selector rules which can be used selectively in any HTML tags

As you can see the cascading stylings are not trivial - and so browser and other application tool makers on one hand have a rich tool in CSS for styling; but it is also demanding of the developers who create and deliver CSS capabilities. With this in mind, lets consider how one can expand styles so they can be applied to any tag but selectively -allowing the tag to use the style and sometimes it does not. The class= and id= options provide just such styling flexibility.

Define a Class Selector indicated by a . before its name, and then the class can be used in any tag:
.altrow { background-color: white}
- This class rule creates a style with a new white background that can be used to format by adding class="altrow" to a tag. Here it is used in a table to make alternate rows clearer by adding it to the <td class="altrow"> tag. Notice that we don't use ".altrow", no dot allowed in the class= option:

The first row is emphasized with .altrow white background
The 2nd row is normal
The 3rd row is emphasized again, etc.

So these two targeting methods are the meat and potatoes of CSS usage but as we noted previously there are CSS identity selectors plus lots more methods available to target where styles are to be applied. Here is one more targeting method which change how Selectors are written and work - the Identity Selectors.

This is a sample of a id= styling
In the table row above we apply two stylings, #backer to bring a distinct background image that is repeated throughout the background (it is using an animated gif file). While #whiter changes the font color to white for the and applies some big margin values for the <h1> tag its used with.
Note as in the case of class styles dropping the initial '.', so too the initial '#' is dropped in id="backer". Also in this tutorial demonstrates how to take advantage of these identity stylings with simple JavaScript. For those wanting to do more - I would recommend reading the following books/resources and tutorials about JavaScript, DOM and AJAX.

Summary

This tutorial reviews the dramatic changes one can make to their website with a few simple changes to a central .css file. It uses basic CSS stylings which we have learned in just three lessons. In short, it demonstrates the versatility of CSS. Users looking for more details on id= and class= options should check pages 16-40 in CSS in Easy Steps by Mike McGrath or pages 32-35 in CSS: The Definitive Guide 3d Edition by Eric Meyer. The next tutorial will look at background stylings.

Top of Page  Tutorials Home  CSS references