CASCADING STYLE SHEETS
As we have seen, when creating web pages, HTML is used to mark up the structure of the page. However, to change the appearance and layout of your web page, it is strongly recommended that you use a technique called CSS (cascading style sheets). The idea with CSS is that you put all the instructions for the design of your web page into a separate document called a style sheet (a plain text file with a .css extension). That single style sheet can then be shared by lots of different web pages.
Using a style sheet makes it easier to enforce a consistent design across a whole website. You can ensure that all your headings look the same, for example, or that all your images have the same border on them. When it's time to refresh your site's look, you won't have to trawl through all your HTML files - just update your style sheet and the design across your whole site will change.
In addition to using an external style sheet as described above, there are two other (far less used) ways of making use of CSS: internal CSS where you add style to an individual web page and inline CSS where you add style to a specific HTML tag.
Finally, an important point to note about these 3 different methods is that the word 'Cascading' in CSS refers to their precedence when applied. The general rule of thumb is that the last style defined is the one used; therfore internal CSS takes precedence over external, and inline CSS has the highest precedence of the 3.
CSS Syntax
While .css files and .html files are both plain text files, CSS syntax is different to HTML syntax. A CSS file contains CSS rules, each rule consisting of a selector and a declaration block. The selector specifies the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon. Declaration blocks are surrounded by curly braces. The following is an example of a CSS rule:
h1 {color: red; font-size: 10px;}
The following table of 5 images demonstrates the power of CSS. The Homepage content is exactly the same in all 5 examples but a different stylesheet is used. In the last example no style sheet is used. To see these examples, and a lot more, check out W3 Schools
