CSS is a set of controls that you can use to change the appearance of a Web page. For more information on CSS, I recommend the Web Developer's Virtual Library.
Working with CSS, you will want to have a Quick Reference handy. The one I will be handing out in class comes from DHTML and CSS by Jason Cranford Teague. On the web, you can find CSS quick references at various sites, including Webmonkey and Web Review.
Generally speaking, there are two steps involved in using CSS. The first step is to create a style class. A style class is like a recipe. The ingredients come from the CSS "shelf" as given in the quick reference.
For example, one of the ingredients in CSS allows you to change font size. If I want to set up a class that has a font size that is 50 percent larger than normal, then on my style sheet page I go through the following steps:/* This is the style class for a font that will be 150% of normal size. Save this under your styles directory as mystyle2.css */
.section_subheadYou use a style class (called invoking the class) on an HTML page. When you invoke a class, you have to type the name exactly as you typed it on the style sheet, but without the . In general there are three different ways to invoke a class:
<html>
<!-- This is the HTML page that shows various ways of invoking the section_subhead class -->
<head>
<title>
Testing the subhead class
</title>
<!-- The following link statement must be included. It tells the browser where to find the style sheet used for this page. -->
<link rel = "stylesheet" href = "styles/mystyle2.css" type = "text/css">
<head>
<body>
<p>
Here are three ways to invoke the section_subhead class.
</p>
<p class = "section_subhead">
First, we invoke the class for the entire paragraph. What we are doing is over-riding the standard font for the p tag and replacing it with the font specified in our section_subhead class.
</p>
<p>
Next, we invoke the class right in the <span class = "section_subhead">middle of the line</span>. For this particular style class, it looks pretty stupid.
</p>
<div class = "section_subhead">
<p>
Finally, we invoke the class for a block of text.
</p>
<p>
Now, it can cover one or more paragraphs.
</p>
</div>
</body>
</html>
<!-- Save this page under htdocs as styletest2.html -->
Using your browser, look at styletest2.html to see how the style class affects the way the page looks.
The section_subhead class that we created only changes the font size. In fact, we could use many different controls. Go back to mystyle2.css and add two lines that will underline the text and give it a yellow background.
Now, save this style sheet and go to your browser and re-load styletest2.html. You should see the larger font now underlined and highlighted with a yellow background.
Of course, you can have more than one class in a style sheet and on a web page. For example, we could add a class called "disclaimer" to put something in really small type. On mystyle2.css, we could have
Then, on styletest2.html, we could add a paragraph that reads
When you re-load styletest2.html, the privacy policy will show up in small type with hard-to-read italics.
By this point, you probably are getting curious about what the various ingredients are that CSS gives you for making your own recipes (classes). We will start to get into that in the next lecture.