Best Practices Web Design

This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

If you missed the earlier lessons, you should start at the beginning.

Reviewing Our CSS Stylesheet

Let’s take our first look at how a CSS stylesheet works. Let’s examine the one we’ve created so far:

<style type="text/css">
body {
   background-color: #50a6c2;
}

h1 {
   font-family: "Trebuchet MS", sans-serif;
   color: #4b4f5c;
   text-align: center;
}

h2 {
   color: #754719;
}

p {
   color: #f0f8ff;
}
</style>

What does all of this actually mean?

Every element in your stylesheet controls something in your HTML code.

<style type="text/css">
					
 ...
 
</style>

These two commands open and close an internal stylesheet. (As noted earlier, later you will learn a better way to handle stylesheets, external stylesheets, but don’t worry about that now.)

More about the different kinds of stylesheets.

body {
   background-color: #50a6c2;
}

This command sets the background color on the BODY element. (There’s also a better way to set this kind of thing, but we won’t learn that for a while yet.)

h1 {
   font-family: "Gill Sans Ultra Bold";
   color: #4b4f5c;
   text-align: center;
}

This sets three separate styles for our <h1> element: the font-family, the color of the lettering, and the center alignment of the text.

h2 {
   color: #754719;
}

This sets the color of our <h2> tag.

p {
   color: #f0f8ff;
}

And this sets the color of the lettering of our paragraphs (anything contained in that <p> tag).

We didn’t actually do anything in this lesson, we merely reviewed what we’ve already learned and taken a breath before plunging back in.

On to the next page!