Lesson 15 - Miscellaneous Style Tags

CSS Box Model

Rather than using tables and all those tedious <table>, <tr>, and <td> tags, you could use the CSS concept of the box. Using this box model, you can create a style sheet that works off your <p> tags.

The box model describes a rectangular box and the placement of material inside it. The 3 essential properties that help you do this are:

1. margin - the area outside the box, between the border of the box and the edge of the monitor screen (or another div).
2. padding - the area between the content of the box and the border of the box.
3. border - the line separating the margin and the padding.

On your screen, neither one of the black lines will show.

Back to Top

Style Sheet for <p> Tags

Here's a style sheet you can add to your first.css document:

Set the margin of p at 2 em (1 em is the space taken up by the capital letter M), the padding at 2, and use a shorthand property for the border. It sets the line to solid, thin and black. Also, set the background color to white.

When you save your first.css style sheet, and then run home.html through the browser, this is what you get:

You can erase the border completely so that you'll get that floating, less-defined look, or set the style to dotted, dashed, double, groove, ridge, inset and outset.

You can set the border-width to thin, medium, or thick, or you can set the specific pixel thickness.

You can also set each border (border-left, border-right, border-top, border-bottom) as a different style or thickness.

That bit of styling will give you a one-pixel-wide solid top border, the right border will be a double line, 2 pixels wide; the bottom will be a dashed line 3 pixels wide, and the left margin will be a dotted line, 4 pixels wide.

There is a rather strict order for designating space around the screen. CSS always follows this order, and if you don't stick to it, you'll get into trouble:

Top Right Bottom Left

You can also change the background color. Instead of white, you can change the code to reflect a nice soft beige.

This will give the page some color:

If you want to use more than one color, simply make two classes:

Then, call up these classes in your home.html document:

Now, the page looks like this:

Back to Top

Style Sheet for Images

You can also put margins and borders around your images.

Add this code to the first.css style sheet, save it, and when you use it on a page that has images, you should get something like this:

Back to Top

Style Sheet for Links

Style sheets will also let you define how you want all your links to appear.

When working with links, you need to think about the four basic states of links:

1. link - this is the default style for the link.
2. visited - after a link has been clicked.
3. hover - as a mouse is poised over a link (pre-click).
4. active - right as the link is being clicked.

When you create a style sheet, you may not want to style all four of those states. But, you should always place them in that order (LVHA). If you don't maintain them in that order, it can cause link styles to stop working.

The element you'll be working on is the <a> tag, the anchor tag that is used for links.

Try the following in your first.css file. This code will change all the colors of the regular link, the visited, the hover and the active link.

Save your first.css file and reload your home.html file. Do you see some differences in your link colors? Be sure to move your mouse over the links to see the changes.

Another aspect of your navigation list to consider is the link that goes to the page that's currently loaded. When the home.html page is loaded, the link still goes to that url. Here's a way to signify which page the user has loaded.

In the first.css Document

Add this style:

This gives you another class, called "youarehere", and when that class is called, a green background color will show.

Back to Top

In the home.html Document

Change the first list item in the navigation division.

Take out the <a> tag (both opening and closing), and add a class attribute to the <li> tag:

Conclusions about Using CSS

Style sheets are primarily useful for unifying a multi-page site. Through style sheets, it's much easier to have the same headings, links, backgrounds, tables, and other details on each page, letting your users know instantly that they're still on your site. Remember the Repetition maxim from a few lessons back? This is a way to have it taken care of automatically. And, you can still have flexibility by adding another class.

Sometimes though, it's easier to just create a table and forget the style sheet business.

There are several websites out there that have more information on style sheets, how to form them, and how to use them.

• http://www.w3.org/Style/Examples/011/firstcss.html: From the W3C people, the organization responsible for setting the standards for CSS, this is a short tutorial on how to set up your first style sheet, something you've already done. But, you might want to take a look at it. It also gives another list of several more websites that you can look at, all explaining and illustrating style sheets.
• http://www.htmlhelp.com/reference/css/properties.html: CSS Properties gives you syntax for font properties, color and background properties, box properties.

This is the end of Lesson 15. Please go to the next lesson.

Back to Top