Cascading Style Sheets

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Let's remember the last tags we've seen. They look like this:

One of the first things we will do with style tags is learn to change the background. Between the style tags you will now see this:

<STYLE TYPE="text/css">
body {background-color: pink}
</STYLE>

Note that in the new line, it first states "body." That is the part of the page you'd like to modify. Then you'll see there are the fancy, curvy brackets. This is the first time you've seen those fancy brackets used in code. Between the brackets is a specific way you'd like the body to be modified. In this case, you'd like the background color to be yellow. Note where the dashes and punctuation marks fall. They're important.

This command will make the background of your page yellow. So what's the advantage over <body bgcolor="yellow">? Nothing yet, but watch what happens when we add another tag:

<STYLE TYPE="text/css">
body {background-color: pink}
h1 {background-color: #ffff00}
</STYLE>

Now, there is pink everywhere on the page except behind the h1 headings. Behind those is the color #ffff00, which is yellow. Here's what that would look like:

This is normal text

Heading 1

Heading 2

You can change the background color of any element of the page, including <div> and <p> tags. Here's a paragraph with a greenish background:

All I did to create this paragraph was to have a style command on my page that looked like this:
p {background-color: #66ff99}
This means that a paragraph's background color will be kinda greenish.

Colors are only the beginning of what you can do. You can also set an image as the background. It's done pretty much the same way.

<STYLE TYPE="text/css">
div {background-image: url('smilest2.gif')}
</STYLE>

This is a division
There is a background to this division.
If you can't see the little smilies, I'm sorry.
They're cute.

By using pictures this way, you can make an ordinary picture do extraordinary things. If you want, you can make a single picture become a left margin background.See that here You can also place a picture in the background of your page in the left, center, or right side. This picture can have words across it, and it will scroll with the page.See that here Finally, you can make a background image that will not scroll with the page, but will stay in one place while the text and pictures above it move. It's a cool trick. See that here Those are a few things that can be done with backgrounds. Next, text.