C S S   B A S I C S

This tutorial was originally created for Immortal-Illusions, used with permission.

CSS is another form of web-code, which you can use when you want to have a certain effect to take over your entire page - such as the same size of your font, color and hover of your links and anything of that sort - you can even position your backgrounds with it! But I'm getting ahead of myself, lets start with the very basics, and move forward and up as we go along =)

<style type="text/css">
this is the place where all of your CSS coding goes.

Every single code I'll put below will have to be added between the above tags in order to take effect.

Now, in order to change the size, color and face of your font on your page, you would have to use this code:

td,p,body{color:#000000;font:8pt verdana}

Simply replace the words in bold so they would apply to the way you want your page to be designed. Note though, that the size of your font in CSS isnt the same like in HTML, for example the sie of the font I'm writing on this page is 7.5 in css, however in HTML it would qualify as size '1'.

To change the color of your links (when visited, active or even hovered) you can use the following code:

a:link{text-decoration:none;color:darkblue; font:8pt verdana}
a:visited{text-decoration:none;color:purple; font:8pt verdana}
a:active{text-decoration:none;color:purple; font:8pt verdana}
a:hover{text-decoration:none;color:darkred font:8pt verdana}

You can replace the details of your color etc' the same way as you do with your text, and you can also add an effect to the link where it can be underlined, strike-through and such, to do this, simply add the following codes in your text-decoration section of the code (to replace 'none')


You can also have a solid colored background using css, with the following code: (Replace #FFFFFF with the color you wish.)

body {background:#FFFFFF}

Another little something you can do using CSS, but not HTML is having a picture for your background, and choosing where it will be positioned on the page! Here is the code for it:

body {background:#FFFFFFF url(http://FullUrlOfBackground) fixed}

Fixed will make your background stay still, when the rest of the page continues moving. You can add before or after 'fixed' the place where you wish your background to be. For example,

body {background:#FFFFFFF url(http://FullUrlOfBackground) fixed bottom left no-repeat}

Would put your background at the bottom left corner of your page. You can also change it to top, center, right and whatever combination that wont conteridct itself.
Note though, that in order for the positioning code to take effect you must keep the 'no-repeat' tag, or the background will... Keep repeating ;)

And lastly, this is a very useful code I find quite fun a lot of times - changing the color of your scroll-bar.

body { scrollbar-face-color: #37291B;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #37291B;
scrollbar-3dlight-color: #37291B;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #79634D;
scrollbar-darkshadow-color: #000000;}

It might take a while to get use to it, but eventually you will and you could create cool color combinations for your own scroll bar in no time =)

NOTE: that all of the codes above you can put under the same style tags and they would still work just fine so all you have to do is copy the opening and closing tags first and then whatever codes you want on your site add between them. If you're still having problems you can contact me and I'll do my best to help you out =)

Well, this is it for now. Hope this tutorial helped you out with understanding more about CSS, and if not... Well, sorry =P