Cascading Style Sheets- Part 3- Style Sheet Types and Use
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each
page that requires the style sheet must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
REL=STYLESHEET tells the browser that this will be a style sheet.
TYPE="text/css The "text/css" statement anticipates future additions to the <STYLE> element. Currently CSS is the only type attribute, but that will undoubtedly change as the web
evolves.
It is best to leave it in there though, as some browsers may ignore the style sheet entirely if it's absent. HREF is the URL of the style sheet.
In this example, the styles sheet is located within the same folder as the page. If it were elsewhere, the full pathname should be included. A style sheet can be named whatever
you wish, as long as it has the .css extension.
The browser will read the style definitions from the file style.css, and format the document according to it.
An external style sheet can be written in any text editor and should not contain any html tags. The style sheet should be saved with a .css extension. An example of a style sheet
file is shown below:
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/background1.gif")}
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: red}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be
displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element see below.
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single
occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the colour and the left margin
of a paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
You should also note that quotes are uses instead of curly brackets in the style definition.
 |
