Cascading Style Sheets
Style sheets are used to add specific styles and layouts to web pages. They are called Cascading Style Sheets or CSS, because styles applied to one block of HTML code naturally cascade down to all of the smaller blocks contained within it. The latest version of CSS is CSS3.
Inline styles are applied to individual tags as style attributes. This is the very lowest level in the DOM hierarchy where they overrule anything that has gone before. They are not really style sheets, but individual styles, and usually intended to make one-off changes to the default or document style.
For example, the font of one particular paragraph of text may be altered to monospaced Courier font (to show HTML code) with
<p style=”font-family: ‘courier new’ ”>This is the page code</p>
A style sheet can be inserted into the page with <style></style> tags, usually in the head of the document where it is loaded first and ready to process the displayed page. So, the style examples used above can be declared in the head of the page, to affect the whole page, as
External style sheet files are used to style an entire website. Each page can be linked to the same file so that a uniform style is applied to all the web pages on the site. So, the above example can be written in a pure text document, without the <style></style>, and saved as a file with the extension .css (although this is not strictly necessary) then linked to each page with the code (again in the document head). In general, this is how CSS technology is used.
<link rel=”stylesheet” href=”styles.css”>
This will load the style sheet into the document as if it were contained in style tags.
The huge advantage of using an external style sheet is that all your web pages are now linked to this one file. You can edit the styles at any time to change the styles of all the web pages on the entire website without having to edit any HTML code. What is more, you can copy the style sheet into any other websites and use it as a corporate look and feel.