Tutorials: CSS

CSS stands for Cascading Style Sheet. You can add your CCS code directly to your page in your head tags, or you can attach a CSS file.

We're going to start out with the direct CSS and move on to CSS files.

<html>
<head>

Put you CCS code here!

</head>
<body>
</body>
</html>

Start out your CSS like this:

<style>

<!--

And Close it like this:

-->

</style>

Here's an example of CSS that will control your font type, colors, and size; Scrollbar color; and link effects:

BODY,P,TD {font-family:verdana,arial; font-size:11px; color:#000000; }

A:link { text-decoration: none; color:"#000000"; }

A:visited { text-decoration: none; color:"#000000"; }

A:hover { text-decoration:none; color:"#000000"; cursor:help; }

body {
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000; }

Now I'll explain them all:

BODY,P,TD: This sets your font type, color and size. I have set it to verdana, arial font, 11px size, and the color as black (#000000).

A:link This is your color for unvisited links and it's effect. This link will not be underlined if you have the text-decoration: none code in there.

A:visited is the same as above, except these links have been visited before.

A:hover is when you put your mouse over the link. In this case, the css will make your mouse cursor into a question mark. There are more effect you can do, I'll explain those later.

The next bunch of code is your scrollbar. This code will affect how your scrollbar appears. (only if your browser supports this feature). Click here for an example of what the code I have given will make your scrollbar look.

Here are a bunch of different codes you can use for link effects:

cursor:n-resize - North facing
cursor:e-resize - East facing
cursor:s-resize - South facing
cursor:w-resize - West facing
cursor:nw-resize - Northwest facing
cursor:ne-resize - Northeast facing
cursor:sw-resize - Southwest facing
cursor:se-resize - Southeast facing
cursor:wait - Hour glass
cursor:crosshair - Cross
cursor:move - Four arrows
cursor:help - Question mark
cursor:text - Text arrow

Here's how your CSS should look when you're finished:

<style>

<!--

BODY,P,TD {font-family:verdana,arial; font-size:11px; color:#000000; }

A:link { text-decoration: none; color:"#000000"; }
A:visited { text-decoration: none; color:"#000000"; }
A:hover { text-decoration:none; color:"#000000"; cursor:help; }

body {
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #000000;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000; }

-->

</style>

To make an external stylesheet, add the above code to a blank text file and save the file with the .css extension. Now, inbetween your head tags add the following code:

<link href="stylesheetname.css" rel="stylesheet" type="text/css">

Just change the name of your style sheet and it should work.


That's it. There are many more CSS effects, visit my links page for sites with more tutorials.

 • Main/Updates
 • Domain
 • Current Layout
 • Past Layouts
 • Contact
 • Links
 • Credits
 • Terms of Usage
 • Layout Guide
 • Layouts
 • Avatars
 • Abstract Art
 • Tutorials
 • PNG's
Kamui [Tsubasa Reservoir Chronicle] Subaru [X] Yuuko [XXXHOLiC]
2003 - 2012 Amber-Nights.net