Eazy HTML - So eazy it's Child's Play

Quick Menu

Intorducing CSS
CSS - Quick Tutorial
Linking A StyleSheet
CSS Reference
Back Grounds.
Lists
Cursors
Borders
Positioning
Scroll Bars
Layers
Float
Margins
Padding
Fonts
Text
Pseudo Elements

How to Insert a Style Sheet

When a web browser reads a style sheet, it will format the document according to it. Here are the three ways of inserting a style sheet:

EXTERNAL STYLE SHEETS
An external style sheet is the most ideal way to apply styles when it is applied to more than one of your web documents. The advantages with an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

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

The browser will read the style definitions from the file mysitestyles.css, and format the document according to it.

An external style sheet can be written in any plain text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension.

Site Stats

There are 5 users online

click to see where

149,437 total unique visitors

486,655 total pageviews

63 visitors in the last 24 hours

61 total visitors today

217 pageviews today

This page has been visited 1,291 times

get this script

Most users online at once:
63 on 01/18/2010

INTERNAL STYLE SHEET
Now an internal style sheet should only be used when the particular document has a unique style. You define internal styles in the head section by using the <style> tag, like this:

<head>
 <style type="text/css">
  <!--
  hr {color: blue}
  p {margin-left: 20px}
  body {background-image: url("images/backimg.gif")}
 </style>
 -->
</head>

The browser will now read the style definitions in the head and format the document according to it.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. This is why we surround the styles with the HTML comment tags thus hiding it so it is not displayed in the document.

INLINE STYLES
An inline style loses many of the advantages of style sheets by mixing content with presentation again. Use this method as little as possible, such as when a style is to be applied to a single occurrence of an element.

<p style="color:#0000DD; text-align:center;">
  This is a paragraph
</p>

So there they are, all 3 ways of inserting styles into our web documents. Nothing much to it really is there.