simple style sheet
Style sheets are an excellent method of controlling how your web page will appear. One of the main advantages of using a style sheet is it makes updating the look of your page very simple.
One change to the style sheet is instantly reflected across all the pages that use it. For this reason you should put your style sheet code into a file, although you can embed the commands directly into an html page.
Below is an example of a very simple style sheet that will control the way hyperlinks (anchors) are displayed on page.
If you put the code in a file called style.css and uploaded it to your web site root directory, it would be referenced in the html page as follows:
Between the <head> and </head> tags add the line:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="style.css">
Simple Style Sheet.
<style type="text/css"> <!-- span {font-size:12px} background {color:red} --> a{font:90%;} a:link{color:#0000CC;text-decoration:none;} a:visited{color:#0000CC;text-decoration:none;} a:hover{color:#0000CC;text-decoration:underline;} a:active{color:#0000CC;text-decoration:underline;} body{color:#000000;font:14px Arial, Helvetia, sans-serif; background-color: #FFFFFF;} </style>
Notes:
The line <!-- span {font-size:12px} background {color:red} --> is a comment line and is used as a method of preventing scumware from hijacking your advertising links - it has no effect on the style of your page.
a{font:90%;} sets the font size to 90% of the standard text size.
The following lines control how the anchors (hyperlinks) will be displayed:
a:link{color:#0000CC;text-decoration:none;} a:visited{color:#0000CC;text-decoration:none;} a:hover{color:#0000CC;text-decoration:underline;} - this will underline a link when your mouse hovers over it. a:active{color:#0000CC;text-decoration:underline;} - this underlines the link of the page you're currently on.
body{color:#000000;font:14px Arial, Helvetia, sans-serif; background-color: #FFFFFF;} - sets the default style you'd like for the body of your page.
If you want to learn more about style sheets there are plenty of good books to choose from. This one is my favorite. Cascading Style Sheets: The Definitive Guide
The book retails for just $24.47, clicking on the link will open a new browser window.
|