CSS for beginners

What Is A Style Sheet and How To Use Them

CSS stands for Cascading Style Sheets. Its used to style web pages with out having to edit every single post. There are two ways to set up a style sheet.

The first which isn’t used very often is the style sheet in the webpage.
<style type=“text/css”>
/*This is where your style would go*/

</style>
This would go in to the .html pages. Its only practical to use this method if you only have one webpage or you need a whole lot of different styles for each page.

/* and */ are CSS notes. They aren’t picked up by the browser so they don’t mess with your coding..

The second way to go about style sheets is to open up note pad put in your styles and save it as style.css. Then use a style link <link href="style.css" rel="stylesheet" type="text/css"> this will link the style sheet to your webpage and style everything you need.

Basic idea

The basic idea is to take a class or ID and use its name to style everything.

Body is one of the main parts of a style sheet. Because it controls the background and can control the over all text if you want.

Body {
Background-color:#000000;}

After a name such as body fallows a bracket and then the style. Such as the background-color above. Each style will always end in a bracket as well. The ; is used to break up the styles. #000000 is the colour black so this would effetely make the background the colour black.

Color: #FFFFFF;
This would make the text white. Color always stands for text.

Font-family: times;
Font-family is the style of font used. The above statement of font-family: times; would make all text times.

Font-size: 10px;
Font size is what it sounds like it’s the size of the font.

So if we put this all together

Body {
Background-color:#000000;
Color: #FFFFFF;
Font-family: times;
Font-size: 10px;
}

Save it in style.css and link it to a page. It will turn the background black and the text white.

Changing Rollovers With CSS

So now you want to change the style of a link. First thing you need to know is

a:link and a:active should be used together. You can just use a though its up to you., a always means link.

To combine to attributes like a:link and a:active you just use a comma. Like so
a:link, a:active {

}

a:visted means you’ve been to that page before. Some people like to set this as a different colour but I find it less professional looking.

a:hover is when you hover over the link, it can change size or color or whatever you like.

text-decoration is also something important it can remove, add, or change the underline. text-decoration is used a lot for hovers.

So say we want a black link with no underline, no change to the visited format, and a white underlined hover. This is how we would go about it.

a:link, a:active, a:visited {
text-decoration: none;
Color:#000000}

a:hover
{text-decoration: underline;
Color:#FFFFFF;
}

Tips

Always use px after sizes. This will keep it to pixels and will allow you more wiggle room.
Always use # before hex colors so the browser can read it properly.