Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

Welcome to part 1 of the CSS guide! This guide will introduce you to using CSS with your websites and will show you how to alter the way your website links appear within your pages. The other guides will continue from there with more information to change the appearance of your site further.

CSS stands for Cascading Style Sheets. It has become very widely used online and it not only makes it easier to change certain areas of your site without having to edit a variety of tags within your code, but it also allows you to create certain effects that cannot be done otherwise, like adding drop shadows or outlines around your text.

There are three different ways you can add CSS to your website. In this part of the guide I will only talk about one way, however in the other parts to the CSS guide the other two ways will be talked about. If you choose the first way (mentioned below) or the 2nd way (external CSS file), you need to make sure the code is on each of your site's pages!

The Style tag is a common way to add CSS to your site. It normally is placed between the Head tags but it can be placed within the Body tags as well. Having your CSS near the top of your code will prove easier to edit later on though rather than trying to track it down through all your lines of code.

The above two lines of code are the opening and closing Style tags. All of your CSS code will go in between these. You must remember to close your Style tag or it can cause problems throughout the rest of your page!

Getting started with Links

As I mentioned previously, this guide will only contain the information to change the appearance of links within your website. Normally you will have the default blue text (or purple, if the link was visited already) on your site unless you change them in your Body tag. Your a limited to setting just what color the links are by doing it this way. If you were to change their appearance through CSS though, you not only can change the color, but you can add a background, remove the underline (or add an overline or strikethrough) and set the links to alter their appearance when the mouse hovers over them.

Changing the Color of your Links

Let us first start with the basic types of links. You have the default link, the visited link, and the active link. Let us say that you want your default link color to be blue, your visited link to be blue, and your active link to be purple.

Before I move on, I want to explain the above code a little. The "A:" part of the code is telling the browser that anything following that colon will be code for an anchor/"A" tag. The text after tells the browser which type of link to work with, for example, the visited link. When writing out CSS code in this manner, your code needs to always be placed inside of the curly brackets.

When you specify a color for you text using CSS, you will always use the "color: " code. You can set a color name, hex code (#000000 for example), or an RGB/Red Green Blue code ( rgb(0,0,0) for example). I will be showing an example of code later on using an RGB and hex code for anybody who wishes to use them rather than the name of a color.

The Hover code

I am sure while browsing online you have all seen links that change color when you hover your mouse over them (I am not talking about the effect that flashes through multiple colors when you hover the mouse over a link, that is done through Javascript). The best way to show you is through an example:

The hover code is setup the same as you would do the other types of links. You can use all of the same codes for it that will soon be explained as well. There is no real purpose to add in a hover code, but it can make a nice touch to your page.

Effects for your Links

There are many different things you can do to change the appearance of your links and help them stand out more. The rest of this guide will only show you two more effects you can use for your links, however you can use others as well which I will briefly mention at the end of this section.

First, let us start with adding a background to your links. I will be adding a solid background color that will appear when you hover over a link. This must always be done carefully on your website whether you use a solid color or a background image. You want to make sure your text can be easily read against whatever background you have selected. (This goes not just for the CSS code in the links, but for your entire website!) Have you ever tried to read a bright colored text on a bright colored background, or a dark text on a dark background? It's not very easy! You don't want to be using bright colors, such as yellow either. Make sure whatever you choose to use, it can be clearly read without trying to strain your eyes.

In the above example I changed the Hover text color to white. The RGB code for the background is set to the color Black. It is pretty simple, isn't it? If you were to use a background image instead, you could have written "background: url("Image Link")" instead of just "background". When using a background image, you want to make sure the image is large enough to cover the full background area where the text is going to be but small enough so it will not have a large file size since it will only load when you hover over the link.

Also, did you notice the semi-colon in the code? The semi-colon is used in CSS to separate the different pieces of code. If a semi-colon is not used or it is placed in the wrong area, that string of code will not be read by the browser properly.

As before, the hover text is white and the background is black but we now have another code listed as well. The "text-decoration" allows you to either remove all text decorations (so the default underline will not be shown in your links), or you can set it to either underline, overline, or cross out your text. You could also combine all three like I did in the above example.

The "underline" value you should be able to figure out for yourself. "Overline" places a line over the top of your text, and "line-through" creates a line through your link to make it look as if it were crossed out.

Extras

Let us say that you want your Visited links to look exactly like your default links that have not yet been looked at. As you noticed in the code examples within this guide you can write them all out on a separate line of code, or you can take a shortcut and save yourself the trouble of writing down the exact same string of text again:

When using CSS, if you want to set the same properties for different areas of your site (in this case, the default and visited links), you can shorten up your code and save time and space by grouping different areas together like in the above example. You can group more than two together if you like, but each must be separated by a comma.

I mentioned earlier that there were other effects you could add to your links. Aside for the ones listed already in this guide, you can also change your font settings (type, size, bold/italics), you can add a border around the link also. You could also add some filters to make your links have a drop shadow, an outline, or you can get them to blur when you hover over them as well as changing your mouse cursor when it moves over the top of a link. You can learn how to do all of this and more within the next CSS guides.