Eazy HTML - So eazy it's Child's Play

Quick Menu

Intorducing CSS
CSS - Quick Tutorial
Linking A StyleSheet
CSS Reference
Back Grounds.
Lists
Cursors
Borders
Positioning
Scroll Bars
Layers
Float
Margins
Padding
Fonts
Text
Pseudo Elements

Back Grounds

Ok. so before CSS was introduced all our document lay out information was included inside our tags making our content harder to distinguish from our layout information.

So rather than having all our information in our document I'm going to show you a few ways of applying background information through CSS now.

Now lets change the actual body of your document like you would normally do by adding attributes to your body tag. But instead we will do it with an externally linked style sheet.

ok so first of all lets make sure you have the style sheet linked to your web document in the head section of your document like this..

<head>
<link rel="stylesheet" type="text/css" href="mysitestyles.css" />
</head>

That when as we begin to add styles we can see the changes to your web document as we apply them. Now lets start.

Site Stats

There are 6 users online

click to see where

149,437 total unique visitors

486,649 total pageviews

63 visitors in the last 24 hours

61 total visitors today

211 pageviews today

This page has been visited 1,657 times

get this script

Most users online at once:
63 on 01/18/2010

body{
    background-color: #000000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #FFFFFF;
}

The above combination gives us a black background rather than the standard white, we have also set the font types we want the page to be displayed in at 8pt in size and to be white in color. View here to see the results of the above combination.

Now lets say you wanted to put an image on the background of your web page rather than a colour like we just did.

body{
    background-image:(images/purpsky.jpg);
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;

So with this combination we get our images that fills the background of out web document. Black text at 8pt and the font family is set to choose from the 5 listed.
View it here to see what it looks like.

We can use this background styles on just about any HTML element we want to. We can add backgrounds to table tags, tr, td anything we would like to change the background on. To high light a paragraph we can even change the background on it so that it stands out.

We can control the way the image displays in our document as well with a series of style tags as well. Such as

BACKGROUND REPEAT

background-repeat: repeat;
This will tile the image until the entire page is filled, just like an ordinary background image in plain HTML.

background-repeat: repeat-x;
Repeats the image horizontally - but not vertically.

background-repeat: repeat-y;
Repeats the image vertically - but not horizontally.

background-repeat: no-repeat;
Does not tile the image at all.

BACKGROUND POSITIONING
Background positioning is done by entering a value for the left position and top position separated by a space.

background-position: 75px 75px;
In the example above the image is positioned 75 pixels from the upper left corner of the page.

FIXING BACKGROUNDS
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.

background-attachment: fixed;

Pretty simple hey! and it also makes for a better standard of HTML in your document with different browser that render documents differently. Styles are more browser friendly was of changing your document.

And what about if we want to change the way the defaults set an anchor tag on our page. Well there under Pseudo elements so click here to check out how to change them.