Writing for the World Wide Web
Changing HTML Tags
Sometimes we want HTML tags to do a little more than just the single function they are intended for. Using Cascading Style Sheets, we can create special types, or classes, of existing HTML tags that will include other features. Cascading Style Sheets are useful when you want to have consistent sets or types of information in one or many HTML documents. For example, sometimes we may want a bolded font to also be italicized and show up in red; we could create a special class that could create this type of text.

Or, we may want text within certain table cells to be a different font; we could create a special class that would change table-cell information.

You would need to put style and /style tags in the head of your document, then create classes for each of the links:

<style>
b.bigred { color: ff0000; font-style: italic; }
td.specialcell { color: 0000ff; font-family: Arial; }
h3 { color: 009900; }
</style>

When you wanted to use these classes, you would add a class attribute to the given tag, like this:

<h3>This is an H3 header.</h3>
<br /><b class="bigred">This text</b> is not only bolded, but also red and italicized.

Notice: b.bigred and td.specialcell are special instances of the b and td tags that you need to include the class attribute in. However, the h3 tag will always make that text green because no class was created; every h3 element in your document would be affected by the style sheet. So the above code would look like this:

This is an H3 header.

This text is not only bolded, but also red and italicized.


Home | Course Information | Assignments | Schedule | Class Notes | Resources | Student Pages