The following is a basic tutorial on CSS (cascading style sheets) properties. It is here I assume you already have knowledge of HTML. If not, check out BOOGIEJACK. He's got a great site! CSS not only helps you create your web page(s) faster, it also gives you a lot more possibilities than just straight HTML. Why? Because I said so! Ha-ha, seriously folks, by using CSS, you pretty much are inputting all the properties of your web page one time and one time only (of course, to every rule there is always an exception!). AND, by being able to position images and text EXACTLY where you want them, you can take your site to the limits of your imagination!
Before I go into the actual coding, I will explain what each part means. You start with <style type="text/css"> </style> in between the <head> tags of your HTML document. What goes in between the style tags looks like this:
NOW the fun begins! Oh, and by the way, if you used HTML to change the font to red, you would be inputting a lot of stuff! With CSS, it's much easier.. you'll see!
(NOTE: From here, what you see in RED is what you can change to your liking)
Firstly, we will cover BODY BACKGROUND properties, which include color, images, and image positioning. I'll show you how to input it, then I'll break it down.
BODY
{
background-color: white;
background-image: url(image url);
background-repeat: repeat-y;
background-position: left
background-attachment: fixed
}
|
Next, let's cover how you will want the FONT STYLES to look throughout the page.
BODY, P, TD, I
{
color: black;
font-weight: bold;
font-family:arial, helvetica, times;
font-style: normal
font-size: 12pt
text-align: left
text-indent: .5 cm
cursor: crosshair OR cursor: url (cursor url)
}
|
You with me so far? Good! Hmm.. about about if we cover LINKS?!? Okay!
A:link
{
color: blue; font: 12pt times; text-decoration: bold; cursor: crosshair
}
A:visited
{
color: red; font: 12pt times;text-decoration: none; cursor: crosshair
}
A:hover
{
color: goldenrod; font: 10pt times;text-decoration: bold;cursor: crosshair; background-color: whitesmoke
}
|
Oh! Oh! I know what we can do next! I've always found COLORED SCROLLBARS to be so awesome, haven't you? I thought so. Alrighty then, let's get to it!
BODY
{
scrollbar-face-color: red;
scrollbar-highlight-color: pink
scrollbar-3dlight-color: white
scrollbar-darkshadow-color: blue;
scrollbar-shadow-color: black;
scrollbar-arrow-color: pink;
scrollbar-track-color: linen
}
|
*** If you have or going to put in TEXTAREAS, you can also have those scrollbars colored as well... just use .FSB instead of BODY, and the rest (scrollbar-face-color etc.) is the same format.
Speaking of TEXTAREAS, you can manipulate the border color/style and background color/image to your liking as well! Check it out:
INPUT,TEXTAREA,SELECT
{
border: 1px solid;
color:black;
background-image: url(img url);
background-color:yellow
}
|
And there you have the very basics. And even these basics haven't covered all the basics hehehe. I will continue adding to the site. If there's something I missed, or if there's something you'd like me to add, please EMAIL ME. Hopefully soon, I will start on some advanced tutorials, such as absolute vs. relative positioning, opacity options, table options... In the mean time, if you're up to it, visit CODEPUNK to get a good tutorial on advanced CSS!
