Add a Little class

Add a Little class

As the old saying goes, rules are made to be broken. What if you don't want every single H1 heading in your document to be white on a black background? Maybe you want every other h1 heading to be yellow on a white background. Let me introduce you to the class attribute. You can apply this attribute to almost every HTML tag, and it's almost like creating your own tags.

Figure 5.1 shows a fairly standard HTML page that uses an aqua table at the top of the page to hold the navigation links, and places other tabular content in yellow tables throughout the document. You can see the HTML document for that page in Figure 5.2.

Figure 5.1. An HTML page that formats two tables differently.

Figure 5.2. The HTML document for the page in Figure 5.1. Notice the class attribute in each <table> tag.

Take a closer look at the style properties in Figure 5.2. This document defines two table styles within the <style> tags. The HTML tag name table is followed by a period (.) and the class names (nav and rest).

table.nav {background:aqua} table.rest {background:yellow;              text-align:center;              color:black}

When the table is referenced in the body of the document, you must apply the class attribute to tell the browser which style properties should be applied. The HTML markup for each table in this example appears in the following HTML code. You can see that the class name appears within quotations just like the other HTML attributes (and as with the width attribute shown here).

<table  width="100%"> <table  width=50%>