Webwork
/
Where Style Tags Go

Style tags can go in one of three places:

  1. In-line - the style tag is incorporated into the HTML tag. This is the least preferred method.
  2. Within the head of the HTML document.
  3. 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>

<link rel="stylesheet" href="example.css" type="text/css" />

</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:
<link rel="stylesheet" href="whatever.css" type="text/css" />

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:

<link rel="stylesheet" href="css/whatever.css" type="text/css" />

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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com