style sheet, style sheets, html course, website building, perl scripting, mysql databases, web site builder, build a website

  

 



Testimonial

Hey Dave:

You are brilliant! I was skeptical when I reviewed Instant Site Maker. I mean, I am a professional Webmaster after all. The first thing I noticed was the simplicity of your tool. Just plug in the info and walla, a gorgeous web page. I'll be using this on my next mini-site project. Thanks for bringing Instant Site Maker to market. You've made my life easier and probably for thousands of others!

Jim Mandich, Storm Golf

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.

 




Main Menu

web site tools
build a website blog
html help
html redirect
html marquee
html form
instant site maker
simple style sheet
is your site on life support
internet marketing
meta tags
perl cgi
javascript
javascript display date
email filters
simple email form
protect your code
disable right mouse
help visitors bookmark your site
free hosting vs paid
accept credit card payments
card payments using clickbank
newsletter
sep 29 newsletter
oct 10 newsletter
oct 24 newsletter
what is bandwidth
how much web space
contact us
resources
link to us
Links Directory

 

 

© All rights Reserved. No part of this site may be reproduced or copied without permission of the owners.
Site Directory