Type of Style Sheets « Magic Bricks

Type of Style Sheets

December 29, 2006 at 6:50 am | In CSS, Tech | 3 Comments

Style sheet can be included in HTML document in 3 ways,namely

1.External Style Sheets.
2.Internal Style Sheets.
3.Inline Styles.

External Style sheets

In External Style Sheets , the styles are stored in a separate file and then that file is included in the HTML Page. You might be wondering what are styles(will be seen later), but for now just assume that each tag comes with styles. The external file(in which styles are stored) should be saved with the extension .css. Then that CSS file should be included in the HTML page using the <LINK> tag.

Example :

Explanation for the example :

rel = “stylesheet” tells that the relation of the link is stylesheet.rel can also be assigned to copyright,content,chapters etc.

type tells the type of link . text/css says stylesheet. type can also be assigned to text/javascript,text/vbscript etc.

href tells the path of the css file.If its in the same folder as that of HTML page then it is enough t0 give the name of the CSS file along

with the extension.If its in different folder other than the folder in which the HTML page is , then the relative path should be given . For example href =”../[stylesheet folder name]/[filename].css”

Note :

1.The LINK tag should be used in the <HEAD> tag.

Internal Style Sheets

In Internal Stylesheets , the styles for the tags are specified in the head section itself using the style tag. styles are not stored in a separate file.

Example :

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

Explanation for the example :

type tells the type of link . text/css says stylesheet. type can also be assigned to text/javascript,text/vbscript etc.

hr {color: sienna} tells that any hr tag used should have the color sienna. Similarly we can set the syles for the other tags.

Note :

1.The STYLE tag should be used in the <HEAD> tag.

Inline Styles

In case of Inline Style Sheets the styles for the specific tags are given in the tag itself using the style attribute.

Example :

<p style=”color: sienna; margin-left: 20px”>
This is a paragraph
</p>

Explanation for the example :

style=”color: sienna; margin-left: 20px” specifies that this <p> tag should use color as sienna and left margin should be 20 px.

Priority of the Styles :

1.Inline styles.
2.Internal Style Sheets.
3.External Style Sheets.
4.Browser Default Styles.

In order to avoid conflict of styles used the above priority is followed.

Note:
1. We see that the fourth priority if for the Browser defaults. Thats why we see that different browsers render differently(Each Browser uses its own default style)

Standards :

Its better to use External Style Sheets that Internal and Inline because to use common styles across multiple pages the same Style Sheet can be used . But thats not always the case . When you want to apply a particular style specific for a portion of the page Inline or Internal will be preferred.

3 Comments »

RSS feed for comments on this post. TrackBack URI

you can give about various CSS standards..y cant you write one post on dat

Comment by Bala — January 8, 2007 #
Nice blog!

Comment by laluttefinale — April 16, 2007 #
તમારી વેબસાઈટ ગડી સારી હતી
હૂ તમારીવેબસાઈટ જોઈ
મનેમજા આવી.

મારૂ નામ:હરીલાલ

Comment by હરીલાલ — May 25, 2009 #