CSS External and Internal style Sheets

In this tutorial you will learn about Cascading Style Sheets (CSS), Applying CSS, External style sheets, Internal styles, Inline styles and Multiple style sheets

There are different types for specifying styles to be used with HTML documents, they can be specified in an external CSS file, inside the < head > element of the HTML document, or/and inline to be specific to a single HTML element, also there is the browser default style.
These styles will be cascaded in a single HTML documents at the following priority:

1. Browser default.
   .
2. External CSS file.
   .
3. Internal < head > style.
   .
4. Inline style.

Inline style has the highest priority.

External style sheets

The external style sheet can be applied to many HTML documents, a .css file has to be created, and you link to it from the HTML document using < link > tag.

Example:

< head >
< link rel=”stylesheet” type=”text/css” href=”cssfile.css” / >
< /head >

The CSS file may look something like:

body
{
background-color: #00CCFF;
}
h1
{
color: #0000FF;
}
p
{
font-family: Arial, Helvetica, sans-serif;
}

Internal styles:

The internal style will be applied only to the document that declares it.

Example:

< head >
< style type=”text/css” >
body
{
background-color: #00CCFF;
}
h1
{
color: #0000FF;
}
p
{
font-family: Arial, Helvetica, sans-serif;
}
< /style >
< /head >

Inline styles:

The inline style is only applied to the HTML element that declares it.

Example:

< p style=”color: red;” >This is a red paragraph.< /p >

Multiple style sheets

If multiple styles for the same element are used in the same document, the browser will use styles priority to select the style to be applied for this element presentation.

Example:

The external style sheet:

p
{
font-size: 9px;
font-style: normal;
font-variant: small-caps;
}

The internal style inside the element:

p
{
font-size: 10px;
font-style: italic;
}

Any < p > element in the document will be styled as:

p
{
font-size: 10px;
font-style: italic;
font-variant: small-caps;
}

This is because the internal style has higher priority than the external style sheet.

If a < p > element is defined in the same document as:

< p style=” font-size:12px;”>Inline Style< /p >

Then it will be styled as:

p
{
font-size: 12px;
font-style: italic;
font-variant: small-caps;
}

This is because the inline style overrides any other used styles.