Authoring Style Rules

Styling the body Element

Because the first element that you’ll want to provide style for is the body element, you’ll start by creating rules for it. Typically, body element styles should contain information about the general display of the complete body of the design, such as margins, default font face and color, and any background color and images you might like.

Here, you’ll style the margins, padding, default body text font, font color, and background color. You’ll also learn how to employ grouping as you go.

To begin your first rule, write the element name:

body

and follow it with the margin rules:

body  {
     margin-top: 100px;
     margin-bottom: 20px;
     margin-right: 20px;
     margin-left: 100px;
}

This rule now sets all margins for the page at 20 pixels, providing a uniform margin around all the body content.

While this set of rules for the body margins is absolutely correct, you can also use grouping as a means to shorthand your rule and streamline your workflow. Using grouping in this case could result in the following rule:

body  {
     margin: 100px 20px 20px 100px;
}

Figures 3.3 and 3.4 compare a portion of the document with the unstyled and styled margins.

Figure 3.3: A portion of the unstyled content within a browser window

Figure 3.4: Examining the styled margins

The next step is to create a rule for your default font face. Note that this font will often be overridden by other rules within your style sheet, but it’s still a good idea to put your body text font and related styles here. As you are probably aware from working with HTML, you can “stack” font family names. The first name in the stack will display if that font is available on your machine; if not, each one will be considered in turn. Using a default at the end, such as serif or sans-serif, means that if no prior font in the stack is located, the browser will display the closest font available.

body  {
     margin: 20px;
     font-family: "Trebuchet MS" Verdana, Arial, sans- 
     serif;
     font-size: 0.95em;
     line-height: 1.3em;
     font-style: normal;
}

As with grouping margins, the family, size, line height, and style can similarly be grouped as follows:

font: normal 0.95em/1.3em "Trebuchet MS", Arial, Verdana,   
      sans-serif;

As with margins, font grouping order is critical. The font-weight and font-style properties must come before size measurement and family names. If you are using both font-size and line-height, the line-height value comes after the size, and their difference is denoted with a slash (/).

Next, add a color for the text:

color: #333333;

and a color for the background:

background-color: #FFFFFF;

Listing 3.2 shows the now complete rule for the body style.

body  {
     margin: 20px;
     font: normal 0.95em/1.3em "Trebuchet MS", Arial,   
     Verdana, sans-serif;
     color: #333333;
     background-color: #FFFFFF;
}

You can now save your file and view the changes. Figure 3.5 shows a portion of the content style, which you can compare to the unstyled original.

Figure 3.5: Styling the body of with margins, fonts, line height, color, and background colot

Adding Style to Headers

In this instance, there are only two headers within the document tree. Typically, it’s wise to style at least levels 1–3. Here, you’ll work with the two levels in the document, because they are going to be distinctly different in their styling, and then add a third for later use.

For the h1, you’ll create a style that contains its own margin style, padding, and styled bottom border, as well as font styles. Remember that each element relates to a "box" within the browser space. The style for h1 in this example demonstrates how to use that box to style aspects of the element.

To style the header level 1, follow these steps:

1. Begin with the selector and brackets for the declarations:

   h1  {
   
   }

2. Add the margin styles. Here, I’m using negative values to pull the respective top, bottom, and left margins in closer than the default margin. That creates a tight effect but still leaves the right margin at 15 pixels:

   h1  {
        margin: -10px -10px 15px -10px;
   }

3. Set the padding:

   h1  {
        margin: -10px -10px 15px -10px;
        padding: 0px 10px 5px 10px;
   }

4. Now, add the font styles:

   h1  {
        margin: -10px -10px 15px -10px;
        padding: 0px 10px 5px 10px;
        font: 900 2em/1.1em Verdana, Arial, sans-serif;
   }

5. Add the text color:

   h1  {
        margin: -10px -10px 15px -10px;
        padding: 0px 10px 5px 10px;
        font: 900 2em/1.1em Verdana, Arial, sans-serif;
        color: #aaaaaa;
   }

6. Add the background color for the header block:

   h1  {
        margin: -10px -10px 15px -10px;
        padding: 0px 10px 5px 10px;
        font: 900 2em/1.1em Verdana, Arial, sans-serif;
        color: #aaaaaa;
        background-color: #eeeeee;
   }
   

7. And finally, add the border style for the bottom border, which will be one pixel thick and of a “dashed” style:

   h1  {
        margin: -10px -10px 15px -10px;
        padding: 0px 10px 5px 10px;
        font: 900 2em/1.1em Verdana, Arial, sans-serif;
        color: #aaaaaa;
        background-color: #eeeeee;
        border-bottom: #bbbbbb 1px dashed;
   }

8. Save your style sheet and preview the main document, chapter3.html, in your browser. Figure 3.6 shows the styling of the h1 header.

   
   Figure 3.6: Using the element box to assign interesting style to a header

Listing 3.3 shows the entire sheet thus far.

body  {
     margin: 20px;
     font: normal 0.95em/1.3em "Trebuchet MS", Arial,
     Verdana, sans-serif;
     color: #333333;
     background-color: #FFFFFF;
}

h1  {
     margin: -10px -10px 15px -10px;
     padding: 0px 10px 5px 10px;
     font: 900 2em/1.1em Verdana, Arial, sans-serif;
     color: #aaaaaa;
     background-color: #eeeeee;
     border-bottom: #bbbbbb 1px dashed;
}

To style the h2 header, follow these steps:

1. Underneath the rules for h1, use the element selector for h2:

   h2  {
   
   }

2. Now, add the margins you’d like:

   h2 {
        margin: 0px 0px 5px 0px;
   }

3. And add the padding:

   h2  {
        margin: 0px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
   }

4. Set the font properties:

   h2  {
        margin: 0px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
        font: bold 1.2em Verdana, Arial, sans-serif;
   }

5. Add the text color:

   h2  {
        margin: 0px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
        font: bold 1.2em Verdana, Arial, sans-serif;
        color: #666699;
   }

Once you’re finished, save the changes. Figure 3.7 shows a comparison between the two header styles with the paragraph text temporarily removed.

Figure 3.7: Comparing the styles for h1 and h2 headers

At this point, you’d create additional styles for headers level 3, 4, 5, and 6 should you need them. Each rule should be written consecutively so as to continue following the document tree.

Listing 3.4 shows the style sheet as it should look now.

body  {
     margin: 20px;
     font: normal 0.95em/1.3em "Trebuchet MS", Arial,
     Verdana, sans-serif;
     color: #333333;
     background-color: #FFFFFF;
}

h1  {
     margin: -10px -10px 15px -10px;
     padding: 0px 10px 5px 10px;
     font: 900 2em/1.1em Verdana, Arial, sans-serif;
     color: #aaaaaa;
     background-color: #eeeeee;
     border-bottom: #bbbbbb 1px dashed;

h2  {
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     font: bold 1.2em Verdana, Arial, sans-serif;
     color: #666699;
}

Figure 3.8 shows a portion of the page that contains all of the styles you’ve written so far.

Figure 3.8: A portion of the document as it looks with the current style sheet in place

Creating the Paragraph Style

Creating styles for the paragraph is as straightforward as creating them for the body and headers. In this case, you’re going to add a margin and font styles, as follows:

p  {
     margin: 0px 0px 5px 0px;
     font: normal 0.95em/1.3em "Trebuchet MS", Verdana,  
     Arial, sans-serif;
}

Styling the Images

Images are unique in that they can be positioned on a page in a variety of ways. In this chapter, the concern is mostly to ensure that there is no border around the images. To do this, add the following rule:

img  {
     border: none;
}

Styling the Link

To style the link, first, you’ll create a style for the main link, and then you’ll move on to the next section, where you will create link rules using pseudo class selectors.

Add the following CSS rule to your style sheet:

a:link  {
     color: #0099CC; 
     background-color: transparent;
     text-decoration: none;
}

This styles any standard link as blue in color, with a transparent background and no text decoration.

Listing 3.5 shows the progress of the style sheet.

body  {
     margin: 20px;
     font: normal 0.95em/1.3em "Trebuchet MS", Arial, 
     Verdana, sans-serif;
     color: #333333;
     background-color: #FFFFFF;
}

h1  {
     margin: -10px -10px 15px -10px;
     padding: 0px 10px 5px 10px;
     font: 900 2em/1.1em Verdana, Arial, sans-serif;
     color: #aaaaaa;
     background-color: #eeeeee;
     border-bottom: #bbbbbb 1px dashed;
}

h2  {
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     font: bold 1.2em Verdana, Arial, sans-serif;
     color: #666699;
     background-color: transparent;
}

p  {
     margin: 0px 0px 5px 0px;
     font: normal 0.95em/1.3em "Trebuchet MS", Verdana,
     Arial, sans-serif;
}
img  {
     border: none;
}

a:link  {
     color: #0099CC; 
     background-color: transparent;
     text-decoration: none;
}

Finally, you’ll create styles for the unordered list and list items, as follows:

ul  {
     font: normal 0.95em/1.3em "Trebuchet MS", Verdana, 
     Arial, sans-serif; 
}

li  {
     font: normal 0.95em/1.3em "Trebuchet MS", Verdana, 
     Arial, sans-serif; 
}