CSS Guide
CSS is an abbreviation for Cascading Style Sheets. They say how HTML (Hyper Text Markup Language) is displayed, such as the colors, fonts, etc. You may ask, "Can't I do this with HTML?" The answer is yes, but you really shouldn't. Tags like <font> have been deprecated (not used anymore), because of the new HTML 4.0.1 Standards, which says that you use CSS for all styling, and just use HTML to structure your pages and add content. It's acutally very convenient, too.
starting and ending a css file
Make sure you do the following when you code your CSS:
<style type="text/css">
CSS HERE
</style>
or it won't work. Make sure you either: A) Put your CSS somewhere in between your <head> and </head> tags; or, B) Save it as "stylesheet.css" and put this in between your head tags (this saves loading time and is recommended.)
<link rel="stylesheet" type="text/css" href="stylesheet.css">
structuring
Structuring CSS is not like HTML. The CSS syntax goes like this: selector {property: value;}. Confused? Here's an example of how this is used:
body,font {font-face: arial}
What the above code is saying is that your page's font is going to be Arial. In this case, the selector is body,font, the property is font-face, and your value is arial. If you want to add more properties and their values, put a semicolon after the last value, like this:
body,font {font-face: arial; font-size: 12; color: black;}
Make sure you use curly brackets, {}, to open and close your CSS, not < and >.
basics: page font, size, color, and line height
You've already seen these codes, as I've used them as examples above, so you know how they're structured, and how to write them. Your font is the typeface your page is using. Make sure this is a default font such as Arial, Verdana, Trebuchet MS, Georgia, Tahoma, or Times New Roman. If it is a special font you downloaded and your visitor doesn't have it, it won't show up on your page. The size is self-explanatory; make sure your font size is 10px-12px (make sure you put "px" after your number; it stands for "pixels"). If it's any smaller, it gets hard to read. Color is also self-explanatory; you can just put color names, such as "red," or you can use hexadecimal color codes (a code starting with "#," that is a string of six numbers and/or letters that stands for a color), like the one for black, #000000. Make sure your font color and background color contrast and is easy to read. The line height is how spaced out each of your lines on your page are. Around 8px-10px is fine (again, "px" stands for "pixels").active links, hovered-over links, and visited links
CSS also allows you to specify what your links look like; everything from making them different fonts than your normal ones, different colors, bolding them, underlining them, etc. Let's put some definitions here. "Active" links are links that haven't been clicked on, and aren't being hovered over at the moment. "Hovered-over" links are when your cursor is hovering over the link. "Visited" links are what happens to links when they've been clicked on earlier. Let's see the codes to specify these things: a:visited, a:hover,
a, a:link, a:active {color: red; border-bottom: 1px solid black;}
In the above section of code, I've specified that my active links are red, and have a solid, black, 1 pixel wide underline. Try to change around with this. You can add what you've learned earlier, the "font-face:" for example and change your link's font, for example. To specify the colors, etc. for your visited and hovered-over links, change "a, a:link, a:active" to either "a:visited" or "a:hover". Make sure to give them each their own syntax ({selector: property: value;}).
headers
You can also customize your page's headers (<h1>, etc.). Put the following in your CSS:
h1 {color: black; font-size: 15px; border-bottom: 1px dotted white;}
You already know what this does: it makes your headers black, size 15; and it gives them a 1 pixel wide dotted underline.
the end
Congratulations, you've reached the end, and hopefully coded a beautiful stylesheet in the process! If you'd like to read up more on CSS (which I'm sure you do), visit W3Schools.
Good luck on styling!