CSS Create

When a style sheet is read, the browser formats the HTML document according to it.

How to insert a style sheet

There are three ways to insert a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

When styles need to be applied to many pages, an external style sheet is the ideal choice. With an external style sheet, you can change the appearance of an entire site by changing one file. Each page links to the style sheet using a <link> tag. The <link> tag goes in the head (of the document):

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

The browser reads the style declarations from the file mystyle.css and formats the document according to them.

An external style sheet can be edited in any text editor. The file must not contain any HTML tags. The style sheet 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");}

RemarkDo not leave a space between the property value and the unit (e.g., "margin-left: 20 px"); the correct way is "margin-left: 20px".

internal style sheet

When a single document needs special styles, an internal style sheet should be used. You can define an internal style sheet in the head of the document using a <style> tag, like this:

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

inline style

Because it mixes presentation with content, inline styles lose many of the advantages of style sheets. Use this method sparingly, for example when a style needs to be applied only once to a single element.

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

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

multiple styles

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

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

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

And the internal style sheet has two properties for the h3 selector:

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

If the page with the internal style sheet is also linked to the external style sheet, then the style that h3 gets is:

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

That is, the color property will be inherited from the external style sheet, while text-alignment and font-size will be replaced by the rules in the internal style sheet.

Multiple style precedence

Style sheets allow style information to be specified in many ways. Styles can be specified in a single HTML element, in the head element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.

In general, the priority is as follows:

Inline style > Internal style sheet > External style sheet > Browser default styles

style.cssThe file style code is as follows:

h3 {
    color:blue;
}

Example

<head> <!--External style sheet style.css--> <link rel="stylesheet" type="text/css" href="style.css"/> <!--Set: h3{color:blue;}--> <style type="text/css">/* Internal style */ h3{color:green;}</style> </head> <body> <h3>Shows green, it is the internal style.</h3> </body>

Try it Yourself »

Note:If the external style is placed after the internal style, the external style will override the internal style, as shown in the following example:

Example

<head> <!--Set: h3{color:blue;}--> <style type="text/css">/* Internal style */ h3{color:green;}</style> <!--External style sheet style.css--> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h3>Shows blue, it is the external style.</h3> </body>

Try it Yourself »
other extensions