CSS Style Sheets

HTML tags are used to give the content of web-pages structure.

The web browser interprets the tags and renders the content onto the display. How it appears is based upon the web standards set by W3C.

The problem with attributes

We can tell the browser to format elements differently by using the styles attribute. The problem with using the styles attribute, is that html was never meant to use attributes to format the text. To get consistency you need to repeatedly set the style for each occurance of the element, which is a lot of work. A better alternative is to create a separate document with just the styles stored in it. This allows multiple pages to use the same styles, giving the pages a consistent appearance across a site. It is also quicker to update multiple pages at once because a change need only be made to the style sheet document rather than each individual page.

CSS

Style Sheets add further instructions through a language called CSS.

  • CSS stands for Cascading Style Sheets.

  • CSS is a language that describes the style of an HTML document.

  • CSS describes how HTML elements should be displayed.

Syntax

In a new text document you can define the styles for an element by stating its name then using curly braces to hold a list of the styles (separated by semicolons).

body {

background-color: Lavender;

color: Indigo;

}

The text file is then saved with the file extension .css

Back in the webpage, you need to add an instruction to the web-browser to look at the stylesheet when rendering the page. A link is added into the <head> section of the page.

<link rel="stylesheet" href="stylesheet.css">

When the web-browser loads the page, it will see in the <head> section that it should also load the stylesheet. It will look at the stylesheet to see how it should format the elements that have had their styled defined.

Exceptions

The web-browser will always style the page using the default W3C standards first.

It then checks to see if there is a styles sheet, and will override the default styles with the new definitions.

Finally, the web browser will override the general styles (either default or from the CSS file) with any inline styles that have been added to individual elements as an attribute.

Challenge

Try defining some styles in the css file below, and adding the link to the CSS file in the index.html.