The Advantages of Style Sheets - Inline and External Styles
(Page 2 of 4 )
Style sheets prevent repetitive actions that are repeated through each page of the web site. Consistency is the key when designing web pages. If edits need to be done to ensure every <P> tag is an Arial font for example, without style sheets, this soon becomes repetitive. It is also very time consuming, a very important point firmly in mind particularly if you are a freelance designer working to a contract deadline. There are three ways a style sheet can change this.
Internal Style
<HEAD>
<TITLE>Change the paragraph colour and size</TITLE>
<STYLE TYPE="text/css">
P { font-size: 3; color: blue; font-family: Arial; }
A { font-size: 3; color: red; font-family: Arial; }
</STYLE>
</HEAD>
This is okay but can be a little repetitive. It is best used to make alterations outside of the CSS file attached as shown below. Embrace the properties inside the <STYLE></STYLE> tags. Since we are applying text, we specify that the TYPE is "text/css". Here the P and A tags are being styled by font size, color and face.
Inline Styles
These can be typed into the line where the style is required and will override any style properties set by the internal or external style sheet.
<p style="color: green; font-family: Arial">
This text will be green and of the Arial family.
</p>
This is useful if small modifications are needed quickly.
External CSS file
This will link the properties to the web page via a linked .CSS file. This line is placed in between the <HEAD> tags just like the <STYLE> tags:
<LINK HREF="stylesheet.css" REL="STYLESHEET" TYPE="text/css">
HREF specifies that the link to the filename storing the properties is called stylesheet.css. REL specifies the relationship of the file to the HTML page as a stylesheet.
Here is an example of what the stylesheet.css could contain:
.sizefamilyP {
font-size: 3;
color: blue;
font-family: Arial;
}
.sizefamilyP is called a class name and is used in the main HTML code to apply the properties specified in the CSS file. In the main HTML body of the page, any line that includes the class name of .sizefamilyP will adopt the properties defined in the above CSS file.
e.g. <p class="sizefamilyP">This text will follow the properties above in the CSS file</p>
The class name applied here tells the P tag to adopt the properties specified in the CSS file. The class can be applied to any tag in the HTML code in the same way by simply changing the tag above.
Now I'll go into more depth on the subject by explaining the use of the class name and the ID tag in more detail.
Next: The CLASS and ID tags >>
More Style Sheets Articles
More By Stephen Davies
/ 5 
