Alakazam
08-06-2007, 08:27 PM
CSS or Cascading Style Sheets is used to customize the appearance of the layout on your site. You can use to it to change the color of your links when you put your mouse over them. You can also use it to change the color of the scroll bar on your browser window. If you're opening a site, you should use CSS since without it, all your links will will be the default colors and therefore will look boring.
All CSS codes need to be placed between the <head> </head> tags. To begin a CSS code, you must use the following tags:
<style> </style>
All of your style coding will be placed between those two tags, unless you are using an external stylesheet, which will be explained later on.
To customize the color of the links on your page, look at the following example that that I use for my site:
a:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }font { font-size: 7pt }
a:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }
a:hover { color: #0066FF }
a:link a:visited and a:hover - These tell the browser which codes are for what. The a:link is for the regular link color seen before anything is clicked, a:visited is for a link that has been visited before by a user and a:hover is when a user moves the mouse cursor over the the link.
{ text-decoration: none; - This tells the browser what sort of decoration the link has. You can use the following: underline, overline, underline overline, or none.
{ color: #0066FF } - This tells the browser what color the link will be.
font-family: Verdana, Arial, Helvetica, sans-serif } - This tells the browser what type of font to display for the link.
If you want to have two links on the same page that are different colors, then you'll have to make a new link tag. Check out the following example:
a.one:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }font { font-size: 7pt }
a.one:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }
a.one:hover { color: #0066FF }
Now that you have two seperate link settings on one page, the first one will be your default for any link that does not have a Class. To use the second setting, look at the following example:
<a class="one" href="test.html">test</a>
For every link that you want to use without the default link setting, use the example above. You can change the name of Class to whatever you want as long as it matches the name of the link style.
CSS is similar to SSI in the sense that you can use an external stylesheet if you are using the same style settings over and over again. It's also helpful when you want to change layouts, since all you'll have to do is edit the external stylesheet and all the style in your site will be changed.
To use an external stylesheet, all you have to do is enter the style settings and then name the file something like style.css. Then between the <head> </head> tags, use the following tag:
<link rel="stylesheet" type="text/css" href="style.css">
Besides coloring links, you can customize the color of the scroll bar of your browser. To do that, add the following between the <style></style> tags:
<!--
BODY {SCROLLBAR-FACE-COLOR: #0033cc; SCROLLBAR-HIGHLIGHT-COLOR: #0099FF; SCROLLBAR-SHADOW-COLOR: #0033cc; SCROLLBAR-3DLIGHT-COLOR: #0033cc; SCROLLBAR-ARROW-COLOR: #0099FF; SCROLLBAR-TRACK-COLOR: #0099FF; SCROLLBAR-DARKSHADOW-COLOR: #0099FF }
-->
You can customize the colors as much as you like to make it match the colors of your layout.
You don't have to use CSS, but it will make your site look a lot nicer and more professional. You can do a lot more with CSS, but hopefully this tutorial has helped you understand the basics, and you can use CSS on your own site with no trouble.
All CSS codes need to be placed between the <head> </head> tags. To begin a CSS code, you must use the following tags:
<style> </style>
All of your style coding will be placed between those two tags, unless you are using an external stylesheet, which will be explained later on.
To customize the color of the links on your page, look at the following example that that I use for my site:
a:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }font { font-size: 7pt }
a:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }
a:hover { color: #0066FF }
a:link a:visited and a:hover - These tell the browser which codes are for what. The a:link is for the regular link color seen before anything is clicked, a:visited is for a link that has been visited before by a user and a:hover is when a user moves the mouse cursor over the the link.
{ text-decoration: none; - This tells the browser what sort of decoration the link has. You can use the following: underline, overline, underline overline, or none.
{ color: #0066FF } - This tells the browser what color the link will be.
font-family: Verdana, Arial, Helvetica, sans-serif } - This tells the browser what type of font to display for the link.
If you want to have two links on the same page that are different colors, then you'll have to make a new link tag. Check out the following example:
a.one:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }font { font-size: 7pt }
a.one:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif }
a.one:hover { color: #0066FF }
Now that you have two seperate link settings on one page, the first one will be your default for any link that does not have a Class. To use the second setting, look at the following example:
<a class="one" href="test.html">test</a>
For every link that you want to use without the default link setting, use the example above. You can change the name of Class to whatever you want as long as it matches the name of the link style.
CSS is similar to SSI in the sense that you can use an external stylesheet if you are using the same style settings over and over again. It's also helpful when you want to change layouts, since all you'll have to do is edit the external stylesheet and all the style in your site will be changed.
To use an external stylesheet, all you have to do is enter the style settings and then name the file something like style.css. Then between the <head> </head> tags, use the following tag:
<link rel="stylesheet" type="text/css" href="style.css">
Besides coloring links, you can customize the color of the scroll bar of your browser. To do that, add the following between the <style></style> tags:
<!--
BODY {SCROLLBAR-FACE-COLOR: #0033cc; SCROLLBAR-HIGHLIGHT-COLOR: #0099FF; SCROLLBAR-SHADOW-COLOR: #0033cc; SCROLLBAR-3DLIGHT-COLOR: #0033cc; SCROLLBAR-ARROW-COLOR: #0099FF; SCROLLBAR-TRACK-COLOR: #0099FF; SCROLLBAR-DARKSHADOW-COLOR: #0099FF }
-->
You can customize the colors as much as you like to make it match the colors of your layout.
You don't have to use CSS, but it will make your site look a lot nicer and more professional. You can do a lot more with CSS, but hopefully this tutorial has helped you understand the basics, and you can use CSS on your own site with no trouble.