Your browser reads the style sheet and then will make all the modifications needed while formatting the web page due to what is defined. Inserting the style sheet can be done in 3 ways.
Using an External Style Sheet
If the style needs to be put in many pages an external style sheet can be very useful. By using it you will change the look of your whole site and just one file needs to be modified. Now the problem is that you need to link to your style sheet on every single page by the use of a tag. This tag will be put in the web page’s head section:
<head>
<link rel=”stylesheet” type=”text/css”
href=”style.css” />
</head>
Any major browser will simply read the information that it founds in “style.css” and then format the web page according to the info found there. The good news is that you can use any editor to write an external style sheet. Remember that no html tags should be put in and the style file will have to be saved with a .css file extension. Let us have an example of a style sheet:
hr {color: blue}
p {margin-left: 15px}
body {background-image: url(”background.jpg”)}
We used the margin-left part in order to point out the fact that you must not leave any space between the units and the value of the property. In the example above, if you will use “margin-left: 15 px” instead of what we wrote “margin-left: 15px” you will find that it simply dos not work in Netscape or Firefox. It will only be visibl in Internet Explorer 6 and above. This is one of the most common problems that appear in some style sheet writings.
Using an Internal Style Sheet
In most cases the internal style sheet is utilized in the event that one web page comes with one unique style. You can thus use internal styles and define them in the head section of your site. The tag utilized is “<style>“
<head>
<style type=”text/css”>
hr {color: blue}
p {margin-left: 15px}
body {background-image: url(”background.jpg”)}
</style>
</head>
Now the problem is that an old browser can not read the definitions of style you put in. On the other hand, it does read the rest of the known tags and what is put into the <style> tag will be displayed on page. Although there are not many Internet surfers out there that still use old browsers, we do want them to see the page right. You can stop an older browser to display the <style> tag’s content by simply hiding it:
<head>
<style type=”text/css”>
<!–
hr {color: blue}
p {margin-left: 15px}
body {background-image: url(”background.jpg”)}
–>
</style>
</head>
Using Inline Styles
Using an inline style is not recommended unless you will use it when one style will appear once. The style attribute is used in a tag. Any css property can be included in the Style attribute. Here is how we can use inline style to change the left margin of the paragraph and its color:
<p style=”color: blue; margin-left: 15px”>
The content to be displayed
</p>
Choose Wisely
Make sure that you choose your implementation of the style sheets wisely.
CSS Tutorial Navigation:
Next CSS Lesson: To be added soon
Previous CSS Lesson: CSS Syntax
0 Comments on “CSS - How To Insert a Style Sheet”
Leave a Comment
You must be logged in to post a comment.