21 February 2008

Types of Cascading Style Sheets

Posted by: archana in Uncategorized

Style sheets can make a Web authors life easier. Before style sheets came into existence one has to use the following tag <HR Width=20 PX Size=5 ALIGN=”Center”> every time a user wanted to insert a Horizontal tag. Whereas, style sheets web author needs to use it only once and the same style can be applied wherever necessary. Style sheets allow you to change to appearance and layout of all the HTML pages in your website just by editing one single CSS document.

To make a global change in your website, simply update the style sheet, and the change gets reflected in all the pages of your website automatically. Basically there are three kinds of style sheets. They are External Style Sheet, Internal Style Sheet and Inline Style Sheet. When all of the above styles are referenced by an HTML page, inline style is been given the highest priority. It means an inline style will override the other styles.Moving forward to the types of style sheets external style sheets are used when a particular style needs to be applied to many pages. With the help of an external style sheet one can change the entire look of an website just by changing one file. An html document will normally reference an external style sheet with the help of the following tag which is included in <HEAD> section of an HTML page.

Illustration 1:

The browser will read the styles that are defined in the file “externalstylesheet.css” and format the HTML page that is referencing the externalstylesheet.css file accordingly.

P.S.: An External Style sheet should not contain any HTML tags within it and the stylesheet should be saved with the extension .css. Illustration 2 gives a sample example of the contents of an external stylesheet.

Illustration 2:

hr {color: sienna}p {margin-left: 20px}body {background-image: url(”images/external.gif”)}

An internal style sheet is a part of an HTML page. Internal Stylesheets are used for applying a particular style to a single page in a website. Internal styles are defined in the <HEAD> section of an HTML page. Illustration3 is a sample example of an internal style sheet.

Illustration 3:

<head>
<style type=”text/css”>
hr {color: grey}
p {margin-left: 20px}
body {background-image: url(”images/internal.gif”)}
</style>
</head>

If you notice the above illustration, you will see that the internal style starts with a <style> tag and ends with </style> tag and is enclosed within the head section of the HTML document, whereas an external stylesheet does not contain any HTML tags.

Inline Styles are used occasionally. This style is applied only when it needs to be applied to a single occurrence of a particular element.

To apply this inline style in your HTML document use the style attribute in the tag where the style needs to be applied. The following illustration explains how to change the color and the margin of a paragraph.

Illustration 4:

<p style=”color: grey; margin-left: 50 px”>
This is a sample paragraph
</p>

Please note that a single HTML document can reference to multiple style sheets. In case of applying multiple style sheets to a single HTML document, as discussed earlier, inline style will over ride an internal style and external style.

Tags: CSS, external, external style, inline, inline style, internal, internal style, multiple style, types of CSS

Uncategorized,

Subscribe,

(No Ratings Yet)

157 views

This entry was posted on 21 February 2008 at 5:18 AM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.