The Advantages of Style Sheets
(Page 1 of 4 )
Style sheets have become ever more popular each year as designers realize that whole web sites can be customized without too much fine editing. They allow properties for the whole site to be set, such as page color, link color, margins, text size, and much more. All of these can be keyed into a single file or in the main body of the code.
Many designers still stray away from the overbearing appearance of plain code. Once the idea of setting page properties is grasped, style sheets can soon become another useful tool. It is better to apply a set of rules to each page in the browser window than to repeat the same edits on each and every page of the web site. Familiarity with HTML will help in the understanding of this article as I lay down the advantages of style sheet commands.
A standard piece of HTML code contains properties for page altering applications. The main ones here tend to be BODY, P, BR, FONT and headers H1, H2, etc. The BODY tag contains properties for color and font size for example. This tag can contain other properties that will change the page appearance. If a site has several pages, as in most cases, this could become a tedious editing process when modifications need to be applied later.
As you may know, a web site is never really finished. It will be modified over time and properties then need to be changed on each page. A style sheet prevents having to repeatedly make certain changes to every page by collecting all the necessary properties into one file.
A Quick Example
Style sheets are referred to by the classification CSS. This is an abbreviation for Cascading Style Sheets and is the extension used when saving style sheet files. The syntax for a style sheet command is:
selector {property: value }
selector {property1: value1; property2: value2 }
The selector refers to the tag and the property refers to the tag modification:
P { text-align: left; color: white; font-family: Arial }
You can apply the properties to a range of tags if required. For example in the above style sheet code:
P, H2, H3,
{
text-align: left;
color: white;
font-family: Arial
}
A practical example
This will apply the properties inside the braces to any text typed into HTML <P> tags. In this case, the text will be left-aligned on the page, text color is white, and the font type is Arial. Take a look at this HTML snippet that uses the above styles:
<BODY>
<P>paragraph family and colour properties are now Arial and white</P>
<BR>
</BODY>
Next I shall show how to apply the different types of styles.
Next: Inline and External Styles >>
More Style Sheets Articles
More By Stephen Davies
/ 3 
