by David Hockenbroch

Created on: December 08, 2008

External cascading style sheets are the best of three options - in-line styles, embedded style sheets, and external style sheets - for assigning styles to your website. Before learning to create one, one should first know what an external cascading style sheet is and why one should be used.

"External" means that this style sheet will be in a separate file from the rest of the web page. This is what gives external style sheets an advantage over the other two methods. Since the style sheet is a separate file, it will be cached by the browser, and will not need to be loaded anew every time the user navigates to a new page within your website. This reduces loading times. Also, if changes need to be made to the entire website's style, this can be done by changing just one document, rather than having to edit all of them, as would be the case with in-line and embedded styles. Since it is an external file, the website designer must provide a link to the file in the head section of the HTML document. This will look something like, "< link rel="stylesheet" type="text/css" href="mystylesheet.css" />".

"Cascading" is a reference to the order in which styles are applied. It is possible to link to more than one style sheet in the same HTML document. When this happens, if two style sheets contradict each other (for example, they assign two different background colors to the same element) the style that is assigned last will be the one the user will see. So, if a web designer includes a link to style sheet that says that all tables will have a red background, then a link to a style sheet that says that all tables will have a blue background, the browser will show the tables with a blue background.

"Style sheet" means exactly what it sounds like. This document will describe the style to be applied to the website.

To begin making an external style sheet, create a new document and save it with the file extension ".css". The style sheet will consist of three basic elements: selectors, properties, and values. The selector will tell the browser which element or elements to apply a style to. The property will tell the browser which attribute of that element you are setting. The value will tell the browser what to set that property to. They will be laid out in the document as follows:

selector, selector{

property: value;

property: value;

}

Note that all of this information could be on one line, but many web designers find this layout easier to work with. In style sheets, the spaces,

• 1
• 2
• Next Page >>