Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

Webwork

Where Style Tags Go

Style tags can go in one of three places:

In-line - the style tag is incorporated into the HTML tag. This is the least preferred method.
Within the head of the HTML document.
In an external style sheet separate from the HTML document. This is the preferred method.

Which of these you use depends on what you are trying to do and, to some degree, how sloppy you are willing to be with your code.

Example of an in-line style tag:

Source:

<p>This is an unstyled paragraph.</p>

<p style="font-size: 24px; line-height: 130%">This is a paragraph with in-line styling.</p>

Web page:

This is an unstyled paragraph.

This is a paragraph with in-line styling.

The problem with this method is that, if you want to make a change to all the paragraphs in your document, you have to go through every <p> tag and change it individually—a huge waste of time.

Style tags in the head of the document:

Text Source:

<html>

<head>
<title>
CSS Example
</title>

<style type="text/css">
p
{
font-size: 24px;
line-height: 130%;
}
</style>

</head>

<body>

<p>This paragraph is styled by the CSS tags in the head of the document.</p>

</body>

</html>

Web Page:

This paragraph is styled by the CSS tags in the head of the document.

The advantage of this is that one tag will style every paragraph in the whole HTML document.

Style tags in separate Style Sheet document:

HTML Source:

<html>

<head>
<title>
External CSS Example
</title>

</head>

<body>

<p>This paragraph is styled by an external style sheet linked to in the head of the document.</p>

</body>

</html>

Style Sheet:

p
{
font-size: 24px;
line-height: 130%;
}

Web page:

This paragraph is styled by an external style sheet linked to in the head of the document.

The advantage of this is that a single external style sheet will style every paragraph in an entire Web site - so you can change the appearance of thousands of pages by just altering one document.

To set up an external style sheet, you create a separate document which contains only the style declarations without the opening and closing <style> tags:

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

p
{
font-size: 24px;
line-height: 130%;
}

~~</style>~~

You then name this file with a useful title so you can easily figure out its purpose, give it a .css suffix and save it to a location that you can link to from your HTML doc:

This link goes in the head of any HTML documents that you want to have this style.

To keep your site organized, you should set up a folder for all of your site's style sheets and title it "css" (just like you placed your images into an "images" folder) and include the css folder's name in the stylesheet path:

All of the individual style elements for a site (or a section of a site) can go into a single CSS document. The CSS document for the Webwork site that you are on now looks like this:

body {
background-color: #fff;
margin: 20px;
font: 12px/20px verdana, sans-serif;
}

a:link, a:visited {
color: #459; text-decoration: none;
}

a:hover, a:active {
color: #900; text-decoration: underline;
}

/*SUBHEAD*/
h4
{
padding: 10px 0 0 0;
margin: 20px 0 10px 0;
font: bold 12px/20px verdana, sans-serif;
}

li {
margin: 10px 20px 0px 10px;
}

.list_item
{
margin: 10px auto;
padding: 15px 20px 20px 20px;
border: 1px solid #cde;
}

.codesnip
{
font-family: monospace;
line-height: 150%;
color: #000;
padding: 10px 20px 10px 20px;
margin: 20px 20px 20px 20px;
background:#f9f9f9;
border: #ccc solid 1px;
}

.browsersnip
{
color: #000;
padding: 10px 20px 10px 20px;
margin: 20px 20px 20px 20px;
background:#fff;
border: #ccc solid 1px;
}

.notebox
{
margin: 30px auto;
padding: 15px 20px 20px 20px;
border: 1px solid #cde;
}

Note in above example that:

/*SUBHEAD*/

is how comment tags are indicated in CSS code.

"Cascading"

If an element is styled in more than one place, the style attributes cascade in a specific order.

If you have added CSS to <p> tags in an external CSS document and you have also added CSS to <p> tags in an internal style sheet (in the head of the doc) and you have also added inline style tags to specific <p> tags, the style tags closest to the element will override the other ones.

< Previous | Webwork Table of Contents | Next >