Part Two: How do we apply CSS to HTML?

There are three ways you can apply CSS to an HTML document. The recommended method is to link to an external style sheet. This technique can save you a lot of work. If for example, you would like to change the background color of 10 pages in a website, a linked style sheet can save you from having to manually change all 10 web pages, one by one. Using CSS, the change can be made in a few seconds.

<link rel=”stylesheet” href=”style.css”>

NOTE: You can link to more than one style sheet in an HTML document.

A CSS Style Sheet has rules

Let’s Tidy Up our Style Sheet by Grouping

We can group Selectors together and Rules together.

Consider these three rules:

h1 {color: green;}
h2 {color: green;}
h3 {color: green;}

All three rules have the same declaration – they set the h1 in the related HTML document to be green. Since all three declarations are identical, we can group the selectors into a list (separated by commas) and only write the declaration once:

h1, h2, h3 {color: green;}

A selector may have more than one declaration. For example, we could write a style sheet with these two rules:

h1 {color: green;}
h1 {text-align: center;}

Or we can tidy up the style sheet by grouping the declarations that relate to the same selector into a list (separated by semicolons)

h1 {color: green; text-align: center;}

Next we will look at the CSS Order of Precedence. This is a simple subject and of great importance, because without understanding it, CSS can be frustrating.

Tweet
Pin
Share