Cascading Style Sheets

Cascading Style Sheets are a very useful tool for the web developer, allowing us to make global changes to a website with very little effort. For example, the type you are currently reading is 10pt Arial. In the code we have identified this style as "bodytext" because it is used in the body of most pages on this site.

This bodytext style is defined in a separate stylesheet file that all web pages on this site can use. If we wanted to change all bodytext on the website to 12pt Arial, we could do so by simply changing the style specification in the stylesheet file. Particularly for large websites with hundreds of pages, this can be a huge time saver.

We can also apply a separate style to links within the bodytext style. This is a link. Notice that we've made this link blue, without an underline and with an orange background. If you mouse over it, you'll see that it turns red, becomes bold, and has a green background. A bit over the top for colors, but it gets your attention, and it demonstrates a little of what can be done with Style Sheets.

Now let's add some interactivity to the styles. We've created links that let you change the font on this page. Click on one of the links below to change the page font. In this case we've restricted the changes to this page, but we could make this apply to all web pages on this site.

• Change to 10pt
• Change to 12pt
• Change to 14pt

And yes, there are three different types of bullets in the list above. That was also done with style. We could also make it a numbered list, and specify whether the numbers would be decimal, or Roman (upper or lower case).