Basic Format of Style Sheet Entries | Blogging in a Snap (Sams Teach Yourself)

Various methods for importing or placing style sheet entries in the HEAD element of an HTML document were discussed in Appendix A, "HTML Fundamentals." Now let's move on to the nitty-gritty of the style sheet rules themselves. Style sheet rules consist of two parts. The first part is the selector, which can be a tag name, an identifier name, or a class name. The second part is the declaration, which describes exactly how the selector should appear.

KEY TERMS

Create an identifier for use with a single container element, such as a paragraph you want to identify as p1 or a <div> you want to identify as object1. Identifiers can be used only once per document, so there can only be one  container, for example.

A class can be used numerous times in a single document and can be attached to any bit of structural or physical markup unless otherwise indicated.

Take, for instance, the standard  tag pair. If you wanted to ensure that all text within this tag pair was always displayed in a red, bold, Verdana font, you would use the following rule:

 b {        color: #FF0000;        font-weight: bold;        font-family: Verdana; }

You could also write the rule on one line:

 b {color: #FF0000; font-weight: bold; font-family: Verdana;}

Rules written on multiple lines and in an indented style are much easier to read, but if you prefer your rules all on one line, there's no detrimental effect (except perhaps to your eyes when you're straining to track down a rule).

The three items within the rulecolor, font-weight, and font-familyare called properties, whereas #FF0000, bold, and Verdana are the values of the properties. Notice that the rule for the  tag pair does not have any information related to font size. In this instance, the font size will be inherited from within whatever element the content is contained. For instance, if font size information is indicated at the paragraph level (for example, in the declaration for the  tag pair) and bolded text appears within a paragraph, the bolded text will also be the same font size as all the rest of the content in the paragraph.

You can see that it would be advantageous to declare as many constant variables at the highest level possible. For instance, if you know the base font family, font weight, font color, and font size for all the content in your document, define these items as part of the rule for the <body></body> tag pair:

 body {        font-family: Verdana, Arial, Helvetica, sans-serif;        font-weight: normal;        font-size: 12px;        color: #000000;        background-color: #FFFFFF; }

You've seen several examples of properties and values, but before listing all of them, you should understand the proper notations for different types of values.