How to Create CSS

How to Insert a Stylesheet

When a style sheet is read, the browser will format the HTML document according to it. There are three ways to insert a style sheet:

External Stylesheet

When styles need to be applied to many pages, external style sheets are the ideal choice. In the case of using external style sheets, you can change the appearance of the entire site by changing one file. Each page uses the <link> tag to link to the stylesheet. The <link> tag is in the header of the document (

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

Browsers will read the style declarations from the file mystyle.css and format the document accordingly.

External style sheets can be edited in any text editor. The file should not contain any html tags. Style sheets should be saved with a .css extension. Here is an example of a style sheet file:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Do not leave any spaces between the property value and the unit. If you use "margin-left: 20 px" instead of "margin-left: 20px", it will only work in IE 6, but not in Mozilla/Firefox or Netscape.

Internal Stylesheet

When a single document needs special styles, you should use an internal stylesheet. You can define an internal stylesheet using the <style> tag in the document header, like this:

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

Inline Styles

Since inline styles mix presentation and content, they lose many advantages of style sheets. Please use this method with caution, for example, when the style needs to be applied to only one element at a time.

To use inline styles, you need to use the style attribute within the relevant tags. The style attribute can contain any CSS properties. This example shows how to change the color and left outer margin of a paragraph:

<p> style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Multiple Styles

If some properties are defined by the same selector in different style sheets, then the attribute values will be inherited from the more specific style sheet.

For example, the external stylesheet has three properties for the h3 selector:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

While the internal stylesheet has two properties for the h3 selector:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

If this page with an internal stylesheet is also linked to an external stylesheet, then the style obtained by h3 is:

color: red; 
text-align: right; 
font-size: 20pt;

The color property will be inherited from the external stylesheet, while the text alignment (text-alignment) and font size (font-size) will be replaced by the rules in the internal stylesheet.