[CSS] Backgrounds [TUT]

Subject: [CSS] Backgrounds [TUT] Thu Mar 19, 2009 7:42 pm

I will teach you how do add fantastic layouts and more advanced looks to your website. And plz do correct me if im wrong in anything i say.

Before you can do CSS you have to learn HTML.

lets get started: first of all CSS means Cascading Style Sheets.
Now lets look at what we can do with CSS for HTML. You use CSS to format structured content, where HTML is used to structure content.
You can format about anything on you webpage to look almost whatever you like.

Ok, lets alter our first page.

If you haven't done any HTML you shouldn't move on cause it would be too complicated and wierd

There are more ways you can put CSS into you HTML document i prefer to do it this way: You write a single code / sentence in your HTML document that imports and uses everything you write in a external CSS document. It may sound a bit confusing but it is not.
The only thing you need to remember is that all the documents need to be in the same directory.

This is how the code looks: <link rel="stylesheet" type="text/css" href="NEWFOLDER/STYLE.CSS" /> where NEWFOLDER is a new folder in the original folder where your HTML document exists and STYLE.CSS is the external CSS document we are about to write.
You will put this in in HTML document and it will look like this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="NEWFOLDER/STYLE.CSS" />
</head>
<body>
...

Now we can alter the HTML document from an external document.

This code basicly links all the HTML documents you put the code in to the STYLE.CSS document.
From the STYLE.CSS document we can change for example the background color on your site by writing

body {
background-color: #FF0000;
}

This makes the background red

you make the { } by pressing: ctrl-alt 7 and 0

And remember to save the to files with the right extensions: ".html/.htm" and ".css"
Now open your HTML page and see the background has changed to red.

We can also change the color of text

just write:

body {
background-color: #FF0000;
}

h1 {
color: #CC9900;
}

This changes the color of your first header. If you wanna make another colored background on your text you can write:

body {
background-color: #FF0000;
}

h1 {
color: #CC9900;
background: #00000;
}

This is just the header you can also do it with for example P by doing the exact same thing as the h1.

here you can see many of the colors you can use: http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp

Alright in this short lesson we learned something about colors and backgrounds. Hope you learned anything in this first lesson of CSS.