CSS Basics 103 - Review of Selector Styling

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:

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:

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.