CSS - Hyperlinks and Backgrounds

[h1]CSS Hyperlinks and Backgrounds[/h1]
This tutorial is for CSS or Cascading Style Sheets. Cascading style sheets can make things a lot easier and take a lot less time if you know what you're

doing. In each of these tutorials,1-2 topics will be discussed.

This tutorial assumes you've already read the previous tutorial(s).

1. Hyperlinks

Using CSS to customize hyperlinks is an extremely versatile technique for refining the look of your site. In fact, the look of your links reflect your professionalism. If I were to visit your site and all that was there was the default look (dark-blue, and underlined), I'd think you were fairly new to dealing with HTML and/or CSS. Let's get started!

When you use CSS for your hyperlinks, you have to factor in all the different states of a link. What color or decoration do you want on your font when the viewer puts their cursor over a link? How about when you want to show that the user has already been to a page on your site? Again, these must be factored into programming the looks of your hyperlinks.

The different states of a hyperlink are generally described as:

Link (an idle hyperlink with no user interaction)
Hover (when the user has his/her cursor "on" the hyperlink)
Active (when the user is clicking on the hyperlink)
Visited (the user has already been to the page the hyperlink refers to or has already clicked the hyperlink)

When you want to implement them into CSS, you do the following:

Code:

a:link{
//statements
}
a:hover{
//statements
}
a:active{
//statements
}
a:visited{
//statements
}

However, that would only work if you wanted every hyperlink on your site to look like that. You would still have to define classes for your links if you wanted them to be different. You would do this as your normally would, only after the ".classname", you'd slap on the state of the hyperlink. Like so:

Code:

a.classname:link{
//statements
}
a.classname:hover{
//statements
}
a.classname:active{
//statements
}
a.classname:visited{
//statements
}

And when you want to use a certain class you've defined in your style sheet, you do the same thing with any other html tag:

Code:

This isn't really described within a style sheet, but in the HTML. If you have a "global" CSS hyperlink definition, and you have an image you want to link, but don't want for there to be a border around the image that changes color, type in 'border="0"' in the IMG tag:

Code:

For complete font customization details, visit my Font Customization and Text Decoration tutorial, which can be found here.

2. Backgrounds

Since backgrounds take up most of what the viewers see on your site (unless your site is stocked full with content, but even then the user would still see backgrounds), this too is an important component in reflecting your professionalism as a web designer or webmaster.

Let's start with the basics: Background colors.

2.1 Background Colors[/u]

With CSS, background colors can be applied to pretty much anything. Text, the whole page, select pieces of text, images (which would be pretty useless, unless you're speaking of a .gif image with transparency), anything.

The element name is "background-color":

For a whole page:

Code:

body{
background-color: #RRGGBB
}

For a selection of text (or an image):

Code:

span.classname{
background-color: #RRGGBB
}

2.2 Background Images[/u]

If you want an image as your background, you use the element tag "background-image", then specify the URL of the image you're using with "url('urlofimage.ext')".***

Code:

body{
background-image: url('urlofimage.ext')
}

The Repeat Arguments:

repeat
repeat-x
repeat-y
no-repeat

These must be specified after the "background-repeat" element, only if you don't want the background to repeat or want it to repeat vertically or horizontally.

Code:

body{
background-image: url('urlofimage.ext');
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y:
background-repeat: no-repeat
}

Seperate from background image repition, you can specify whether you want the background image(s) to scroll with the content. You do this with putting the element "background-attachment" element on the body tag in the style sheet, followed by the "scroll" or "fixed" arguement.

Code:

body{
background-image: url('urlofimage.ext');
background-attachment: scroll;
//the background image scrolls with the text
background-attachment: fixed
}

The default is "scroll".

2.3 Background Image Positioning[/u]

The element for background image positioning is "background position". The arguments for background position are as follows:

top left
center left
bottom left
top center
center center
bottom center
top right
center right
bottom right
center left
#Xpx #Ypx
x% y%

The most useful would probably be from topleft to bottom right (on the list), unless you want to get very specific. Otherwise, just use the pixel specification arguments and the x and y percentages only when you have a very specific spot where you want the image.

***A word on background images...

Background images can either look fantabulously great or extremely hideous, so be careful about what you choose. If you ARE going to use a background image, make sure that when it repeats, it fits together nicely. So, you don't really need that large of an image.

If you like this tutorial, please Click Here to register.

Graphic Addicts Forums