CSS How To

CSS How To

The browser formats the HTML document according to the style sheet that has been inserted. There are three different ways to insert a style sheet in the HTML document.
  1. External Style sheet
  2. Internal Style sheet
  3. Inline Style sheet


External Stylesheet

By external style sheet we mean that this style sheet will be attached or connected externally to the HTML document.

The external style sheet is inserted through the < link > element in the HTML document. This element will be added inside the < head > element. This type of external style sheet is called persistent link. The syntax of this is as follows:

SYNTAX

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

The external style sheet will be written in the text editor with no html tags and will be saved with the .css extension. To illustrate this consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< head >

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

< / head >

< body >

< h1 > Heading 1 < / h1 >

< p > Paragraph 1 < / p >

< p > Paragraph 2 < / p >

< / body >

< / html >

This will result as follows:

external-stylesheet

The stylesheet.css document is as follows:

p

{

color: blue;

font: Times New Roman;

text-align: center;

color: grey;

}

h1

{

color: grey;

font-size: 50px;

}

body

{

background-color: pink;

}


Internal Style sheet

The internal style sheet is defined with the < style > element inside the < head > section of the HTML document. Consider the following example to illustrate this:

EXAMPLE

< ! DOCTYPE html >

< html >

< head >

< style >

p

{

color: blue;

font: Times New Roman;

text-align: center;

color: grey;

}

h1

{

color: grey;

font-size: 50px;

}

body

{

background-color: pink;

}

< / head >

< / style >

< body >

< h1 > Heading 1 < / h1 >

< p > Paragraph 1 < / p >

< p > Paragraph 2 < / p >

< / body >

< / html >

This will result as follows:

internal-style-sheet

We used the same formatting as in the external style sheet.


Inline Styles

The inline style is used to apply the style to a single element. This can be done when you add the style attribute to that element. To illustrate this, consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h1 style = “color: grey; font-size: 50px;” > Heading 1 < / h1 >

< p > Paragraph 1 < / p >

< p > Paragraph 2 < / p >

< / body >

< / html >

This will result as follows:

inline-styles


Multiple style sheets

If there are more than one style properties defined for the same element then the property that was defined in the last will be used. To understand this concept; consider the following example:

EXAMPLE

Suppose that we used an external style sheet and an internal style for a same element, if the internal style sheet is defined after the external, then the properties of the internal style sheet will be applied to the element.

< ! DOCTYPE html >

< html >

< head >

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

< style >

h1

{

color: purple;

}

< / style >

< / head >

< body >

< h1 > Heading 1 < / h1 >

< p > This HTML document consists of both internal and external stylesheet < / p>

< / body >

< / html >

The external stylesheet consists of the following:

h1

{

color: grey;

}

body

{

background-color: pink;

}

This will produce the following result:

multiple-style-sheets

If we defined the external style sheet after the internal the purple color of the Heading 1 will be grey, to illustrate this consider the following example:

EXAMPLE

< ! DOCTYPE html >

< html >

< head >

< style >

h1

{

color: purple;

}

< / style >

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

< / head >

< body >

< h1 > Heading 1 < / h1 >

< p > This HTML document consists of both internal and external stylesheet < / p>

< / body >

< / html >

This will generate the following result:

generate-the-following-result


Cascading Order

The cascading order is used to define what style will be used for the specific element if there are more than one style sheets. The order is given below; the first one is of the highest priority:

  1. Inline style
  2. External and internal style sheet
  3. Browser default