Eye Pleaser Graphics

Tutorials: CSS

Before we start, let us explain what CSS is. CSS means cascading style sheets, which in short means it can change webpage style attributes much more easily than using normal HTML. We know that if you have been building your website and so far you are annoyed by the fact that all of your text links are that annoying blue color. This is what CSS is all about; improving how your website looks. Your style sheet will go in the head tag at the top of your page.

You can do A LOT with CSS, and we don't have the time to explain every little thing you can do, partly because we don't even understand all of it. But we going to put up what we use when using CSS, and it covers most of the basics that new webmasters will probably want to use. Here it is:

<style>

</style>
<STYLE></STYLE>

That may look really confusing, but it's not, and we will piece the entire thing through for you, and before you know it you'll be looking for bigger and better style sheets (because by far ours is not perfect).

Background
The first part of style sheet you'll want to tinker around with is the background section, right at the top. Notice there are 3 background attributes; color, image and repeat. You by no mean need to use all of them, and can delete any one of them that you don't want/need.

The first one is the color of your background. You'll need to use a hexadecimal color code to choose your colors in a style sheet, which you should know how to do if you read earlier tutorials.

If instead you are using a image for your background, you'll need to put the code in the next image section. Make sure your background image will still allow you to have readable text.

The next attribute (background-repeat) involves your background image. You have four choices for this section:
Repeat: Normal background attribute; tiles and scrolls with page.
No-repeat: Background in upper left hand corner of page, does not repeat.
Repeat-x: Background will repeat horizontally along top of page.
Repeat-y: Background will repeat vertically on left side of page.

Note: If you are not using a background image, delete the background image and repeat attributes from your style sheet.

Font and Links
Next you need to decide on your font, its size, and its color. This is pretty straightforward, and you should be able to help yourself out with that.

Next, you can fancy your links up a bit. Notice there are four link attributes: link, visited, active and hover. I'll explain what each means first.

Link: This is the basic link; how it looks before anyone clicks it or is hovering over it with their mouse.

Visted: Once someone has clicked on the link and then clicked something else. I personally prefer this to be the same as the normal link.

Active: How the link looks right after you click it and before you click something else.

Hover: What the link looks like when the mouse hovers over it.

Now that you know what they are, let's see what you can do with them. In each attribute you see two things: the color and the text decoration. After choosing what you want each color to look like, you can choose a text decoration. Here are some decorations to choose from:

Overline: One line above the text.
Underline: One line underneath the text.
Underline Overline: One line above the text and one underneath.
Line-through: One line going through the text.
Dotted: Dotted line underneath the text. This decoration is a little more difficult and doesn't work on all browers.

Once you have chosen a decoration, simply replace the "none" in the attribute to change it. If you don't want a decoration, keep the none there.

If you want to use the Dotted Decoration, you'll need to look closer at the attribute. Notice the hover attribute above. You see this: 1 dotted #FFFFFF. This makes the dotted line to be small and white. To use dotted decoration simply put that in front of the attribute you want it at and change the color accordingly.

Table Attributes
The next attribute (td) is for tables. You don't need it unless you want all of your tables to be the same, if you are using tables at all. This attribute should be pretty easy to understand.

Scrollbar
The final set of attributes is your scroll bar attributes. Unless you have a newer browser, this probably won't show up on your computer .

These attributes are pretty easy to understand. The only thing you can change is the color. But if you look closely at the colors we have chosen above, you can make your scroller look just like ours.

Notice how some of the attributes have 424242 next to them and others have 000000. The ones marked 424242 are the backgrounds of the scroller (the grey parts of our scroller). The ones with 000000 are the edges, and the black parts of our scroller. So if you want an outlined scroller, just rename the two different colors the colors you want.

Note
That's pretty much it for your average style sheet, and should be pretty much all you need if you are just starting out a webpage. You can get much more complicated if you want. But, note: Not all of your visitors will be able to view all of your attributes, because they may have older browsers.