Inline and Embedded Style Sheets are associated with a single Web page and any of these styles that are required elsewhere in the Web site will have to be copied into new Web pages. The versatility and flexibility of style sheets are in using Linked Style Sheets where all the style settings are typed into an external files and linked into the various Web pages. The external file is a simple text file with a file extension “.css”, for example mystylesheet.css, and only contains the selectors and their associated properties and values – you do not include the <style> tags. For example, mystylesheet.css could contain the following style settings:
h2 {font-family:Arial; font-style:italic; color:blue}
p {font-family:Arial; color:black}
p em {background:red; color:white; font-style:italic}
p.blue {font-family:Arial; color:blue}
p.red {font-family:Arial; color:red}
To use this Style Sheet a “link” statement must appears in the head of every Web page that will be using these styles. The link tag is as follows:
<link rel="stylesheet" href="mystylesheet.css"
to reference style in mystylesheets.css.
type="text/css">
For well designed Web sites the Linked Style Sheet is the most appropriate.
Adding Comments to your Style Sheet:
Style sheets can become very lengthy so it is important to annotate the style sheet to show the various sections or modification history. Commenting out sections of a style sheet can be very useful when you are experimenting with various effects.
To add a comment to a style sheet we use the following tags:
- /*
- Should appear at the beginning of any comment
- */
- Should appear after the comment.
For example:
- ...
/* The following will affect hypertext links */
a {text-decoration:none;}
a:link {color:red; font-weight: bold;}
a:visited {color:blue; font-weight: bold;}
a:active {color:white; font-weight: bold;}
a:hover {color:black; font-weight: bold;}