CoffeeCup - HTML Editor, Flash & Web Design Software

Over 48,871,473 Downloads in 87 Countries

Chapter 7: Some Style Sheet Examples

In this section I will present some examples of using style sheets to format Web pages. But first, there are two HTML tags you need to know about.

The <div> and <span> Tags

The <div> and <span> tags are essential if you want to use CSS for formatting your Web pages. These tags have no function except to mark off sections of a document, permitting you to assign styles to them by including a class attribute in the tag. The difference between then is that <div> is a block element and its content will start on a new line, whereas <span> is an inline element and its content will be on the same line as adjacent content. Thus, you could use <div> to assign a style to a group of several paragraphs while you would use <span> to assign a style to one or more words in a sentence. You'll see examples in the following sections.

Creating Custom Styles for Headings

The HTML tags <h1> through <h6> are useful for creating headings in your Web pages. If you do not like the default appearance of these headings you can use CSS to format them to your liking. This example shows you how to define custom formatting for the first three heading levels. It also shows you how to use an external style sheet with an HTML document.

The first step is to define your formatting goals. For this example we will write styles so that:

Displays heading level 1 in red text.
Displays heading level 2 in Bazooka font, underlined.
Displays heading level 3 indented by 20 pixels.

Now you can create the style sheet as an external file. Here's how:

Start your text editor and create a new, blank file.
Enter the style sheet rules shown in Listing 7.1.
Save the file with the name test1.css. Be sure to save it in the same folder where you will place the Web page.

Listing 7-1. The code in the example style sheet.

h1          { color: #FF0000 }
  
h2          { font-family: Bazooka; font-size: 14pt;
  
             text-decoration: underline }
  
h3          { margin-left: 20px }

The next step is to create a Web page that uses this style sheet. The HTML code for the one I used is shown in Listing 7-2. Note the use of the <link> tag to link the page to the style sheet.

Listing 7-2. An HTML page that uses the style sheet from Listing 7-1.

stylesheet usage

The result is shown in Figure 7-4. It may not be obvious in the figure but Heading 1 is displayed in red. Custom Header Styles

Figure 7-4. The appearance of the custom heading styles.

Using Styles for Table Formatting

This next example shows how you can use a style sheet to control the formatting of an HTML table. The objective is to define two styles that can be applied to individual rows. One will be used to display the first row of the table as a header using a larger white font on a dark gray background. The other style will be use to format every other row with a light gray background to assist users is reading the table. Each style will
be defined with a class selector; then the appropriate class attribute will be added to the <tr> elements as needed. Listing 7-3 shows the final HTML document including the internal style sheet and a table of dummy data. Please note how the class attribute is used to assign the appropriate style to the table rows. Then resulting table is shown in Figure 7-5.

Listing 7-3. Using an internal style sheet to format a table.

internal stylesheet to format table

Figure 7-5. The display of the HTML document from Listing 7-3.

Using Styles to Format Hyperlinks

Every browser has default styles for links. For Internet Explorer this is blue underlined text for unvisited links and purple underlined text for
visited links. You can use styles to change the way links are displayed, but first you need to know about pseudo-classes.
Every link in a document uses the <a> tag and they all look pretty much the same. In other words, there's no way that you can look at the HTML source code and tell which links have been visited and which have not. What happens is that each browser keeps a history list of links visited within the past so many days (20 days by default in Internet Explorer but this value can be changed by the user). If a link's URL is found in the history list it is considered "visited;" otherwise it is not. The browser automatically assigns the visited pseudo-class to links that have been visited and the link pseudo-class to links that have not been visited. Two other pseudoclasses are available as well: active for an active link (one that is being clicked) and hover for one the mouse cursor is hovering over. You can use these pseudo-classes as selectors in a style sheet by following the element name with a colon and the pseudo-class name. Thus,

a:link

is a selector for unvisited links and

a:visited
  
a:active
  
a:hover

are selectors for visited, active, and hover links respectively. Using these selectors you can define styles for your page's hyperlinks. Let's look at an example. Suppose you wanted unvisited hyperlink to a page to be highly visible--for instance, larger white text on a red background, not underlined, with wider left and right margins. Visited links should be the same except for having black text on a gray background. Here are the styles to do this: active and visted links style

Note that you must include text-decoration: none in the style to cancel the default underlining of links. Figure 7-6 shows how the resulting link styles will appear.

Figure 7-6. Using styles to define hyperlink appearance.

Style Shortcuts

When you have two or more complex styles that differ only in one or two respects, you can save some time and effort by using the fact that later styles override earlier ones. Define the base, complete style and assign it to all the relevant HTML elements and classes. Then, below that rule, add new rules for each element or class that make the necessary changes. We could have done this with the previous example as follows:

a:link, a:visited {
  	 
             font-size: larger;
  	 
             color: #FFFFFF;
  	 
             padding-left: 10px;
  	 
             padding-right: 10px;
  	 
             text-decoration: none;
  	 
             background-color: #CC0000;
  	 
}
  	 
a:visited {
  	 
             color: #000000;
  	 
             background-color: #CCCCCC;
  	 
}

The first rule assigns all the relevant formatting to both visited and unvisited links, then the second rule changes the colors for visited links, leaving the other aspects of the formatting unchanged from the first rule.

« Working With Selectors

Chapter 7 Summary »

Table of Contents