Cascading Style Sheets

So far, we've learned how to add text and to imitate some word processing effects, but everything is still in black and white. Ughh! Want to add some some style to your page? That's where Cascading Style Sheets, or CSS, comes in. CSS consists of rules that define how HTML elements appear in a web browser. The following illustrates how a rule is structured.

image of css rule

CSS will affect whichever element you apply it to. If you want all of your level 1 headings to be Blue, Times New Roman,and your level 2 headings to be in red, then you would Key in: 

 
h1{
    font-family: Times New Roman;
    color: blue;
}
h2{
    font-family: Times New Roman;
    color:       Red;
}

If you wanted both of your headings to look alike, then you would simply key in your CSS like this: 

 
h1, h2{
    font-family: Times New Roman;
    color: Blue;
}

You can also change the color of your paragraph text. The code for it is: 

p{
    color: green
}

Let's say you want to put a horizontal line under your level 1 headings . Easy, easy.

h1, h2 {
    font-family: Times New Roman;
    color: Blue;
}
h1{
    border-bottom: 1px solid black;
}

But what if I want to put that line under both of my heading styles? Do I have to key it in twice? Nope.

h1, h2 {
    font-family: "Times New Roman";
    color: blue;
    border-bottom: 1px solid black;
}

Whoa! That's a bunch of new stuff. Let's take some time and try this stuff out.

Practice Session

  1. Open up a new Notepad file
  2. Key in your basic HTML code
  3. h1 will be "Dream Car"
  4. Using paragraph tags, write 3 descriptive paragraphs describing your dream car.
  5. Use the image tag to insert a picture of this car
  6. Decide which color you want your paragraphs in, and which color you want your h1 in.
  7. Stick with the basic colors for now so that we don't have to get into color codes.
  8. Decide on the font style for the paragraphs. You can also change the color of the text,if you want to.
  9. Key in <link rel="stylesheet" type="text/css" href="practice.css" /> after the title and before the </head>
  10. Save as "dreamcar.html", select "all files" and put it in your web page folder

Open up a new Notepad file, and key in the following:

body {
    font-family: (font of your choice);
    color: (color of your choice);
}
p{
    color: (color of your choice)
}

h1 { 
    font-family: (font of your choice);
    color: color of your choice)
    border-bottom: 1px solid black;
}

Save this new file as "practice.css", select "all files" and save into your web page folder. Open up "dreamcar.html" in the browser, and view the results.

Main List Properties

man reading long list clip art

You've seen how CSS can "dress up" plain text. There are also a few things you can do to "dress up" a list. The first is to change the appearance of the markers (bullets) in an unordered list. Some code for these effects are:

  li{
	list-style-type: disc; (default setting, which is bullets) or

	list-style-type: circle; or

	list-style-type: square; or

	list-style-type: none; (removes markers)
  }

Another thing you can do is customize your markers to fit your topic. To do this, use the code below:

  li{
	list-style-image: url; (images/nameofimage.gif)
	padding-top: 5px; (gives the image some head room, you may 
	        need to adjust this to fit your image)
	margin-left: 20px; (adds space to the left of the markers)
  }

One last thing we are going to learn how to do is to tell the browser whether to have the text wrap under the marker, or to wrap under the text above it. This seems like a little detail, but some people do have a preference.

  li{
	list-style-position: inside (text wraps under the marker) or
	list-style-position: outside (text wraps under the text above it)
  }

Practice Session

We've just covered a lot of CSS styles that can be applied to lists. Let's make a list, and apply some of these styles to it so that you can see how it all works.

Go back to your "top10.html" source code and key in the following under the title tag: <link rel="stylesheet" type="text/css" href="top10a.css">. Save your work, then open this page up in your browser (F5 is the shortcut). How does it look? Now, go back to your source code, and change the stylesheet name to "top10b.css". F5 back to the browser and look at your work. Do the same for "top10c.css" and "top10d.css". Decide which style you like best, and leave that one on your web page. Do Not erase the other style sheets.