Independent Articles and Advice
Login | Register
Finance | Life | Recreation | Technology | Travel | Shopping | Odds & Ends
Top Writers | Write For Us


PRINT |  FULL TEXT PAGES:  1 2 3 4 5
Improve Your Web Design With Cascading Style Sheets 
 
by Allen Butler August 05, 2005

Three Styles of Sheets

There are three styles in which you can write your style sheets. One style we have already discussed: embedded style. This style involves placing the css code into the <HEAD> section of a document so that it will be used throughout the rest of the page.

The second style of css is the inline style. When you use the inline style, you place your style sheet into a separate tag in order to change the attributes of that particular tag. For example, say that you wanted to change the attributes of a single paragraph. Normally you would write the paragraph tag like this: <P>. If you wanted to insert a style rule here, this is what it would look like:

<P style=“font-size:48pt color:blue”>

It is just like before, but now rather than being embedded in the <HEAD>, it is inserted right at the specific paragraph where it is wanted.

A rule to remember about style sheets: the most recent style rule wins. For example, say that you had embedded a style sheet in the <HEAD>, but you also put an inline style sheet into a specific paragraph in your text. The style sheet which is written inside the <P> command would take precedence here, and the properties in that rule would win out. This is why they are called cascading, because if you require you can put a number of different rules at different places in your document.

The final style of css is the external style. It is possible to create a style sheet on its own and save it as a .css file. Then, if you wish to use that style sheet within a particular web page of your site, you simply load that external css file into your HTML document. When you load the css file, it should look something like this:

<link rel=“stylesheet” type=“text/css” href=“yourstylesheet.css”>

After loading the style sheet into your document it will work exactly the same as if you had typed it all in manually into your HTML document.

PREV PAGE 1 2 3 4 5 NEXT PAGE

 




Home  |  Write For Us  |  FAQ  |  Copyright Policy  |  Disclaimer  |  Link to Us  |  About  |  Contact

© 2005 GoogoBits.com. All Rights Reserved.