Inserting a Style Sheet
There are a number of ways you can apply style sheets to a web page.
Inline styles:
To use inline styles you place a 'style' attribute in a HTML tag. The 'style' attribute can state any CSS information. Here is an example:
Quote:
<p style=”color: blue; font-sizer: 12pt”>
What a nice sentence this is</p>
|
You can see how inside the 'style' attribute the style sheet language format is similar to the examples above. You still need a '
;' to seprate the properties.
Internal Style Sheets:
Usually internal style sheets are placed in between the head tags in a HTML document. With the use of
<style> tags CSS can be applied. An example on an internal style sheet:
Quote:
<head>
<style type=”text/css”>
body {background-color: #900000;
text-family: arial;
text-size: 12pt}
</style>
</head>
|
Internal style sheets are usually used when the web master wants to give a certain look for a certain web page that differentiates from others in a web site.
External Style Sheets:
Probably the most popular way of applying style sheets, with external style sheets you create a separate document that contains all the CSS information. While in the HTML document
<link> tags need to be placed so the browser can read the information from the style sheet document. The
<link> tags need to placed in between the
<head> tags.
Example:
Quote:
<head>
<link rel= ”stylesheet” type=”text/css” href=”funkstyle.css” />
</head>
|
In the 'href' attribute you insert the name of your style sheet file and the browser will read the information in that file and format accordingly. Your style sheet file needs to be saved with the .css extension. The style sheet document doesn't need any
<style> tags because it has already been saved as a CSS extension. A simple example of what a style sheet file can look like:
Quote:
body {background-image: url(“image/discostu.jpg”);
font-family: arial;
font-size: 12pt}
p {color: blue;
font-family: aria}
h1 {font-size: 14pt}
|