EDT555 Web Design Tips & Tricks

CSS classes can be added to almost any HTML element. Define a class by giving the HTML tag name an extension (any name you want to use) preceded by a period and adding the standard style definition of properties and values inside curly brackets. Then specify this extension in your HTML. The benefit of this is that you can have the same HTML element, but present it differently depending on its class.

Example #1: Let's say you want two special types of paragraphs in your document. You want one to have blue, italic text. Let's give it the class name "blue." You want the other to have red, bold text. Let's give it the class name "red."

p.blue {color: blue; font-style: italic }
p.red {color: red; font-weight: bold }

<p class="blue"> This paragraph will have blue, italic text. </p>
<p class="red"> This paragraph will have red, bold text. </p>

Example #2: Let's say you want a special table in your Web pages that you can use as a callout. You want it to be aligned right, have a blue background, a top and bottom margin, a prescribed width, and larger white text: (Lets give it the class name "callout.")

     table.callout { width: 220px; margin-right: 10px; background-color:
     #99ccff; border-top: 2px solid #000; border-bottom: 2px solid #000;
     font-family: Verdana; font-size: 115%; color: white; }

2. Then place the table in a division in your HTML document and specify the class attribute:

     <div align="right">
     <table class="callout">
     <tr>
     <td>The early bird may get the worm, but the second mouse gets
      the cheese.</td>
     </tr>
     </table>
     </div>

The early bird may get the worm, but the second mouse gets the cheese.

Example #3: Let's say you want a special type of link with background and font colors that change when the mouse cursor moves over the link, padding, and a border around each link. Let's give it the class name "mylink."

1. First define the styles. They should appear in the order specified below. If you rearrange
them your hover effects may stop working, as they will be overridden:

     a.mylink {background-color: #99ccff; font-family: Arial; font-size: 95%;
          color: white; text-decoration: none; padding: 2px 6px 2px 6px;
          border: 1px solid black}
     a.mylink:visited {background-color: #99ccff; font-family: Arial;
          font-size: 95%; color: white; text-decoration: none;
          padding: 2px 6px 2px 6px; border: 1px solid black}
     a.mylink:hover {background-color: #ffcccc; font-family: Arial;
          font-size: 95%; color: blue; text-decoration: none;
          padding: 2px 6px 2px 6px; border: 1px solid black}
     a.mylink:active {background-color: #99ccff; font-family: Arial;
          font-size: 95%; color: white; text-decoration: none;
          padding: 2px 6px 2px 6px; border: 1px solid black}

2. Then specify the class attribute in your HTML document:

     <a class="mylink" href="../edt555tips.htm">HOME</a>
     <a class="mylink" href="js.htm">JAVASCRIPT</a>
     <a class="mylink" href="dw.htm">DREAMWEAVER</a>

3. The result is: HOME JAVASCRIPT DREAMWEAVER

Note: These links, because a class is specified, will not change the properties of
ordinary links.

EDT 555 Advanced Web Design: Tips & Tricks

Using the class selector with HTML elements

Link an external style sheet to a web page: basic.css

CSS Tricks