css_ or cascading stylesheets_ have replaced many html tags like

Document Sample
css_ or cascading stylesheets_ have replaced many html tags like Powered By Docstoc

CSS, or Cascading StyleSheets is a coding language separate from HTML that works with
HTML. Ii has replaced many HTML tags like the <font> tag. We'll see how to style our fonts,
blocks of text, and links. We'll also learn how to make our own custom styles and apply them.

Styling Text

Lesson 1: Using CSS

How to code Cascading Stylesheets using text coloring as an example.

What Is CSS?
CSS stands for "Cascading StyleSheets". CSS is a coding language separate and different from
HTML. It works alongside HTML to provide a high level of control over how web pages look.
To give you an example, only seven lines of CSS style all of the paragraphs on this whole site.
Only seven lines. It picks the font, size, boldness, color, margins, etc. If I wanted to change the
text color, I could do so by editing only one short line of code to change the whole site.

This is the true power of CSS. It can do more than HTML and it can be applied as specifically or
universally as needed.

Font Color Example

Cascading Stylesheets are special instructions that are put in the <head> of your HTML
files. We'll learn how to make one "external" Cascading Stylesheet to control several
pages in a later lesson in this series. For now, we'll be putting our CSS code between
<style> and </style> tags that are placed in the <head> of our pages.

Lets make an example that will make all of the text in our <h3> headers pure blue and
leave other headers and text alone. We'll begin by adding the <style> tags:

<title>My First CSS</title>
<style type="text/css">

Your "style rules" will go here.




<h3>This Header Will Be Blue</h3>

<p>This text will be the default color. So will the h4 header beneath. Only the h3 headers will be

<h4>This Header Is Not Blue</h4>

<h3>Another h3 Header</h3>


Notice that both the opening and closing <style> tags are placed in the <head> of the HTML
code. This tells the browser that the code between the tags will be written in CSS and not HTML.

To be even more specific, add the TYPE attribute to the opening <style> tag. This attribute tells
the browser that a specific styling language, CSS, is being used. There are other styling
languages, but CSS has achieved almost universal dominance and acceptance. It is supported to
one degree or another by all current browsers.

Now, lets add the CSS code to make the <h3> text pure blue:

<title>My First CSS</title>

<style type="text/css">

h3 {color: blue}




<h3>This Header Will Be Blue</h3>

<p>This text will be the default color. So will the h4 header beneath. Only the h3 headers will be

<h4>This Header Is Not Blue</h4>

<h3>Another h3 Header</h3>


One important thing to note is that one line of code will color all the <h3> text on the page. You
don't have to code <font> tags inside each set of <h3> tags. You don't have to code <font> tags at
all. In fact, you don't have to code anything except the <h3> tags themselves. Just one line of CSS
code and they are all colored automatically.

The Style Rule
Lets talk about a few things. First study the style rule itself:

The whole statement above is called a CSS "style rule". All style rules have an element. The
element is what is to be styled. All of your HTML tags can be styled to some degree or another.
There are other elements beside HTML tags that can be styled. We'll go into these later.

The current style rule's element is "h3" meaning the <h3> tag. You don't include the
angle brackets ( < > ) in style rules. You just type in the tag element you want to style.

Next, notice the use of curly braces, sometimes called "curly brackets". The style rule's
declarations are always put inside curly braces. There can be several declarations in one
rule. We're just starting with one for simplicity. We'll move on in the next lesson.

The style rule's declaration has two parts: a property and a value. These work a lot like
HTML attributes and values, but there are a lot more properties and values to work with
in CSS. A property is the characteristic you want to change, like "color" in our example.
A value is what you want the property to be. We used a value of "blue". A hexadecimal
color would be more appropriate (#0000ff for pure blue).

The property and value are always separated (delimited) by a colon ( : ). There is no
space between the property and the colon, but you can add a space between the colon and
the value to make your code a little easier to read.

When you make a syntax error, like adding an inappropriate space or mispelling a
property or value, Netscape will ignore the entire style rule. Internet Explorer is a bit
more forgiving and will ignore only the declaration in error. Try to get a copy of
Netscape 4.x to view your pages in. If you don't see a style being applied in your
rendered pages, check the syntax first. Don't forget to look for extra spaces and spelling.

What You'll Learn

For now, play around with coloring your text with CSS. Try out using different tags for
elements. For extra emphasis try adding color to <i> tags:

i {color: red}

Now your italicized text will be red as well as italicized. Play around coloring
<blockquote>, <p>, etc. until you're comfortable with making the <script> tags in the
<head> of your pages. The big keys are to remember the curly braces and the colon
between the property and value. And remember, do not include the angle brackets in the
style rule's element. Leave the angle brackets for the actual tags in your <body>.

In the next few lessons you'll learn how to style fonts and links. You will also learn how
to make "custom classes" that you can apply to any tags and content.

Lesson 2: Styling Fonts

Learn how replace several <font> tags with a few lines of CSS. Learn new ways to style
fonts, too.

It might be helpful to review the <font> Tag Tutorial if you are not familiar with font
characteristics. This tutorial will show you how CSS has replaced the <font> tag in most


One of the first things you should decide on when styling a font is the "typeface" or
actual shape of the letters. CSS refers to this as the "font-family" property. Lets style both
the <h2> header and the <p> text of the following sample:

<title>Font Styling</title>


<h2 align="center">Styling Fonts</h2>

<p>This is a paragraph about styling fonts. The first thing we need to do is to pick a
"font-family" for the HTML elements we want to style.</p>

Now lets add some style beginning with a font-family. I want the header to be in Tahoma.
If Tahoma is not available, I want to use Arial. Failing both, I'll fall back on the generic
"sans-serif" value.

<title>Font Styling</title>

<style type="text/css">

h2 {font-family: Tahoma,Arial,sans-serif}




<h2 align="center">Styling Fonts</h2>

<p>This is a paragraph about styling fonts. The first thing we need to do is to pick a
"font-family" for the HTML elements we want to style.</p>


Now the <h2>'s text will be in the Tahoma, Arial, or generic sans-serif font face. The
element is "h2" and the property is "font-family". The value is actually a list of values
with each value separated by a comma ( , ). You can also add a space if you want. The
list goes from most desired font-family to least desired and ends with a generic option.

In practice, a common font-family is generally selected as the first preference and a
generic alternative is provided. On the other hand, you can make your list of values for
font-family as long as you want. Just remember to separate the values with commas.

Now lets choose a font-family for the paragraph. Lets choose "Times New Roman", a
common serif font, and use "serif" as a generic option. In the page's <head> code:

<style type="text/css">

h2 {font-family: Tahoma,Arial,sans-serif}
p {font-family: Times New Roman, serif}


That's pretty much it for font-family. Now a font-family has been chosen for all of the
<h2> and <p> text on the page. No further coding is needed to apply the font-family


Now lets size the text for our header and paragraph. To do this we'll use the "font-size"
property and "point" values ( pt ). You can also use pixel values ( px ) for sizing fonts.

We'll be adding a second declaration to both of our style rules. You separate (delimit) the
declarations with semi-colons ( ; ).

<style type="text/css">

h2 {font-family: Tahoma,Arial,sans-serif;
font-size: 30pt;}

p {font-family: Times New Roman, serif;
font-size: 8pt;}


You'll see that I used a really big font-size for the header, even bigger than an <h1>
header. The <p> font-size is very small. I did this to emphasize the sizing. You'll also
notice that the correct font-family is being used in both cases.

It is important to remember not to use a space between the digits and letters of the "font-
size" value. Use "30pt", not "30 pt". The extra space will cause Netscape to ignore the
entire style rule and may not be rendered properly in IE. This applies to values in HTML
tags as well.

You may have noticed that I put a semi-colon ( ; ) after both declarations. The semi-colon
after the font-family list is essential. I didn't really need to put one after the last
declaration. The semi-colon is only needed to delimit (separate) declarations. I put one at
the end of all of my declarations so if I add on more declarations later, I won't forget the
semi-colon -- a common mistake. It doesn't hurt to add a semi-colon at the end of the last
declaration in a style rule. I consider it a good coding practice.

You may want to resize the font-size before moving on. Play around a little. Not all fonts
support all sizes. In that case, the nearest sized version of the font is used. In practice,
you'll be fiddling with this a lot before making a final decision. Considering the power of
CSS, it's time well spent. And, remember, it's easy to correct if you change your mind
later. Just one or two lines of code and a whole page (or even site) is completely


The "font-weight" property refers to the thickness of the lines making up the letters of a
font-family. They come in different thicknesses that have their own value system. The
system uses a number value only. These values range from 100 - 900. There is no
extension like "pt" or "px", just the number. A value of 100 is very light and 900 is the
thickest. 500 - 600 are good for reading text like paragraphs.

Lets "lighten" our <h2> text a bit and "thicken" our <p> text.

<style type="text/css">

h2 {font-family: Tahoma,Arial,sans-serif;
font-size: 30pt;
font-weight: 600;}

p {font-family: Times New Roman, serif;
font-size: 8pt;
font-weight: 700;}


Compare this to the last example. You'll notice that the header got a lot thinner and the
small <p> font got a lot thicker (for it's small size).

Different fonts support different weight ranges. Many don't have a full 900 thickness
available. In that case, the closest weight available is used. Again, fiddling is required.

The above three font properties -- font-family, font-size, and font-weight -- will be used
with about every page you code. These are the Big Three font properties. There are two
others explained below that you should also know, even if they are not used as much as
the Big Three.


There are three font-styles: italic, bold, and normal. The "normal" value is the default. If
you don't want your text italicized or emboldened, then you can just ignore using this
property. On the other hand, if you're styling a tag for emphasis, this property can come
in handy. I'm going to italicize the header of our sample page:

<style type="text/css">

h2 {font-family: Tahoma,Arial,sans-serif;
font-size: 30pt;
font-weight: 600;
font-style: italic;}

p {font-family: Times New Roman, serif;
font-size: 8pt;
font-weight: 700;}


I think you sort of know what italicizing does. This will italicize all <h2> headers on the
page. Generally, you can use font-weight to make a font bolder without using the font-

Another important use of font-style is to remove italics from elements that use them by
default like the <i> tag. Lets say you wanted to make your <i> tag text red and not
italicized. You could style the <i> tag like this:

<style type="text/css">

i {color: red;
font-style: normal;}


Now your <i> text will not be italicized. It will be normal and red. Just keep in mind that
the default font-style for most tags is "normal" and you can just leave out a font-style if
it's not needed. Again, boldness can be styled with "font-weight" more precisely than
with using the <b> tag alone

The font-variant is hard to explain so here's an example:

THESE FIRST FEW WORDS use font-variant: small-caps. It produces upper-case letters that
are the same height as the lower-case letters. In this case, "These first few words", are in
small-caps.There are some pages that use a traditional magazine layout that employ

small-caps for the first line of text in an article. This is still very popular in print
newspapers and magazines.

To use small-caps just add font-variant: small-caps; to your declarations. The font-variant
property only has two values: small-caps and normal. So, if you aren't using small-caps,
you can just leave this property out.

It's also important to note that not all fonts support small-caps. If the font being used does
not support small-caps, font-size and font-weight can be used to mimic the effect. We'll
cover this later.
See how useful and powerful CSS is? You'll never need to code a <font> tag again.
Practice making pages with lots of bulk text and headers. Try styling the various tags you
colored in the previous lesson. Oh, and don't forget to add a little color along with your
other font declarations.

Make an effort to use different fonts, especially the common ones like Arial, Times New
Roman, and Tahoma. See how big and how small you can get them. Test the limits of
different fonts. This will let you practice your coding while giving you useful knowledge
for future use.

When you're ready, we'll see how to use CSS to make margins and alignment just like the
ALIGN attribute -- except you don't have to code all of those attributes, just and extra
line or two in your <style> tags.

Lesson 3: Styling Text

How to use CSS to automatically align text and add custom margins to various blocks of
text on your page.


There are often times when you want more than one overall margin on your pages. One
example is in quoting large amounts of text. In HTML you can use <blockquote> to get
some indentation on the left side -- extra left margin. In CSS, you can specifically
determine all four margins -- top, bottom, left, and right -- around your text in one style
rule.Lets say we want both left and right identation in our <blockquotes>. This would do
more to set our quoted text apart from the surrounding content. We'd do that like this in
the <head> of our page:

</style> <style type="text/css">

blockquote {margin-left: 20%;
margin-right: 20%;}

This would put a margin that's 20% of the "parent element" wide on each side. This
means that the <blockquote> text would occupy the center 60% (20 + 60 + 20 = 100) of
the page. Here's an example of the effect.

You can also add some padding to the top and bottom of a block of text by using
"margin-top" and "margin-bottom". I imagine you've already figured out what these do.

<style type="text/css">

blockquote {margin-left: 20%;
margin-right: 20%;
margin-top: 5em;
margin-bottom: 5em;}


Notice here that I did not use a percentage ( % ). I used "ems". The "em" unit comes from
traditional paper printing and roughly equals the line height of the particular font you're
using. Different fonts have different heights. Using percentages could get tricky unless
you know exactly how long your page is.

You can use either percentages or "ems" for sizing margins. As a rule, percentages are
better for margin-left and margin-right because they provide the proportionately same
indentation regardless of the viewer's screen resolution. The "em" is better for margin-top
and margin-bottom.

You can use one declaration to set all of your margins. This declaration uses the "margin"

<style type="text/css">

blockquote {margin: 10em;}


The above style rule would set a value of "10em" to all four margins. This is only useful
if you want the same margin on all sides.The style rule below would set a "5em" margin
for top and bottom and a 20% margin for the left and right:

<style type="text/css">

blockquote {margin: 5em 20%;}


Remember that the top/bottom margin is set first and the left/right set last. Also notice that there
is no comma between the values like in the "font-family" and other value lists. Use only spaces to
delimit (separate) margin values. Now let's set all for margins with the "margin" property:

<style type="text/css">

blockquote {margin: 5em 20% 10em 10%;}


This sets the margins in this order: top, right, bottom, left. Just think the block of text as a clock.
Start at the top and go clockwise. This is a timesaver if you want margins of different sizes. Of
course you could still use "margin-top", "margin-right", "margin-bottom", and "margin-left". The
"margin" property is just sort of a shorthand to get the same job done with a little less typing.

You can use CSS to replace the ALIGN attribute in your HTML tags. This can really save you a
lot of typing. The property employed is called "text-align" and it uses the same values that HTML
tags use: "left", "right", "center", and "justify".

Lets say that we are using centered <h2> headers to title the sections of a web page. All of these
headers are to be centered, so lets use CSS to align them all in one line of code instead of using
the ALIGN element in each <h2> tag.

<style type="text/css">

h2 {text-align: center}


Now all the <h2> headers on the page will automatically center themselves. When you learn how
to make external Stylesheets, you'll see how this one line would center the <h2> headers on an
entire site automatically.

Now lets assume that our page uses centered <h5> headers for subtopics. We don't have to make
another style rule for the "h5" element. We can just add "h5" to the "h2" element already

<style type="text/css">
h2,h5 {text-align: center}


Notice that we just added "h5" to the list of elements and used a comma ( , ) to delimit (separate)
it from "h2". The style rule won't effect any property other than centering both tags. It doesn't
effect their size or anything else. You can list as many elements as you want. The tag above
would center all <h2> and <h5> headers.

Headers are often styled together like this because they generally use the same font-family, color,
and alignment.

Remember that you can use the other ALIGN values, too.

Other Text Properties
There are some other text properties you can style. One of the most common is "text-decoration".
The text-decoration property can be set to:




"none". The "none" value is the default in most cases. Links are a noticeable exception. They are
underlined by default.

<style type="text/css">

h2 {text-decoration: underline;}


The above style rule would underline all <h2> headers on the page.

One of the biggest uses of text-decoration is not to add a line, but to remove the default
underlining from links. We'll learn how to do this when we learn about styling our links. But, if
you want to jump ahead, try:

<style type="text/css">

a {text-decoration: none}


This removes the underlining from your "fresh", unvisited links. Like I said, we'll get into this
more later.

Another text property that's used occassionally is "line-height". This sets the height of a line of
text. This is the space between the "baseline" (imaginary line running along the bottom of the
letters of a line of text) of one line and another. The property is used to set the spacing between
lines -- the width of a line break.

<style type="text/css">

p {line-height: 200%;}


The above tag uses a percentages and would double the distance between lines of text. This
would be the same as double spacing.

You can shrink the space between lines by using decimal percentage values:
<style type="text/css">

p {line-height: .20%}


The above value is only one-fifth of the default value and would push the lines closer together.
Negative values cannot be used and are ignored. In other words, you can overlap the lines with
the "line-height" property.

Make a page with plenty of different headers and bulk text and then play around with styling the
text. Align elements different ways and experiment with margins until you feel comfortable with
all of the properties discussed.

Cool Effects

Lesson 4: Styling The <body>

Learn how to make your backgrounds sing and dance using CSS. Also some other
important considerations when styling the "body" element.

The Uniqueness Of The <body>
The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like
any good parent, its child elements inherit styling properties from it. When you style the "body"
element in CSS, you're really setting default properties for the whole page (or site!). If you, say,
set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma
unless you style the child elements differently.

You'll come to find that the "body" element is the first one styled when designing a site. I usually
start out by styling default font and text properties and then moving on to setting the page's
background. Everyone has their own method, but expect to spend some time fiddling with the
"body" element.

You can style the "body" element just as you would the <body> tag. Some of the more unique
properties used when styling the "body" element concern setting a background. Lets begin by
setting a background color similar to using BGCOLOR in the <body> tag:

<style type="text/css">

body {background-color: green;}

The above style rule has the same effect as <body bgcolor="green">. You may be asking
yourself, "Then why bother with CSS styling when I could just put BGCOLOR in the <body>
tag"? Well, the answer is not so apparent now, but remember that you will soon be learning how
to make external stylesheets where this one style rule could set the background for all of your
pages at once.

NOTE: Using a hexadecimal code for the color's value would be better than the color's name.

You can also set a background-image that works like the BACKGROUND attribute in the
<body> tag. Later in this lesson we'll see how we can get much better control of our background
images with CSS.

<style type="text/css">

body {background-color: green;
background-image: url(my_background_image.gif);}


Notice the syntax used in the "background-image" value. First you must type "url" and then put
the URL to the image inside parentheses. The image's URL is not put in quotes. In this case, it's
assumed that the background image is in the same directory as the CSS.

You can "fix" the image, as with <body bgproperties=fixed>, by using the CSS property

<style type="text/css">

body {background-color: green;
background-image: url(my_background_image.gif);
background-attachment: fixed;}


This allows text to be scrolled over the background image. The image doesn't scroll. This
becomes a more interesting effect as we learn the new things we can do with backgrounds in CSS

When we use a small background image in the BACKGROUND of our <body> tag, it
automatically "tiles" across the page in a left-to-right, top-to-bottom pattern. With CSS we have
control over this tiling process with the "background-repeat" property.

<style type="text/css">

body {background-image: url(my_background_image.gif);
background-repeat: no-repeat;}

The above tag would prevent a background image from repeating or tiling. There are two other
values that "background-repeat" supports: repeat-x and repeat-y. The "repeat-x" value tiles only
one row across as in this example.

The "background-position property is only supported by recent versions of Microsoft's Internet
Explorer. It is ignored by Netscape. But, I'm sure Netscape support is just around the corner. It's a
good idea to learn how to use this interesting property. Remember, if you're using Netscape, you
won't be able to see the "background-position" effects in the examples.

What "background-position" does is position an image that has had its tiling limited by
"backround-repeat". The easiest way to do this is to use words as values:

<style type="text/css">

body {background-image: url(my_background_image.gif);
background-repeat: repeat-y;
background-position: right;}


This will make a column of the background image and place it to the right as in this example. We
could have used "background-position: center;" or "background-position: right;" as well. A left
alignment is the default.

We can also position a background vertically. This is a little trickier because it depends on the
length of your page which is not as standard as your width.

<style type="text/css">

body {background-color: #aaaaaa;
background-image: url(my_background_image.gif);
background-repeat: repeat-x;
background-position: bottom;}


This places a row of avocado images at the bottom of the page like this. Putting things at the
bottom and center is tricky because it jumps around upon initial scrolling. The values you can use
for vertical alignment are "top", "center", and "bottom".

Another thing to notice on this page is that I used a grey backgoround-color. This color will show
through wherever there isn't any background image showing. Keep this in mind when selecting
your background-color.

You can use both vertical and horizontal alignment together. This is most noticeable when you set
"background-repeat" to "no-repeat". When using both a vertical and horizontal value, the vertical
value (top, bottom, center) comes before the horizontal value (left, center, right). A space
separates the values:

<style type="text/css">
body {background-color: #aaaaaa;
background-image: url(my_background_image.gif);
background-repeat: no-repeat;
background-position: bottom right;}


This places the avocado image to the bottom-right corner of the page. Again note that the
background grey color appears wherever the background image is absent.

You can use other types of values for "background-property" for even more precise positioning
control. We'll cover them in Advanced CSS when we cover other CSS positioning techniques

The "Background" Property

The "background" property is a shorthand property similar to the "margin" property. You
can use this single property to set all of the values above in one declaration. The tag
below will make a column of avocados on the right of the page. The page will have a
grey background.

<style type="text/css">

body {background: #aaaaaa url(avocado.jpg) repeat-y right;}


The order in which you should code the values is:

background-color: -- I used "#aaaaaa" to get a medium-dark grey.

background-image: -- I used the avocado.jpg I've been using in the examples.

background-repeat: -- Using the "repeat-y" value, I made a column as opposed to a row
or single image.

background-attachment: -- I didn't use a value for this, I just moved on to the next
property. The "background-attachement" property value "fixed" keeps the background
image from scrolling. You just code in "fixed" in the "background" property if you
wanted to use it.
background-position: -- I wanted my column to the right as opposed to the default left. If
I'd used a single image ("background-repeat: no-repeat;"), I might have added a top,
center, or bottom value as well.

When styling a more complex background, I start out using separate properties like in the
first examples to experiment with. When I've got what I want, I squeeze it all into a single
"background" declaration.

Get some different sized images and practice with all of this. You may want to make a
text copy of this page because this is something you'll need to refer to often. I can't
remember this stuff and have to use a reference about every time I code a background.
What's important is that you know what's possible. You can always look up the specific

Below is some very typical code. I made this style for a client that wanted a fixed
background image that was just a narrow column on the left. It was a blue sky with
clouds image that was designed to look good when stacked vertically. Her background
styling looked like this:

<style type="text/css">

body {background: #aaffff url(clouds.gif) repeat-y left;}


Making Comments

You can see that CSS code can get a little bulky. To help organize it you can add
comments using /* comment */. You can add these comments anywhere you'd like.

<style type="text/css">

/* Body Styling Below */

body {background-color: #aaaaaa;
background-image: url(my_background_image.gif);
background-repeat: no-repeat;
background-position: bottom right;}


Note that you cannot use the HTML <!-- comment --> tag inside the <style> tags. You
must use the "/* comment */" syntax for CSS comments.

Setting Defaults
While this lesson emphasizes styling your pages' background, don't forget that the "body"
element should also include a default font-family (font-size and font-weight don't work
so well in "body"). It should also include the page's base margins and text-alignment (if
not default left alignment). You can also choose a master foreground color ("color:"

Netscape does not have the extensive inheritance rules that IE does. Font's styled in the
<body> may not be inherited by later text elements like the "p" element. Just remember
that if this happens, to include the full styling in the "p" element or other elements.

Now you see why I made a whole lesson just dedicated to styling the "body" element.
Spend some time with all of this. It's a good time to review all of the CSS you've learned
so far by styling the <body> and making some heavily styled pages. Spend most of your
time styling <body> and <p>.

Lesson 5: Making Custom Classes

How to apply different style rules to the same element and make generic classes you can
apply to anything.

What Are "Classes"?

"Classes" allow a single element to be styled different ways Lets say you have a page that
presents an interview with someone. You want a way to distinguish the questions asked
from the responses. You want both the questions and responses to be in <p> tags. So how
can we style the "p" element two different ways to distinguish the questions from the
responses? This is the problem that CSS Classes solve.

Please note that this is entirely different than styling several elements with one style rule.
To do that we only need to list the elements in the style rule and separate them with
commas. Classes allow us to do the opposite. We can take one element and give it
multiple possible styles.

Making Classes For HTML Elements

Lets begin by considering the interview example above. Both the questions and responses
will be put in <p> tags. To distinguish between a "question" paragraph and a "response"
paragraph, we'll color the question paragraphs blue and the response paragraphs red.
Good taste might dictate you use different colors, but the principle is the same.

First lets make an overall style rule for the "p" element. This will effect all paragraphs:

<style type="text/css">
p {font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 500;
color: black;}


You should be able to recognize all of the elements of the style rule above. This makes
some standard, black reading text for the regular, "non-interview" paragraphs on your
page. The size might be a little big for some tastes, but otherwise it's a pretty standard
styling for the "p" element.

Now lets make a class of paragraph that's blue for the question paragraphs:

<style type="text/css">

p {font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 500;
margin-left: 15%; margin-right: 15%; color: black;}

p.question{color: blue;
margin-left: 25%;
margin-right: 25%}


Not too hard to figure out, huh? The p.question is the name of the new class we created.
To make a class, first decide which element you want to attach a class to. Next, make up
a name for your class. I used "question" in this case. It's a good idea to use a descriptive
name. Now all you need to do is type in the element followed immediately (no spaces) by
a dot ( . ). The dot is followed immediately (no spaces) by the name you chose for the

Now all you have to do is to make the declarations. Remember that classes inherit the
style of their parent. In this case, "p.question" inherits the font-family, font-size, etc. from
"p". All you need to style is the stuff you want to change or add. I made "p.question" blue
and gave it more margin so as to be indented from regular paragraphs.

Now we need to apply the new class to our page. To do this we just add a CLASS
attribute to our HTML tags as needed:


<p>This is a regular paragraph. It will be styled according to the "p" element's style
<p class="question">This paragraph is in a paragraph that includes the attribute
CLASS="question". This paragraph inherits most characteristics from the "p" element's
style rule, but has some extra stuff like the color blue and the extra margins</p>


Here's an example of the above styling in action. To apply the new class, you just need to
add the CLASS attribute in the appropriate HTML tag and set it to the name of the class.
You do not include the dot in the CLASS's value. The dot used in making the class is just
a delimiter so the browser knows that you are making a CSS class.

Now lets wrap up the styling by making the red "response" paragraphs:

<style type="text/css">

p {font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 500;
margin-left: 15%; margin-right: 15%; color: black;}

p.question{color: blue;
margin-left: 25%;
margin-right: 25%}

p.response{color: red;
margin-left: 25%;
margin-right: 25%;}


The new "p.response" class of paragraph can be applied using <p class="response">. The
two classes each inherit from the parent "p" element's style rule, but not from each
other's. Anything you want to add or change must be in each class's style rule.

Making Custom Classes

Custom class are made by making a style rule without any HTML element at all. You just
use a dot and a name and then code the declarations. This class is applied by using the
CLASS attribute in any tag in which you want the style rule applied.

Lets say you want to add the color red to your italicized text by styling the "i" element.
You get to thinking that coloring some other text red, like headers or even whole
paragraphs, might come in handy, too. So, instead of making a class called "", we'll
just make a class called ".red" and apply it wherever we want:
<style type="text/css">

.red {color: red;}


Notice that we didn't use an HTML element. We just used a class name ("red") alone
preceded by a dot. Don't forget the dot. That's what tells browsers that you're making a
CSS class.

We can apply this new "custom class" in our HTML by using the CLASS attribute in any
tag that supports CLASS (which is about all of them). Some examples:

<h3 class="red">

<p class="red">

<i class="red">

This doesn't effect anything except text color. The <h3> will still be a big header and the
<i> will still be italicized. But, now, they will all be red, too.

There are two other very important tags that can help you apply custom classes: <div>
and <span>. You can use these tags to apply style rules wherever you want.

Taking the ".red" class above, I can make any text red by using the <span> tags:

<p>Taking the ".red" class above, I can make <span class="red">any text

The text between the <span> and </span> tags will apply any custom class you make.
Any characteristic not defined in the class will be inherited from the parent element. In
other words, the class will only change the color (in this case), not the font-family or
anything else. The <span> tag is an "inline" tag meaning that it doesn't cause a line break
and should be used for small strings of content.

Sometimes you'll find that inheritance is different between Netscape and Internet
Explorer. Generally, the problem is that something is not inherited as expected in
Netscape. This is easy to get around. Just add the declarations that aren't being inherited
into the class style rule. This may seem like redundant coding, but it's what you have to
do to get things looking right in Netscape. The same goes for parent/child elements like

We've already had some experience with the <div> tag. We used it to center content:
<div align="center>. We can add a CLASS attribute to the <div> tag to apply style rules
to blocks of content: <div align="center" class="red">.
The <div> tag is a block level tag and does cause a line break. It's used for larger blocks
of content. So, remember to use <div> for blocks of content and <span> for smaller inline

Practice making custom classes and applying them in HTML tags and with <div> and
<span>. The most common problems in making and applying classes is forgetting the dot
when making classes and misspelling a class name in the CLASS attribute when applying
them. If something goes buggy, check these things first.

Next, we'll learn how to style our links. Links are different than other text because they
don't just sit there like text. They're active elements and each action can be made to
change the links appearance like the links in the column to the left of this page.

Lesson 6: Styling Scrollbars

How to color the scrollbars in IE5.5+.

Basic Scrollbar Styling

Scrollbar styling was introduced with Microsoft's Internet Explorer 5.5 browser and has
become very popular. It allows you to color the browser's scrollbar's components to
match your page's overall color scheme. The scrollbar on this page is an example. If
you're using IE 5.5+, you'll see a black and grey scrollbar scheme.

Scrollbars are styled with the "body" element, as if there wasn't already enough stuff in
there. This is where you put your background properties among other things. The easiest
way to style a scrollbar is with the overall "scrollbar-base-color:" property:

body {scrollbar-base-color: red}

The single line of code above would produce the scrollbar pictured below.
Note how IE lightens and darkens the basic "red" color to automatically create a 3-D
effect. This works with any color you choose. You might, however want a "flat" scrollbar
like I've used on this page or a more dramatic 3-D look. To get these effects, you'll have
to color individual scrollbar components.

Scrollbar Components

To color scrollbar components you just use CSS properties and color values for each
component. The properties are coded like this:

scrollbar-[component you want to color]-color: [color you want to use].

For example, to get the "track" that the scrollbar slides in green, like the one on this page:

body{scrollbar-track-color: #009966}

Don't forget the hyphens ( - ) and don't add any spaces in the property name. Don't forget
the colon, either. It's easy to make typos with such long property names. Expect to spend
a little time debugging your scrollbar styling until you're used to it.

There are a lot of components you can color. The image below shows the components
you can color. The color scheme is for demonstration purposes. You'd probably use
various shades of a base color to get a deep 3-D effect. Also note that some of the
diagram's property names begin with upper-case letters. The actual property names are
coded in all lower-case letters.
The names used above are the same names as the component name you'll need in the
"scrollbar-[component name]-color:" property. The only difference is that no upper-case
letters are used in the actual code.

Here's some sample code for a full scrollbar style. It makes a flat-looking scrollbar.

scrollbar-base-color:                                                              #009966;
scrollbar-track-color:                                                             #009966;
scrollbar-face-color:                                                               #ffff99;
scrollbar-highlight-color:                                                         #009966;
scrollbar-3dlight-color:                                                           #009966;
scrollbar-darkshadow-color:                                                        #009966;
scrollbar-shadow-color:                                                            #009966;
scrollbar-arrow-color: #009966;

Most of the components contribute to a 3-D or "flat" look. The major items to consider
are the "face", "track", and "arrow". Just to the top and left of the "face" is "highlight".
Outside "highlight" is "3dlight". To the right and bottom are "shadow" next to the face
and "darkshadow" around "shadow.

These 3-D components effect the scrollbar's button as well as the boxes the arrows are in.
3-D Look

To style a heavy 3-D look you'd set up a basic color scheme for "face", "track", and
"arrow". Next use white or a very light shade of the "face" color for "3dlight". Then code
black or a very dark shade of the "face" color for "darkshadow".

Finish the styling by picking a "just lighter than face" shade for "highlight" and "just
darker than face" shade for "shadow". You'll have to try a few colors before finding one
that looks perfect.

Flat Look

To make a "flat" looking scrollbar, the 3-D components are coded to the same color as
the "track" color. The components that make the 3-D look are "3dlight", "highlight",
"shadow", and "darkshadow".

Practice styling your scrollbars by beginning with contrasting colors and styling one
component (property) at a time. Check your work after coloring each component to see
what you've done. This is the best way to remember which properties color which items.


You may want to copy the labeled image of the styled scrollbar above. It makes a handy
reference. Oh, and don't forget, just using "scrollbar-base-color" alone may be all the
styling you need. Begin scrollbar styling with this property and "scrollbar-track-color" to
get your scrollbar styling scheme started.

Copy the code outline below to a text file:


Now when you need to style a scrollbar, you can just paste this outline code in your CSS
to remind you what options you have available. All you have to do is add in the color

Congratulations are in order. You've completed the Beginning CSS Course. Read the
course review and do the recommended exercises and then tackle the final exam.
Styling Links

Lesson 7: Styling Links

How to make your links look like you want them to. Remove the underlining, change
color, font, etc. How to change link styling dynamically when they are clicked or hovered

Why Link Styling Is Different

Links are styled differently than regular text because they are active elements on your
pages. The browsers indicate this to the viewer by coloring links blue and underlining
them by default. The mouse cursor also changes from an arrow to a "hand" when
hovering over a link. This is all to differentiate links from regular text.

When CSS came out, webmasters started changing the appearance of links. Not all pages
look so good with the default blue, underlined links. The basic concept of making links
stand out from regular text still applies, but now you're far more free in making this

The psuedo-classes

Because links are active elements, they can change with the viewer's actions. Links have
four states called "psuedo-classes":

1) A fresh, unvisited link waiting to be clicked. CSS calls this the "a" or "a:link" element.
Note the colon ( : ) between the "a" and the name of the psuedo-class. This is important
to keep up with.

2) A link that is being "hovered" over by the mouse cursor. CSS refers to this as the
"a:hover" element. Netscape 4.x does not support styling this element. Netscape 6.x and
IE support "a:hover" styling.

3) A link that is being clicked. This is referred to as "a:active".

4) A link that has been "visited", or clicked before. CSS calls this "a:visited"

These link events are picked up by the browser and you can style your links for each
event or psuedo-class. Default links in IE and Netscape are blue and underlined when
fresh, red when clicked, and purple when visited.

Styling Links
We should make a style rule for each psuedo-class unless we want a default value for that
psuedo-class to be displayed -- which is seldom.

Lets see how I made the orange links on my pages.

<style type="text/css">

a:link, a:visited {color: #ff9900;
text-decoration: underline;}

a:hover, a:active {color: #ff0000;
text-decoration: none;}


A couple of things to take note of here. First notice that each psuedo-class acts as a
separate element. In fact that's the easiest way to think of them. Also note that I styled
two psuedo-classes at once in both style rules. This is just like styling two separate
elements. The pseudo classes are listed as elements and separated with a comma.

Styling link psuedo-classes together like this is common. Particularly the "a:link" and
"a:visited". This helps maintain the page's color scheme. There's no rule, however,
keeping you from styling all of the psuedo-classes separately and giving them each
different characteristics.

We also see a good use for the "text-decoration" property. This is what removes and adds
the default underlining of the links on my page. You'll notice that the underlining
disappears when you're hovering over or clicking a link. (Try this on the big links at the
bottom of this page. Remember that Netscape 4.x does not support the "a:hover" psuedo-

The overall goal in styling links is to distinguish them from the page's regular text. Keep
this in mind. Don't make your links too much like your text. The best ways to diffentiate
links are to use color, underlining, text size, and boldness.

Another consideration is to make your link styling consistent so that the viewer can
readily recognize your links as they go from page to page on your site.

The next lesson will show us how to make different classes of links. This is for cases
where you want one set of links (like in a nav bar) to look different from another set (like
in your regular text).
Lesson 8: Making Link Classes

How to make sets of differently styled links. This is how the links on this page are styled.
The links in the text and titles are styled differently from the ones in the navigational
column to the left.

What Are Link Classes?

Link classes are just like the classes we learned previously. We can make different sets of
links like the ones on this site. The links in the nav column to the left are styled
differently than the ones I put in the regular content.

This is pretty common. You don't want all of your links to look the same. Link classes
allow us to style as many types of links as we need.

Making Link Classes

We make a link class just like we made the classes of text in Lesson 5. Lets start by
styling our overall links:

<style type="text/css">

a:link, a:visited {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: orange
text-decoration: none}

a:hover, a:active {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: red
text-decoration: underline}


The above would give us a big orange link in Tahoma. You should be able to understand
all this from the previous lesson.

This is a pretty big link. Lets say we want a set of smaller links for a nav bar across the
top of the page. We'll call this new class of links ".nav" and style it to be smaller, lighter,
and blue/red.

<style type="text/css">

a:link, a:visited {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: orange
text-decoration: none}

a:hover, a:active {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: red
text-decoration: underline}

a.nav:link, a.nav:visited {font-size: 8pt;
font-weight: 500;

a.nav:hover, a.nav:active {font-size: 8pt;
font-weight: 500;


It's very important to notice that the class is made by adding a dot and a class name after
the "a" element. This is then followed by a colon and the name of the psuedo-class you're
styling. Always remember that the "dot/class name" comes before the "colon/psuedo-
class name". This is where a lot of syntax errors occur. There are no spaces in any of this.


It's also important to remember that the link classes will inherit properties from the main
"a" element styling. All you need to code in these classes is what you want to change
from the main "a" element style rules.

Applying Link Classes

To apply a class styling to your links you just add the CLASS attribute to your <a> tags:

<a href="" class="nav">

The above would apply the a.nav styling to the link. Links without a class attribute will
be styled according to the overall "a" element style rules.

Try making at least three classes of links on one page. Add all the properties you can
think of. One note: Changing "font-size" and "font-weight" with ":hover" and ":active"
can cause some odd behavior on your page as the whole page may have to resize or
rewrite itself to accommodate the new size. Give this a try to see the effect for yourself:
a:hover{font-size: 30pt;}

This will make your link very big when the mouse hovers over it. Watch how the rest of
the text on your page has to dance around this. Not generally a desired behavior, but fun
anyway. Remember that Netscape 4.x doesn't support the "a:hover" psuedo-class.

Next, we'll be discussing how to make an "external stylesheet" that can be linked to all of
your pages. This is generally how <style> is applied on websites. A single page of CSS
will style your whole site.

Using External Stylesheets

Lesson 9: Making External Stylesheets

How to make a single .css file that can style as many pages as you'd like. Free yourself
from cumbersome <style> tags in your <head>.

The External Stylesheet

An external stylesheet is a set of style rules saved as a .css file. It can be linked to any
number of pages to control an entire site. This has several advantages.

The external stylesheet is much more convenient to use. If I wanted to, say, change the
color of my regular links on the whole site, I'd only have to adjust a few lines of code on
one .css file. Compare this with having to edit <style> in each page's head. External
stylesheets can be a big timesaver.

External stylesheets also save a tremendous amount of file space and allow your pages to
load quicker. Think about how long some of your <style>s are. If you had 100 pages,
each with this <style> in its <head>, you'd have quite a few kilobytes just in CSS coding.
The external stylesheet, on the other hand, is just one set of style rules that can be applied
to each page. You can remove the <style> tags and the style rules between them on
individual pages. A big space saver.

So enough with the benefits of external stylesheets. Lets make one.

Making The External Stylesheet

Making an external stylesheet couldn't be easier. Just follow the 4 steps below.

      1) Copy all of the style rules in between your <style> tags. Do not copy the <style>
tags themselves.
     2) Paste these style rules into a blank document in any text editor.

      3) Save this file with a .css extension. This is very important. This extension tells
the browser that it's reading CSS code. The filename would look like "mystyle.css".

     4) Go back to your HTML file and delete all of the style rules and <style> tags. You
won't be needing them anymore.

<link>ing The External Stylesheet

Now that you've made your external stylesheet, you need to <link> it to your page. In the
<head> of your page, right after your <title> add:

<title>My Page</title>

<link rel="stylesheet" href="URL to your .css file" type="text/css">


There are three important attributes to this <link> tag. First is the REL attribute. This tells
the browser what type of file to expect, a "stylesheet" in this case.

The HREF is exactly like the one you use in <a> tags. It gives the URL to the stylesheet.
If the stylesheet and page are in the same folder the HREF would merely be the filename
-- "mystyle.css".

You've already been using the TYPE attribute in your <style> tags. It tells the browser
specifically that the styling is written in Cascading Stylesheet code.

It's important to put this <link> tag toward the top of the <head>. Also note that there is
no closing tag for <link>. All of its content is contained in the attributes in the tag.

Make an external stylsheet with some of the practice <style>s you've already made. Link
an external stylesheet to several pages and watch how changes made on the master
stylesheet effects each page. When you're comfortable with making external stylesheets,
move on to learning more about how stylesheets work and other ways to apply CSS

Lesson 10: Cascading And Inheritence
Learn how to make and apply multiple stylesheets for different effects. Also how to apply
CSS styling with the STYLE attribute.

What Is "Cascading" Anyway?

"Cascading" refers to the way in which styles can be "layered". This all has to do with the
concept of "inheritance" and "priority" or "overriding" which we've discussed a little
previously. Basically, you can code overall styles and add more detailed style rules as

This layering is often needed when we want to make stylistic changes from one page or
section of a website to the next. You would probably want to style an order form on your
site much differently than an informational page. Cascading would allow you to <link>
multiple stylesheets to pages in such a way as one stylesheet would override and inherit
styling from the other. This is the cascading feature of Cascading Stylesheets.

This is much like the inheritance discussed in Making Custom Classes and Making Link
Classes. Classes inherited characteristics from "parent" elements and style rules meaning
that we only had to code the properties we wanted to change. The rest of the properties
were inherited from the parent element.

Below are ways to make and apply multiple styles. You'll have to work through the
example to really catch on to this. It takes some time and practice to fully understand

Getting Started

You can <link> a page to multiple stylesheets. To begin the exercises for this lesson.
Make three simple HTML pages with a couple of <h2> headers and links to each other.
Copy and Paste come in handy here. Keep all of the files in the same folder for

<title>Page 1</title>


<h2 align="center">Big Header</h>
<h2 align="center">Another Big Header</h>

<a href="page2.htm">To Page 2</a>
<a href="page3.htm">To Page 3</a>
After making three pages based on the model above, make an external stylesheet with the
following style rule for "h2":

h2 {font-family: Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
color: red;}

Now save this external stylesheet as "mystyle.css" and link it to all three of your pages
(HTML files):

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

Now check your pages in a browser to make sure you've made the style rule and linked it
correctly. So far, so good.

Multiple Stylesheets

Now make a second simple external stylesheet with another "h2" style rule and save it as

h2{color: blue}

Now <link> this new external stylesheet only to "page1.htm" beneath the <link> for the
main "mystyle.css":

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

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

Notice that we just put one <link> tag right after the first one. The only difference
between the tags is the HREF. Now open "page1.htm" and you'll notice that the <h2>s
are now blue instead of red. This is because the "mystyle2.css" has overridden the "color"
property of "mystyle.css". There is no effect on the pages not <link>ed to the
"mystyle2.css" stylesheet.

Also notice that the <h2>s on page 1 are still in the Tahoma font and sized according to
the parent "mystyle.css" stylesheet. These traits have been inherited from "mystyle.css"
and are not overridden by "mystyle2.css".

If you had <link>ed the "mystyle2.css" stylesheet first, the original "mystyle.css" would
override the blue coloring. Cascading works top to bottom. The first stylesheet is loaded
and then the second one loaded overrides it and inherits from the first. A third stylesheet
would override and inherit from both.
In brief, the stylesheets <link>ed last override and inherit from the previous ones. This is
used to make different sections of a site look a little different from the others. An overall
styling is linked to all pages and then individual section stylesheets are linked only to the
pages of the particular section involved.

Play around with this by making three stylesheets and linking them in different orders
and trying to predict what the final outcome will look like. Just think like your browser.
Load the first stylesheet <link>ed in your mind, and then the second and so forth. When
you get pretty good at predicting what the final output will look like, you've got this
figured out.

Using <style> And External Stylesheets

You can also use <style> tags in the <head> of a page to override <link>ed external
stylesheets. This is generally done when only one page is to be styled differently from the
others. Add the following to "page1.htm":

<style type="text/css">

h2 {color: green}


The above code in the <head> of "page1.htm" would override all external stylesheets and
color the <h2> headers green.

When using <style> tags with external stylesheets, make sure to put the <style> tags after
the <link> tags. Otherwise, the external stylesheets may override the <style>.

The STYLE Attribute

You can also apply CSS styling by putting a STYLE attribute right in your HTML tags:

<h2 align="center" style="color: orange">

This will override all of the external stylesheets and any <style> in the <head> of the
page. As a rule of thumb, the closer the styling is to the content, the higher priority it has.
It will also inherit from parent styles.

The syntax for the STYLE attribute is a little different than regular CSS. First, there is no
element. The element is the tag and only the tag that the STYLE attribute is in. The
declaration(s) are enclosed in quotes (" "), not curly braces "{ }". Just type in the
declarations and separate them with semi-colons. The only spaces allowed are between
the colon and the value of the declarations.

Netscape Notes
Netscape's inheritance scheme is not as complete as Internet Explorer's. Some properties
just don't pass down from a parent element to a child element. One good example is
"color:". A font colored in the "body" element will not pass down to a child element like

To get around this, you'll have to add the "color:" property to your "p" styling and other
text element style rules. Just remember that if the style rule doesn't show up in Netscape
to double check syntax and don't assume that a style rule will inherit anything.

Preview your work in Netscape to see where any problems may crop up. It's usually not
hard to patch things up for Netscape. Again, double check your syntax and remember that
you may not be inheriting from parent elements like you do in IE. Just add the
declarations that aren't being inherited to child elements as needed.

Now you've seen different ways to apply CSS styles and how they override and inherit
from each other. Don't get frustrated with this. It takes some practice and fiddling to get
all this down. The key is to practice, practice, practice
AdvancedCSS Index
The <div> Box

Lesson 1: The <div> Box Idea
An overview of how <div> box/<layer>s work and how to code them.

Separation Of Content And Formatting

The whole idea behind markup languages like HTML is to separate the content of the
page from the formatting, or layout, of that content. We've already seen how tables do
this. We can lay out a page as a big table with differently sized cells and then put the
appropriate content inside these cells.

<div> boxes offer a much greater ability to control the layout of a page. They allow us to
take any content and shape it and place anywhere on a page with pixel precision. They
are also the basis for the popular pop up and pop down menus you see on many web
pages today. The little menus that pop up are <div> boxes.

You can put any content between <div> tags and then use CSS to style all sorts of
borders, backgrounds, etc. that apply only to that block of content. It's sort of like a table
cell on steroids.

<layers> VS <div> Boxes

The idea of making an HTML tag that would block off content and allow advanced
styling and positioning of that content began with Netscape's <layer> tag. You'll often
here what I call <div>s or <div> boxes referred to as <layers>.

Netscape took the approach of making a pure HTML tag that allowed for positioning
attributes as well as many styling attributes that were put directly in the <layer> tag and
could be dynamically changed with JavaScript.

Microsoft's Internet Explorer took a different approach. They used the existing <div> tag
and allowed it each <div> to be identified with a unique ID using the ID attribute. This
ID could then be styled and positioned with CSS, as opposed to HTML attributes, and
manipulated dynamically with JavaScript.

In the final analysis, Microsoft's Internet Explorer's method won out. Netscape 4.x offers
support for <div> boxes and still supports the <layer> tag. Microsoft Internet Explorer
offers no support for the <layer> tag. To make things rough, however, Netscape's support
of the <div> tag is not the same as IE's. We'll be discussing this more as we go.

So, <div> boxes arguably rule the day and the bulk of the Advanced CSS tutorials will be
centered around making, styling, and positioning <div> boxes.

Using The ID Attribute

There are two things you need to do to make a <div> box. First, you must enclose some
content in <div> and </div> tags and give the <div> an ID. That's all a <div> box is. The
code looks like this:
<div id="myDivBox">
The content inside the box will go here.

If you make the above simple box, you won't notice anything particularly special. In the
next lesson, we'll begin to style this box and you'll begin to see the real power behind
<div> boxes.

Lesson 2: Borders

How to put borders around your <div> box and how to style these borders. This is much
more flexible than just coloring and sizing <table> borders.

Please use Microsoft Internet Explorer to view the first few examples on this page. We'll
go into Netscape workarounds at the end of this lesson.


Let's begin by making a simple <div> box:

<div id="mybox">
<h2>These boxes aren't so tough!</h2>

Now let's begin styling our box by adding borders and making it look like a box. We do
this by referring to the ID we gave our box ("mybox") in the <style> section of our
<head> or external stylesheet:

<style type="text/css">

#mybox{Your style declarations will go here as usual}


There's one important thing to notice right from the start. That's the hash mark (#)
preceding "mybox". This tells the browser that you are styling a specific block of content
using "mybox" as an ID. It's very important and the styling won't work if you forget it.
Remember the hash (#) mark. (Above the 3 key on most keyboards.). Use dots (.) for
classes and hash marks (#) for IDs.

Now, lets add some properties and values that will put a border around our box. These
first few declarations are only supported by IE. We'll see how to get the same effect in
Netscape at the end of this lesson.

Lets put a solid border around our <div> box:
#mybox {border-style: solid;}

All we did was type in the new property "border-style" and set it to the value "solid".
(Don't forget the hyphen (-) between "border" and "style".) In IE, this will put a solid
border around our box with a default width and color. The three big elements you'll use to
style borders are style, width, and color. You'll be using these three properties on almost
every border you code.


In the above example, we used a solid border. There are other types of borders as well:

border-style: dotted;

border-style: dashed;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: inset;

border-style: outset;

Make sure to look at the above section in Netscape to see which border styles Netscape
supports and how that browser presents them.

(Note: The above borders were made with Netscape compatible code that you'll be
learning in a minute. That's why they show up in Netscape and the original "border-style"
example does not.)


We can determine how thick our borders are with the "border-width" property. The best
value to use when determining width is pixels (px).
#mybox {
border-style: solid;
border-width: 10px;}

This would make our border 10 pixels thick. Don't forget the "px" part.

This is what a 10px, solid border would look like. The same sizing applies to the other
styles of borders as well.

The only practical limits are a 1 pixel minimum, that will probably be displayed as 2 or 3
pixels in actual rendering, and, the size of the screen.


We can color the border to any browser safe color by using the "border-color" property in
our style rule:

#mybox {
border-style: solid;
border-width: 10px;
border-color: #ff0000;}

This border was made by adding "border-color: #ff0000" to the previous styling. The hex
code #ff0000 stands for "red". You can use the word "red", but hex code will give you a
broader range of colors.

The "Border" Property

The "border" property is a shorthand method of coding a border's style, width, and color
in one CSS declaration. This is the only border property that Netscape understands. So,
you'll be using it for most of your borders. It looks like this:

#mybox{border: solid #ff0000 10px;}

The above code is a lot easier and more compact, huh? And, it works in Netscape as in
this sample. Pay special attention to the fact that the different values are separated by
spaces. There are no commas or anything else between them. I always code the "border"
property in the order above -- style, color, width-- but, you don't have to. Just make sure
everything you want is included. It pays to be consistent, but the browsers will figure
things out regardless of the order.

Styling Individual Borders
Unlike <table> cells, you can style each individual border of a <div> box. This comes in
handy when you only need a vertical line and such. The code to style a single border goes
like this:

#mybox{border-right: solid #00ff00 5px;}

Here's a box with only the right border ("border-right") styled.

Pretty cool, huh? You can style each border using: "border-top", "border-bottom",
"border-left", or "border-right". If you don't want a border, just don't style it, or use
"border-left: none".

If you're using Netscape, you can't see the vertical green line. Netscape doesn't support
the individual styling of borders. Netscape only renders the "border" property. Period.
You can use the "border" property to set a default border for both browsers and then use
the "border-right", etc. properties to style individual borders for IE users.

The individual border styling should be coded after the overall "border" property styling.
This will give them precedence when rendered by IE. Remember "cascading"? Netscape
users will see the styling of "border" and IE users will see the individual "border-right",
etc. styling.

Borders Around Other Things

You don't necessarily have to limit the use of CSS borders to <div> boxes. You can add
border properties to any of the HTML elements like "p", "h2", "blockquote". You can
also use it in custom classes that don't apply to boxes.

One way to make a quickie inset box is to use a border around a regular paragraph like I
have in several examples above. Try this in a <p> tag:

<p             style="border:              dotted              #ff0000             10px">
Some text in a paragraph.</p>

Here's the above code in action. Remember that Netscape doesn't support dots, so
Netscape users are seeing a default solid line.

The above is a great, quick way to highlight a particularly important paragraph or header.
Go nuts, decorate all of your headers with one line of CSS:

<style type="text/css">

h1, h2, h3, h4, h5, h6 {
border: groove blue 20px;}

The above styling would produce headers like the one below:



Practice making <div> boxes with borders. Try all the styles and various widths and
colors. Always check your work in Netscape to see how it's handling things. Get
comfortable using the overall "border" property.

You'll find yourself cussing Netscape a lot as a web master. Keep in mind that almost all
of the breakthroughs in browsers began with Netscape. IE didn't really come into its own
until it began its superior support for CSS and some exotic HTML tags. Netscape's 6.x
series is trying hard to upgrade its support of CSS and, someday, I think they'll make it.

The most important things to understand well are the overall "border" property and
styling, and how to use and apply IDs. Don't forget those hash marks ("#")!

Lesson 3: Backgrounds & Dimensions

How to size and color your <div> boxes. How to add an image background.

Adding Backgrounds

There's a lot to cover. Lets start with what we already know and make the basic box with
a border. In the <body> of our page code:

<div id=colorBox>
<h2>&lt;Code_Punk&gt; is all good !!

To put a border around this, lets use the "colorBox" ID and begin styling this box in the
<head> of our page:

<style type="text/css">

#colorBox {
border: solid #000000 5px;

The above will put a 5 pixel, solid black border around our text. Now we'll use the
"background-color:" property to add the red background:

<style type="text/css">

#colorBox {
border: solid #000000 5px;
background-color: red;


There's an odd note to this. Netscape won't fill in the whole <div> box unless you declare
a "border:" property. Go figure. If you don't want a border you can use "border: none".

Another Netscape anomaly is that there's a space between the border and the box. This
becomes very noticeable when using a background color. I've tried everything to move
this and can't. Again, you can remove the border and use a border in the <div> box's

You can also use a background image by using the "background-image:" property.

background-image: url(URL to image file);

You can use both of these together. It's a good idea when using an image to also use a
compatible background color. On rare occassions, for a variety of reasons, the image may
not load or loads slowly. In this case, the "background-color:" will show through and
preserve your basic color scheme.

Padding & Margins

Now lets get our text away from the edges of the box. We'll use "padding:" to do this:

<style type="text/css">

#colorBox {
border: solid #000000 5px;
background-color: red;
padding: 5px 20px;


The "padding:" I've added would make a 5 pixel pad top and bottom and a 20 pixel pad
left and right. Here's how "padding:" works:
padding: 3px 10px 4px 50px -- This is how you can set padding for all four sides to
different values. The order begins at the top and moves around in a clockwise manner:
top, right, bottom, left.

padding: 10px -- A single value would be applied to all four sides.

padding: 5px 20px -- This is what we're using. Whenever two or three values are used,
the missing value(s) derive their padding from the value of the opposite side. In this case,
we've set top and right. Bottom will get its value from top's 5px. Left will get it's padding
from the "left" value of 20px.

Finally, you can style individual padding with "padding-top:", "padding-right:",
"padding-bottom:", and "padding-left:". This works just like "margin-x:" that you learned
in Beginning CSS.

One more note: If you are already using margins in your <div> box's content, you may
not need padding. It's best to try things out and fiddle with it until it looks right.

Width & Height

Sizing a <div> box is a lot like sizing <tables> you use "width:" and "height:" properties.
Here's the width for the sample box:

<style type="text/css">

#colorBox {
border: solid #000000 5px;
background-color: red;
padding: 5px 20px;
width: 100px;


The above code in red narrows our box to 100 pixels. You can also use percentage widths
like you do with <tables>. Both browsers support this.

The "height:" property can be defined in either pixels or percentages, too. When "height:"
is defined, it is usually in pixels. Many boxes, like the one in this example, don't use a
"height:" property. The content determines the height of the box.

Yet another Netscape anomaly. Netscape ignores the "height:" property in most
circumstances and dimensions the height strictly by content, margins, and padding. You
may have to add some <br> tags to your content to make vertical blank space in your box
if height is an issue. We'll be talking a lot more about Netscape and IE workarounds later.
Foreground Color

We're about done styling this box. All we need to do now is make the text blue. Do this
with the "color:" property.

<style type="text/css">

#colorBox {
border: solid #000000 5px;
background-color: red;
padding: 5px 20px;
width: 100px;
color: blue;


In small boxes like this, it's okay to style the content along with the box in the box's ID
styling. As you begin making more complex boxes, like those used for pop up menus,
you'll find it's easier to style the content separately from the box. In other words, instead
of styling the text's color with "color:" in the "#colorBox" styling, set the color by styling
the "h2" element.

Summary & Exercises

       Add backgrounds with "background-color:" or "background-image:". Netscape
requires that borders be defined to fill in a box with color. You can use "border: none" for
this if you don't want borders.

     You can add padding using "padding:" or specific padding properties. Padding
works around the box outside of margins. You may need to check the margins of your
content before setting padding.

      Use "width:" and "height:" to size your box. A "width:" property is almost always
used in practice. Often the box's height is determined by content. You can use either pixel
or percentage values when you size your boxes.

      Content is best styled separately from the box itself. If the content is very simple,
like in our example, you can go ahead and style the content with the box's ID styling.
Make at least five fully styled <div> boxes. Make sure to include borders, background,
and dimensions. Remember that Netscape doesn't reliably render the "height:" property.

CSS Box Review & Exam

A quick review of the above lessons and a test to check your skills before moving on.

       A <div> box is merely some content coded between <div> and >/div> tags. The
<div> can then be ID'd or CLASSed, and styled a variety of ways. In other words, the
content is "boxed" in the <div>.

Netscape started this idea with the <layer> tag. Both Netscape and IE support the <div>
tag, but only Netscape supports <layer>s. Therefore, it's a good idea to use <div>s so
both browsers can render them.

       We can put a border around our boxes with CSS's "border:" property. Netscape
requires a "border:" property be set before it fully fills in a box's background. You can set
a border's size, color, and type. IE supports more types than Netscape.

     We can add a background color or image to our box with "background-color:" and
"background-image:" respectively. Works in both browsers.

        We can size our boxes with the "width:" and "height:" properties. We can use
either pixel or percentage values. Netscape generally ignores the "height:" property and
sizes boxes according to the width and content.

     Add padding between the edge of your boxes and content using the "padding:"
property. Check your box's content margins first. They may already provide enough

CSS Positioning (CSS-P)

Lesson 4: Positioning <div> Boxes With Pixels.

Learn how to position your boxes with pixel precision or percentages.
Absolute vs Relative Positioning

There are two ways you can position <div> boxes. First, there is "relative" positioning.
This positions your box based on where it is included in the page's code. If the box is
coded in a table cell, it shows up in that table cell. It makes your box work in an "inline"
fashion, much like an <img>.

The second method of positioning <div> boxes is "absolute" positioning. This is where
CSS positioning really gets its power. When absolute positioning is used, the browser
doesn't care where the box's code is relative to the other objects on the page. It puts the
box exactly where you tell it to be.

We'll be making this example in this tutorial. You can see from this simple example that
CSS positioning is far more precise than tabular layout. It will eventually replace tabular

You should be able to make and style the boxes. Below is the code for the styling of the
red box:

width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;

You should already know what this style rule does. We want to absolutely position this
box on the page so we need to declare "position: absolute".

position: absolute;
width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;

That's all there is to it. Now we can set coordinates to place that box anywhere we want
on the page -- or even off of it.

Setting Pixel Coordinates
We place the box by determining where we want to place the top-left corner of the box.
We use the "top:" and "right:" properties to do this.

position: absolute;
top: 40px;
left: 100px;
width: 100;
height: 100;
padding: 10px;
border: solid #000000 5px;
background-color: #ff0000;
color: #000000;

This is what places the red box in our example 40 pixels down from the top of the screen,
and 100 pixels to the right of the left edge of the screen.

The white box is positioned similarly by using:

top: 0px;
left: 300px;

Using "top: 0px" puts our white box right at the top of the screen. The "left: 300px"
declaration moves the box 300 pixels to the right of the left edge of the screen.

Using Percentages & Negative Numbers

You don't have to use specific pixel coordinates. Both IE and Netscape support the use of
percentage values for "top:" and "left:". This can come in really handy when you want
your page to look proportionately the same despite the viewer's monitor's resolution.

The blue box in our example uses left: 50%; to place the left side of the box half way
across the screen. Mind you, this isn't centering because it's the left side of the box that's
being placed half way out.

You can center a box by using percentages to size its "width:" and position its "left:". Say
we've got a box that's 20% of the screen wide with "left: 50%".

To "straddle" the 50% mark with the 20% box, we just divide the width by 2 which gives
us 10%. Now we subtract this from the 50% center-line leaving us with 40%. Now just
use "width: 20%" and "left: 40%". This will "pull" the box 10% to the left and center it.

The above takes a little figuring and practice. Remember that both the box's "width:" and
"left:" must be percentage values to do this. You can align the center with any vertical or
horizontal position on the screen using this method.
Negative numbers can be used to place your boxes partly or fully offscreen. A "left: -10"
would put 10 pixels of your box off of the left edge of the screen. This is rarely needed,
but you'll hear some "web gurus" saying you can't use negative numbers in "top:" or
"left:". They're wrong. Negative coordinates work in both Netscape and IE.

Right & Bottom

Microsoft's Internet Explorer supports the use of "right:" and "bottom:" as well as "left:"
and "top:". They work backwards from "left:" and "top:". If you use:

bottom:                                                                                     0;
right: 0;

You'll get a box at the lower right corner of the page. Positive numbers move your box up
and left, not down and right like with "left:" and "top:"

These properties can be very useful for positioning items to the right of a page, but
Netscape doesn't support them. Rats. You might want to limit yourself to "top:" and
"left:" for the time being.

Summary & Exercises

        You can select a positioning method for your <div> boxes using "position:
absolute;" or "position: relative;". Relative positioning makes your box work sort of like
an inline image. Absolute positioning will put your box where you want it despite where
the box is positioned in your code.

        You position your boxes with "top:" and "left:". IE supports "right:" and
"bottom:", but these are used less frequently. You can use percentages or pixels to
position your boxes.

         You can center a box if you use percentage values for its "width:" and "left:".
Subtract half of the width's percentage from 50% and use the result as the percentage in

Now make our example and move the boxes around. Add two more boxes for a total of
five. Try to line them all up horizontally. Practice centering a box until you get the gist of

Lesson 5: Floating Your Boxes
How to position your boxes by "floating" them. This works much like positioning


We can position <div> boxes with the CSS "float:" property. This will position a box
much like an image or <table>. Text can be made to wrap around the boxes (or not).

Using The "float:" Property

Lets begin by making a page with some default text we want our boxes to float around:

<h3>This text is between two...</h3>

This is just a really simple page of text. Now lets code "Box #1", the red box. For starters,
all floated boxes must be coded before any text that's to be presented beside or between
them. This is just like formatting text with images from HTML.


<div id="box1">
<h2 align="center">Box #1</h2>...

<h3>This text is between two...</h3>

Again, take special notice that the box is placed before the text in your code. Now lets
style Box#1 and use "float:" to position it to the left.

<style type="text/css">

position: relative;
width: 50px;
border: none;
background-color: #ff0000;
padding: 5px;
float: left;

The only new thing here is the "float:" property. This is what places the box to the left of
the screen and puts the text to the right.
Notice, too, that I've used "position: relative;". Absolute positioning doesn't work when
floating boxes. Use "position: absolute;" when you want to place a box in an exact
position. Since "position: relative;" is the default "postion:", you can just omit "position:"

Dual Column Float

Now lets make the black Box #3 to the far right. We code this box before the page's text
just like with Box #1. We can code it before or after Box #1, but it must come before the
page's text.


<div id="box1">
<h2 align="center">Box #1</h2>...

<div id="box3">
<h2 align="center">Box #3</h2>...

<h3>This text is between two...</h3>

Again, you can code either box first, but they must both become before the page's text in
the <h3> tags. Now lets look at "Box #3's" styling:

#box3 {
position: relative;
width: 50px;
border: none;
background-color: #000000;
padding: 5px;
color: #ffffff;
float: right;

At this point, you should have a page with the red and black boxes at the edge of the page
and the <h3> text between them. This works just like putting text between two images
using the <img> tag's ALIGN attribute.

Multiple Floats

On to the inner two boxes. The yellow box is styled with "float: left". It appears to the
immediate right of Box #1 because its <div> is coded after the <div> for Box #1:

<div id="box1">
<h2 align="center">Box #1</h2>...

<div id="box3">
<h2 align="center">Box #3</h2>...

<div id="box2">
<h2 align="center">Box #2</h2>

<h3>This text is between two...</h3>

The new box was coded and styled just like the others and is floated left with "float: left".
Because one box has already been floated left, our new Box #2 appears as far left as it
can, which is just to the right of the first left floated box.

This occurs because the browser interprets a web page from its code from top to bottom.
What's coded first is rendered first. The first box coded to "float: left" will go the the
furthest left of the screen. The next box floated left will go as far left as it can.

Box #4 shows what happens when another box is floated right. It works backward from
"float: left;". In the case of "float: right;", the first <div> in the code that's floating right
goes to the furthest right of the screen and subsequent <div>s styled with "float: right;"
are put as far right as they can go -- just to the inside of the first floated box.

Please note that all four of the floated boxes are coded before the page's central text.

When you're playing around with this. Cut and paste the <div> code in the <body> to
rearrange the order of the code. You'll soon see for yourself how the system works:

1) Boxes that are floated left are presented from left-to-right beginning with the first left
floated box in the code.

2) Boxes that are floated right are presented right-to-left beginning with the first box
that's styled with "float: right".

3) All floated boxes must be coded before any other text or content on the page that is to
be presented between or beside them.

Using <br clear="all">
If you want something placed below a <div> box, like another floated box, you'll need to
use a <br clear="all"> tag to make a line break.

<div id="box2">
<h2 align="center">Box #2</h2>
<br clear="all">

This would cause subsequently coded boxes and content to go below the box. This would
cause one line break below the top of the box. You may have to use extra <br> tags to
add more whitespace.

One problem that comes up when using <br> tags is that the page's other content won't
display or wrap properly. This is because of the break tags. The content wants to be
positioned under the boxes, too.

To get around this problem, all of the <div> boxes can be coded into one overall parent
box. This parent box can then be floated and the text will wrap around the parent box,
ignoring the internal boxes' <br>s.

We'll be talking more about nesting <div>s inside each other in more detail later.

Spacing Between Boxes

Netscape and IE render floated boxes differently. Netscape will try to add some space
between the boxes if any space is available in the page's overall width. IE will put the
boxes right next to each other.

You can add some space between the boxes in both browsers by using a "border:" that's
colored the same as the background. This border can be as wide as you want to add some
space between the boxes.

border: solid white 10px;

The above would put a 10 pixel border around our boxes. The white color would be the
same as our example's background. This would give the appearance of 10 pixels of space
between our boxes.

Summary & Exercises

       You can "float" <div> boxes by using the "float:" property in their CSS styling.
Floating boxes works a lot like using the ALIGN attribute in an <img> tag.
      Use "position: relative;" or just omit the "position:" property altogether when
floating a <div>.

       Floated boxes must be coded before any other page content that is to be placed
beside or between them.

       When floating multiple boxes, the first <div>s floated in the code will be placed
at the edge of the screen. Subsequent boxes coded with the same "float:" value will
appear inward from the first boxes. You can use the <br clear="all"> tag to make boxes
go beneath one another.

      You can make a space between boxes by using a "border:" that's colored the same
as the page's background. You can use any width you need for this border.

For an exercise, float 6 boxes across the top of a page with no page text or other content

Change the order of these boxes around in your code to see how this effects their
presentation on your rendered page.

Now add some standard page text or an image between these boxes.

Finally, add some <br clear="all"> tags to get the boxes to fit beneath each other instead
of beside each other. It takes a little practice and fiddling.

Happy Note: You'll rarely be floating more than one box left and one right in practice.
This mimics the 3-column tabular layout.

Lesson 6: Using CLASS & ID Together

How save yourself time and trouble by coding common box traits in a CSS CLASS.

When styling a lot of similar boxes like this we can put the common elements in a CSS
custom CLASS. The things that vary from box to box we can code in an ID.

There is one big difference between CLASS and ID. CLASS can be applied to any
HTML tag that the styling is appropriate for. The same class can be used many times.

An ID can only be used once. Each ID must be unique to the page. If the same name were
assigned to two IDs, the page wouldn't work right and would possibly cause a browser

In short, common traits to used in more than one item can be put in class. Styling that
applies to only one item should be put in an ID.

By putting common elements in a CLASS instead of each ID, we can save ourselves a lot
of coding and trim down our file sizes. It also makes your code a little easier to read and a
lot easier to edit.

Making & Applying The Class

In coding the previous example, I put all of the common characteristics into a class I
called "boxes". The common traits are the border styling, the background and foreground
colors, and dimensions of the boxes.

Here's the CSS class I made for each box:

position: absolute;
border: solid #000000 2px;
background-color: #ffff00;
color: #000000;
width: 20%;

Notice that I put the "position: absolute" in the CLASS. Each box is absolutely positioned
so I can put it here. You can put any declaration in a CLASS that you can put in an ID.
Just make sure that it is common to all of the boxes you're styling with the CLASS .

Oh, and don't forget to precede the CLASS's name with a dot (.). This tells the browser
it's a CLASS as opposed to something else.

To apply the class to the boxes just add the CLASS attribute to each <div> tag:

<div class="boxes">

That's all there is to setting the common styling to each box.

Making & Applying The IDs
The only unique styling to the example's boxes are their positions -- "top:" and "left:".
You must code a separate ID styling to position each box, but you don't have to add the
elements from the CLASS we just made.

Here's Box #1's ID:

#box1 {
top: 0px;
left: 20px;

See how much smaller that ID is than the ones we've been coding with full styling? We
apply this style with the ID attribute in the <div> tag:

<div class="boxes" id="box1">

This little time and code saver will come in very handy as you begin coding pop up
menus in <div> boxes. The menus mostly look the same, only the positioning is different.

Using CLASS Alone

We don't even need to use ID in some cases. We can fully style and position our boxes
with CLASS alone in a single style rule.

Look at this example. In this case, we can position each box with a "float: left" and use
<br> tags to make them go beneath each other.

Since every box has identical styling, we can just use and apply a class instead of making
individual IDs:

.boxes {
position: relative;
border: solid #000000 2px;
background-color: #ffff00;
color: #000000;
width: 20%;
float: left;

Note that I used "position: relative" (the default) here. This is so the boxes can float. They
can't float if you give them an absolute position.

This was applied with the CLASS attribute in each <div> tag:

<div class="boxes">
The <br> tags that make the vertical alignment and spacing go at the end of each box
right after the closing </div> tag:

<br                                                                           clear="all">

The "clear='all'" part of the first <br> tag is needed to clear the margins of the box just
like when your placing something below an <img>. The other <br> tags add extra
vertical space.

Summary & Exercises

You can use a CSS CLASS to style common properties of a box, or anything else. Use ID
to style individual characteristics. You can apply both CLASS and ID by simply using
their attributes in your <div> tags.

Whenever you need a straight row or column of boxes, you can use CLASS alone in
conjunction with the "float:" property to style and position all of your boxes at once. The
<br> tag is needed to make columns.

Make the sample pages from scratch. Make a column to the right of the page. Move the
boxes around and check out how they overlap. That's going to be the topic of our next

Make a row and column of small <div> boxes using only CLASS, "float:", and <br> tags.
You may have to use "border:" to put some space between a row of boxes.

Lesson 7: Using Z-Index &: Visibility

How to alter the "layering" of boxes that are positioned on top of one another. And, how
to make your boxes invisible -- the first step in coding pop up menus.


Take a look at this page. We've got three boxes that overlap each other. When a browser
sees that two or more boxes share some space, it always puts the last box coded on top.
This goes back to the idea that browsers render your code from top to bottom. First
coded, first rendered. Last coded, last rendered.

We can change this default layering with CSS. It's not always convenient or possible to
change the order of the page's code.

The Z-Index
The problem is solved by using CSS's "z-index:" property. The "z-index" controls what is
layered on top of what regardless of the order of the code.

The "z-index:" property is set to a numerical value like "2" or "3" and such. The bigger
the number, the closer to the top a box is displayed. Lets use this to reverse the layering
of the boxes by adding the following to the example's styling:

#box1{z-index:                                                                            3;}
#box3{z-index: 1;}

This would put Box #1 on top because its "z-index:" is higher than the other boxes. Box
#3 would be at the bottom because it has the lowest "z-index:"

Here's what the new page would look like. When setting a "z-index:" for a group of
boxes, it's best to set a "z-index:" for each box to insure the desired order.

Two huge myths about the "z-index:" property:

        "The default 'z-index:' is 1". What bull. There is no "default 'z-index:'". If no "z-
index:" is set, then the object styled will be layered according to its order in the code as
per the first section of this page. Yes, there is a default layering -- based on the order the
styled objects are coded in -- not a "default 'z-index:'".

       "The page itself has a 'z-index:' of zero.". Wrong! The page, its background and
content have no z-index. If the page had a z-index of zero, then you could use negative
numbers to code a box "behind" the page. You can't, so there. All <div>s are presented
on top of the page regardless of the <div>s "z-index:".

You can use negative numbers, though. This comes in handy when you're adding a new
box to a page and you want it on the bottom of previously coded boxes. If the current box
on the bottom is set to "z-index: 0", you can set the new box to "z-index: -1". Now the
new box will appear below the older, "z-index: 0" one.


Negative numbers will not hide a box. To hide a box we use "visibility:".

#box1 {visibility: hidden;}
The above would make Box #1 invisible. This is the key behind the pop up menus you
see on some site. They use JavaScript to dynamically change the CSS "visibility:"

This page shows Box #1 with its "visibility:" set to "hidden". It looks like Box #1 wasn't
even coded at all. Check the source and you can see that it is.

The "visibility:" property has two values you can use: "hidden" and "visible". I'll bet you
can figure out what each value does. Both browser support "visibility:", "hidden", and
"visible". Netscape also accepts the values "show" and "hide". The "visible" and "hidden"
values are more often used because they are supported by both Netscape and IE.

Summary & Exercises

Code five overlapping boxes. Begin by not coding in any "z-index:". This is a good
exercise for positioning boxes. Now reverse the order of layering by adding "z-index:"
properties. Remember that bigger z-indexes appear on top.

Now make the middle boxes appear on top. Make some boxes invisible. This might not
seem too useful now, but this is the basis of pop up menus that you'll be coding when
you're learning JavaScript.

Lesson 8: Nesting <div> Boxes

How to put and position <div> boxes inside other <div> boxes.

An Example

Here is an example of a nested <div> box. The nested box is the "title" part. It's a
separate <div> box coded inside the parent (brown) box.

Nested <div> boxes are commonly used to make various effects much like nested
<tables>. Some of the more common uses are:

Making separate backgrounds like in our example.

Making a border when the parent box's border was used for spacing the box relative to
outside objects.

Formatting internal content into columns and such.

You can nest <div> boxes to as many levels as needed. They load a little quicker than
nested <table>s. And, as always, <div>s are more flexible than <tables>. Lets see how
our example was made.

Making The Parent Box
We begin nesting <div> boxes by making the parent box. Our parent box is a pretty
simple one containing links and the "child" <div> containing the title.

We'll start by making the brown box:


<div id="parentbox">
<a href="#">link #1</a><br>
<a href="#">link #2</a><br>
<a href="#">link #3</a><br>


The above code is pretty straightforward. Here's how we styled "parentbox":

#parentbox {
position: absolute;
width: 200px;
float: left;
border: solid #ffffff 10px;
background-color: #cc9966;
text-align: center;

The links were styled separately using their psuedo-classes. It is typical that content is
styled separately from the box containing it.

Nesting A Box

Nesting the Title Box is pretty simple. In the code for the first box just insert the second.


<div id="parentbox">
<div id="nestedbox">Title</div>
<a href="#">link #1</a><br>
<a href="#">link #2</a><br>
<a href="#">link #3</a><br>


It is important to note that the entire "nestedbox" is coded inside the parent box -- Both
<div> tags and all content.
We style the nested box just like we did the parent box using its ID:

#nestedbox {
position: relative;
width: 200px;
border: solid #000000 2px;
background-color: #33ccff;

I've emphasized "relative" in the above code because we've not discussed the "position:
relative;" declaration much. If we used the "position: absolute;" declaration, the browsers
(especially Netscape) would figure we wanted the nested box placed relative to the
overall page, and not the parent box.

This is important to remember. When nesting <div> boxes, we want them positioned
relative to their parent box, not the overall page. To do this we must set the "position:"
property to "relative" as opposed to "absolute". The example we've been analyzing is a
good example of the difference between "position: absolute;" and "position: relative;"

Another thing to mention is that you can "float:" child boxes. This is a handy way to
make columns in your parent box. Pay close attention to the child boxes' widths. You'll
need to use "position: relative;" so the nested boxes float inside the parent box instead of
the overall page.

Netscape Problems

Netscape and IE render the above box very differently. The most noticeable difference is
that Netscape "pads" the area between the box's border and background color. If we
removed the border, there would still be unwanted padding around the blue background.

There's no easy workaround for this and a nested <table> is often used instead of a nested
box to avoid the unwanted padding.

Another Netscape quirk is that nested boxes don't respond well to being sized or
positioned using percentages. That's why I used pixel dimensions and positioning for this
box. This varies, so don't be afraid to try percentages if you need them. If it just doesn't
work, you can always go back to pixels.

Finally, Netscape will completely lose all CSS positioning if the Netscape window is
resized. You've probably already noticed this with previous exercises. You have to reload
the page to get the CSS to display properly after Netscape window resizing.

Some viewers won't know to reload the page and think your page is just pure and simple
crap. To avoid this you can have a simple JavaScript automatically reload your page
whenever a viewer resizes the browser window.
I know this is jumping ahead a little, but you really need to know this if you plan to use
CSS positioning in your pages. Remember that this is only needed for Netscape. Here's
the code that you'll put in your <body> tag:

<body onResize="window.location='URL to your current page'">

I'm not going into any depth explaining this other than it works. Just type in "onResize"
like any other HTML attribute. Put the rest in double quotes. The URL will have to go in
single quotes because it's already nested in double quotes. The URL, of course, is the
URL to the page already loaded.

This forces a reload of the page when the browser's window is resized. There are other
JavaScript methods to do this, but this one is the most reliable I've found. The reload
usually only takes a split second because the page is being reloaded from the viewer's
browser's cache on their hard drive, not being downloaded again from your server.


Summary & Exercises

There's no big trick to nesting <div> boxes inside each other. Just code one box inside
another's code. They are styled separately using CSS for ID (a "#" before the ID's name).

Remember to use "position: relative;" for nested boxes so the browser knows to position
the nested box relative to the parent box, and not the overall page.

In some cases, no positioning is needed for nested <div>s. You can just let them render in
the "code order". Our example is coded this way. Since the nested box is coded before the
parent box's link content, it will appear at the top of the parent box without CSS

To practice this, make three or more boxes similar to our example. Put each item of
content in a separate nested box and give them all different background colors for a
"striped" parent box. Use <br>s to put the child boxes beneath each other if needed.

If you're really brave, try making columns with nested <div> boxes. The "float:" property
along with "position: relative" in the child boxes will float the nested boxes inside the
parent box. This doesn't work well in Netscape. You'll need to use pixel positioning
instead of "float:"

Now review some positioning by placing these parent boxes in a column to the left of the
page. Code the JavaScript reload script in your <body> tag to get familiar with it.

Second Advanced CSS Review

Review and test your skills before moving on to advanced layout techniques.
          You can position <div> boxes "absolutely" on a page by using "position:
absolute" in your CSS code. This would position the box relative to the browser screen
regardless of where the box's code is located in your HTML.

An absolutely positioned box can be placed with pixel precision on the screen using
"top:" and "left:" with pixel values. Percentage values can also be used.

           A box can also be positioned relatively by using "position: relative". This
would tell the browser to render the box according to its position in the HTML code
similar to an image or a <table>. Values for "top:" and "left:" would indicate coordinates
based on a parent element, like a table cell or parent <div> box -- not the overall browser

          When making several <div> boxes, you can style common elements among the
boxes, like a common background color, with CSS Custom Classes. Individual
differences, like positioning, can be styled with IDs.

        You can control how your boxes "overlap" by setting a "z-index:" value. This
value is any number like "2" or "10". The higher the number, the closer to the top the box
will appear. Negative numbers can be used. The highest "z-index:" will be on top, the
lowest will be on the bottom.

       You can make your boxes invisible by using "visibility: hidden;". To make it
appear again, use "visibility: visible;". This is the foundation for making pop up menus.

        You can nest <div> boxes inside each other. Generally when this is done, the
child boxes -- the ones that are nested -- are positioned relative to the parent box. There is
no limit to the depth of nesting.

CSS-P Layout

Lesson 9: Making A Left Column
How to use CSS-P to make a left column. Short discussion on CSS-P vs tabular

The CSS-P Layout Idea

For years tabular layout has dominated the Web. It still does. The reason for this is that
tables are consistently rendered by all browsers and that tables can be made to either an
absolute size, or a size relative to the viewer's monitor resolution. These are huge

Using CSS-P for laying out an entire page is catching on, however. CSS-P offers more
precision and flexibility in positioning elements. The problem is that Netscape and IE
render and position <div> boxes very differently. This becomes painfully apparent when
trying to make columns on a page with CSS-P.

In the next several tutorials, we'll be using the <div> boxes we're already familiar with
and using them to make columns and lay out a page in both browsers. Mind you, many of
the problems you come across laying out a page with CSS-P will be cross-browser issues
that can be solved by switching to tabular formatting.

A Default <div> Box Page

We'll start of with a simple page with one <div> box and some content, like this one.
Pretty simple, it's just a box and some content. Here's the code for the page:

<title>CSS-P Left Column</title>

<style type="text/css">

font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 600;
color: #000000;
margin-left: 20px;
margin-right: 20px;

#box1 {
width: 100px;
border: solid 3px #000000;
background-color: #ffff00;


<div id="box1">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br>
<a href="#">Link 4</a><br>



You should recognize everything above. The page's body has a single paragraph of
content and a <div> box with four dead links in it. The content paragraph is styled with
the "p" styling and the <div> is given an ID and styled with the "#box1" styling.

At this point we've got our first sample. Now we can move the content text up beside the
<div> so we have a column.

Position: Absolute;

To get the content beside the <div> instead of below it, we need to add "position:
absolute;" to "#box1's" styling. By default, "position: relative;" is applied to <div>s. This
means that they blend in with the content as coded.

Using "position: absolute;" removes "#box1" from the normal flow of rendering the code
and places it in an absolute position regardless of other content. In addition to "position:
absolute;", we need to add "top" and "left" CSS properties to "#box1" to position our box.
Here's the code I used:

#box 1{
position: absolute;
top: 10px;
left: 5px;
width: 100px;
border: solid 3px #000000;
background-color: #ffff00;

These few additions to "#box1's" style gives us this page. The first thing you'll notice is
the irritating overlapping of the box over the text. We'll deal with this next.
Using Content Margins

The final step to making a CSS-P left column is to add to the content's margin so the box
won't overlap it. Notice that the original left margin for "p" (the paragraph) is "margin-
left: 20px". It still is, but the 100px wide box overlaps some of the text.

To calculate the margin needed just add the width of the box to the normal margin you'd
like -- 120px in this case. Let's change this in our code:

font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 600;
color: #000000;
margin-left: 120px;
margin-right: 20px;

The large "margin-left" property clears the content away from the left column occupied
by the <div> box. If more content were added the box, it would grow downward in the
margin provided for it.

You'll probably have to play around with this margin to get the amount of space you'd
like. The same rules apply to using percentage values for margins, but it takes more trial
and error to get the percentages right. I'd always recommend an absolute width for the
box. That means a width value of a certain number of pixels.

Here's the final page with a left CSS-P column.

Review & Exercises

        CSS-P can be used to block off your page in boxes and to make columns similar
to tabular formatting. There are differences in how different browsers render boxes and
their positions, so CSS-P may not be appropriate for every site's layout.

       Begin making a left column by making the left column <div> box, adding the
box's contents, and absolutely positioning it.

       To pull non-<div>, regular content from beneath the box, add the box's width to
your regular "margin-left:" to provide enough clearance.
Practice making the left column page by remaking the page used in the last example. Add
more content to the <div> (between the <div> tags) to watch how the box grows

Lesson 10: Making A Relative CSS-P Layout

How to use CSS-P to layout to layout a "relative" page that's looks proportionately the
same at all resolutions. Like using a <table> with percentages, but with a lot of

Boxing Everything

In our previous lesson, we made a single column and used "margin:" to postion the
content. This has its limits and lacks the flexibility of a page that's fully laid out using

In this tutorial we'll be making this basic three column layout page. It's a pretty standard
layout. Two outside columns with a bigger "main content" column in the middle. There's
some space between the boxes, and between the outside boxes and the edge of the screen.
You can put any content into these boxes - even nested child boxes.

The advantages of these boxes over a three-column table are many. First, you can color
the borders individually. It's much easier to style the content (fonts, etc.).

It's also much more effecient. Table code would have to be placed on every page. CSS
Positioning and styling can be put on a single external stylesheet and linked to each page.
With a complex layout, this can dramatically reduce the size of your page files and
loading times. Finally, using an external stylesheet allows you to make changes over the
whole site by editing only the stylesheet - not each individual page.

Making Width & Left Calculations

The first rule of using CSS-P to layout a whole page is to put all content in <div>s. You
don't have to put the whitespace between the boxes in <div>s, but all content must be
placed in a box. Always code your layout before you add your content. This makes
debugging and adjusting the layout a breeze.

As you gain experience, you can jump right into coding these layouts, but to start out,
calculate your dimensions and positions first. The only major components of this style of
CSS-P layout are the "width:" and "left:" properties. That's all we use. No complex
margins or anything.

Begin making the example by drawing it out on paper. This is how you should always
begin a page's layout - with pen and paper. Draw out the boxes and any spaces between
them. Roughly draw their relative widths and positions just enough so you know which
boxes are bigger than others and where more or less whitespace is needed.
Next, you have to make some simple calculations. This is a relatively laid out page. We'll
be using percentage values for the width of the boxes ("width:") and their horizontal
positioning ("left:").

Don't get scared. All you have to know is that the page is 100% across - duh - and how to
add. Begin by making an estimate of how wide you want your main content box. I
originally wanted mine to have a width of 50% of the page.

Next, guess at how much whitespace you want between the boxes in a general sense. A
lot or a little. An average amount of whitespace, all totalled, is around 20% of the width
of the page. That's what I decided on.

Knowing that I want the main box to be 50% wide and have a total of 20% whitespace, I
know I have used 70% of the page's width. That only leaves me 30% for the remaining
boxes. That's an average of 15% each. Too small for my tastes - and, remember, this is
just a matter of taste. You size your boxes like you want to.

I decided to lower my main boxes width to 40% and keep the 20% of total whitespace.
This left me 40% for my other two boxes which I divided evenly - 20% each. That's

Now I know I've got 80% of my page's width in boxes and 20% in whitespace. Great.
That adds up to 100%. If you go over 100%, the viewer will have to sidescroll regardless
of the resolution they are using. Make sure your widths, including whitespace, add up to
100% and no more.

The last thing I have to calculate is how to divide the whitespace. Note that you don't
actually code the whitespace. You just use the calculations to position your boxes leaving
the whitespace.

I've got 20% of the page to use as whitespace, and I don't want big gaps on the outside.
Just enough to take the boxes off of the edge of the screen. I'll give each outside edge (the
far left and right) 2% whitespace each. That's a total of 4%. I still have 16% of the page
for whitespace between the boxes. There are two gaps between the three boxes. I'll split
the space evenly to make two 8% gaps between the main box and the outside boxes.

From left to right, my page's percentages will be:

2% whitespace on the far left - running total = 2%.

20% width of the first box - running total = 22% - box plus first whitespace.

8% whitespace - running total = 30%.

40% main box width - running total = 70%.
8% whitespace - running total = 78%.

20% right box - running total = 98%.

2% far right whitespace - running total = 100%.

Perfect! Of course you can add as many boxes and as much whitespace as you need. Just
remember that it has to add up to 100% and no more. And, just like with tabular
formatting, too many boxes crowd the page. The screen is only so wide.

Coding The Layout

With your percentages calculated, you're ready to code. Begin with a basic page with
three <div> boxes. Here's the code for the boxes in the example:


<div id="leftbox">

<div id="centerbox">

<div id="rightbox">


Now we're ready to style the boxes. This is what's in the <style> section of the example's
<head>. Generally, external stylesheets are used. I keep the styling in the head of my
examples so it's easier to find when you are viewing the source code. Lets begin with

position: absolute;
top: 10px;
left: 2%;
width: 20%;
height: 500px;
border: solid 2px #0000ff;

You should recognize the above. I've given the box a "position:" value of "absolute".
That will be shared by all of the boxes and is important. A value of "relative" would place
the boxes below one another. We want them side-by-side.
I know it sounds odd - coding a relative page with "position: absolute;", but that's what
works. The "position: relative;" declaration would be used for any sub-boxes nested
inside our layout boxes, but that's for later.

The next line sets the top at 10 pixels. This, too, is used on all boxes to bring them all up
to the same level.

The "left:" line is imporant. When laying out a page with CSS-P, "left:" and "width:" are
the primary concerns because they determine the horizontal dimensions of the page.
That's what we spent so much time calculating. Remember that we wanted 2%
whitespace on the outside of the page. Well, that's where the 2% value for this "left:"
comes from. The first box will be placed 2% (of the page's total width) inside the page.

The "width:" value is what we determined in our calculations. Twenty percent. The rest
of the code should be familiar to you. I had to add a "height:" because I don't have any
content coded in the boxes and they barely show up without either content or a height
value. Good layout debugging tip - borders and "height:"

Also note that I coded a border to define the box. For reasons that will become very clear
in the next lesson, it's better to use borders as opposed to a background color to visualize
the box. Overlapping is easier to detect. It's also important to note that a border is
included in a box's "width:". It does not add to the "width:" value. That makes life a lot

The style for the second box is exactly like the above box with two differences. It has a
width of 40% and its "left:" value must include the 2% initial whitespace, the 20% first
box width, and the 8% whitespace between the first and second box - that's a total of 30%
for "left:". Figure out your "left:"s ahead of time.

position: absolute;
top: 10px;
left: 30%;
width: 40%;
height: 500px;
border: solid 2px #ff0000;

See how the "left:" is calculated? It's 2% + 20% + 8% = 30%. That's why it's good to
draw out the page on paper and calculate your initial values beforehand. It makes the
coding go a lot quicker.

It's pretty easy to figure out "left:". Just add up all of the values preceding the left edge of
the box you're coding. Our last box will have to be placed past the main box and some
whitespace. From the left of the page that's: 2% + 20% + 8% + 40% + 8% = 78%. The
40% is the width of the central box and the 8% at the end is the space between the second
and third box. Here's the CSS for the third box.

position: absolute;
top: 10px;
left: 78%;
width: 20%;
height: 500px;
border: solid 2px #00ff00;

The above places our last box 78% across the page and gives it a width of 20%. This adds
up to 98% and leaves us a 2% gap between the right box and the edge of the screen. Just
as we planned!

Summary & Exercises

           Despite all of the bunk you hear about the complexities of CSS layout, it's
really pretty simple if you keep it simple. Use only "width:" and "left:" and you can make
any column configuration imaginable.

         Always draw a sketch of your page's layout on paper before you start coding.
Roughly approximate the relative size of boxes and the amount of whitespace desired.

       Use the sketch made above to begin making specific calculations. Follow this
procedure (select and copy this wisdom):

1) Set a value for your main content box.

2) Balance the remaining space between the remaining boxes and whitespace. The
amount of whitespace depends on if you want an "open" or "crowded" look. Whitespace
almost never exceeds 30% of the page's total width.

3) Set the width values for your remaining boxes.

4) Set the values for each individual instance of whitespace from left to right. Keep in
mind that in most cases, the space between boxes is equal. A little division may be
5) Calculate the "left:" value for each box taking into consideration both the width of
preceding boxes and whitespace.

        When initially styling your boxes, give them a height and a border to make them
easily visible. Use borders as opposed to a background color so that overlapping borders
become apparent.

        Make a five column page with all of the columns evenly sized and spaced with
the same small amount of whitespace between them. Now, make the "width:"s and
"left:"s total more than 100%. Note the sidescrolling required at all resolutions.
Sometimes this is necessary if a particularly wide image or other fixed-width content is
on the page. There are workarounds.

Lesson 11: Adjusting The Horizontal

How to tweak a CSS-P relative layout.

Widening A Box

We'll begin with the example from the previous lesson. Lets resize the central box.
Resizing a box's width is a common adjustment to a CSS-P layout. The problem is that
when we resize one box, everything else gets thrown off a bit.

To widen the box, we'll need to add to its "width:". Here's the code for the original box
with the original "width: 40%;":

position: absolute;
top: 10px;
left: 30%;
width: 40%;
height: 500px;
border: solid 2px #ff0000;

Lets add, say, 15% to the width of this box to bring it up to a total width of 55%:
position: absolute;
top: 10px;
left: 30%;
width: 55%;
height: 500px;
border: solid 2px #ff0000;


You notice that the new page has an overlap. The central box has expanded under the box
to the right. This is a fine example of why borders are more useful in debugging CSS-P
than using a background color. If we used a background color making each box a colored
block, the boxes would only appear to butt up against each other. In fact, we have

This often occurs when some fixed-size content, like an image or a long string with no
spaces like an URL, is placed in a box that is not wide enough to accept it. The content
will "bloat" the box, causing it to expand over or under its neighbor. We need to widen
the box enough to accept the fixed-size content.

Since we have a set a value for "left:", the box will expand to the right. After resizing the
box, we need to pull it further to the left and out from under its neighbor.

The "Half-Back" Technique

The "Half-Back" technique is the most used method for calculating how far back to the
left to move the box so it will again be centered between the two outside boxes. We
added 15% width to the box. If we pull the box back to the left one-half of that 15%
(7.5%), it will be re-centered:

position: absolute;
top: 10px;
left: 22.5%;
width: 55%;
height: 500px;
border: solid 2px #ff0000;
In the above code, we've subtracted 7.5% - half of the 15% added to the width - from the
"left:" property of the box. The "left:" was originally 30%. Subtracting 7.5% leaves us
with 22.5%. This re-centers the box as in this page.

It's important to note that you can use decimal percentages in CSS-P, but after 1/100th of
a percent, there's no noticeable change. One-tenth of a percent is as low as you're ever apt
to need to go.

The IE Glitch

If you're viewing the updated page in Microsoft Internet Explorer, it appears slightly to
the left of perfectly centered. Viewing in Opera and Netscape will show a perfectly
centered box.

The reason for this is a persistent right margin in IE that cannot be removed with CSS.
Try making a box with "width: 100%" and the problem will become tragically clear.

If you adjust the "left:" value just a few tenths of a percent to 23%, it will be centered in
IE, but off in Netscape and Opera.

There are workarounds for this. The most professional is to make two separate
stylesheets. One for IE and one for everyone else. JavaScript can be used to detect which
browser a viewer is using and load the appropriate stylesheet.

For now, just live with it. Always remember that the vast majority of viewers, for reasons
known only to them, use IE. If you have to go one way or the other, side with IE.

Summary & Exercises

         Expect to have to tweak your layout after the initial coding. Do this before you
add content. It makes things easier to find and reduces the number of factors that could be
screwing up your layout.

         The most common adjustment is to make one or more boxes wider and then re-
centering them in the remaining whitespace. Do this one box at a time using the
following procedure:

1) Widen the box by adding to its "width:".
2) Subtract one-half of the added "width:" from the box's "left:" value. If you added 10%
to "width:", you'd subtract 5% from "left:"

3) Tweak as needed for IE's right margin glitch.

           This same process works in reverse when you make a box narrower by reducing
it's "width:" value. Reduce the "width:" and then add half of the removed "width:" to the
"left:" value.

           Try resizing the boxes until the borders just meet without any overlap. You
should be able to see all borders. You will be using fractional percentages here more than
likely. It gets very percise. Good practice.

       Don't be afraid to play around with any of the CSS values to get things just like
you want it. Remember that once you get this right, you can apply it to the whole site. it
only has to be done once. Take your time and fiddle around.

Lesson 12: Adding Content And Other Adjustments

Adding content and padding to our layout boxes. How to adjust the boxes "height:" for
even bottoms. Also, how to make a footer <div> to keep your boxes from resting right on
the bottom of the page.

Adding Content

We'll begin by simply adding some content to our boxes as in example. I copied and
pasted some text from the Quake FAQ. You may want to add some "stub" data like this if
you are handcoding data. The reason is to set the individual box's padding and content
alignment before you start adding complex content (like nested <div>s). This makes it
easy to determine if a spacing problem is caused by your padding or your content.

After copying the content, I noticed that it appeared directly beside the borders giving the
box a crowded look. I added 5px of padding all around each box using:

padding: 5px;

The above was added to the styling of each box. You can use whatever value you need
and can add customized, individual padding to each side using:
padding-left: value;

padding-right: value;

padding-top: value;

padding-bottom: value;

Values can be in pixels (px) or a percentage (%). The percentage will refer to a
percentage of the <div> and not the whole page.

Adjusting Box Heights

Now that you've added some content, scroll down and look at your boxes. Egads! The
bottoms won't line up. The boxes have been stretched downward by the content. You'll
notice that in the example, I've removed all of the old "height: 400px;" declarations from
the styling. They wouldn't matter anyway. Content will over-ride the "height:" if there's
more content than the "height:" can contain.

In this case, each box has the same content. The narrower boxes had to expand further
down than the central box. In practice, they'll vary a lot due to varying content. This is
something most people want to fix. They want the boxes to stretch to the bottom of the
page evenly.

The best way to do this is to set a "height:" in pixels that will cover even the longest box,
and put this value in the styling of all of the boxes. That will make them all of the same
height. The height selected should be the height of the longest box and is generally in the
thousands of pixels.

By viewing my page in a pixel grid (a feature of my code editor) I see that the two
outside boxes both stretch to nearly 4300 pixels down. I decided to round this to 4500
pixels and added that to my styling producing this page.

You may ask why you just couldn't use "height: 100%". This doesn't work because the
"height:" refers to the <div>, not to the overall page. To automatically size the boxes,
you'll have to use JavaScript or another programming/scripting language. This will detect
the longest box and stretch the others to the longest box's height.

For now, using only CSS, you should make sure you leave plenty of height for your
longest, most content filled boxes, and some "padding-bottom:". Be generous here and
expect to have to play with the "height:" to get it right.

If you are using an external stylesheet for a whole site, you'll have to keep in mind the
largest content on the whole site. If you just have one or two pages with an extraordinary
large amount of content, you can over-ride the external stylesheet's "height:"s by coding
"height:"s as needed in the <head> of those pages. The rest of the external stylesheet
(horizontal layout, colors, etc.) will still apply.

Keep in mind that you won't have to adjust "height:" at all if your boxes don't have
borders or backgrounds - they're just used for positioning. There would be no visible
indication that the boxes were of different heights.

Using A "Footer" <div>

After you set your heights, you're probably wondering how to get the boxes from going
down to the absolute bottom of the page. No matter what height they have, they'll define
the bottom of the page and the bottom borders will rest right on the bottom of the page.
There are a couple of ways to deal with this.

If you are not using borders or a background in the box, you can just add "padding-
bottom:" to the bottom of each box. This pulls the content from the bottom of the page
and there's no visible indication of the bottom of the box.

In cases where the borders or background are visible and you want to push all of your
boxes up a few pixels, I suggest using a "footer" <div>. This is just another box placed
below the others that has a "height:" that makes the padding. this box won't have any
borders, background, or content. Well, some people use these to put in copyright content
and such.

I added a footer <div> to this page. Scroll to the bottom and you'll see there's some
whitespace between the bottom of the boxes and the bottom of the page. This space was
made with a footer <div>.

Start making a footer <div> by adding a simple <div> to the rest in your page's <body>.
Here's the one I coded in the example:

<div id="footer"></div>

I added this blank <div> below the code for the others, but you can really place this code
anywhere in the <body> you'd like. This is because we're using "position: absolute" and
the order in which the boxes are coded is irrelavant.

I gave this box an ID of "footer". You can use whatever ID name you want. Then I styled
this "footer" with two important things in mind. It's "top:" position to place it below the
other boxes, and it's "height:" which becomes the amount of whitespace at the bottom of
the page.

#footer {
position: absolute;
top: 4500px;
left: 0px;
width: 100%;
height: 50px;

Notice that I placed the box at the bottom of the other boxes using "top: 4500px;".
Remember that's the height I decided on for the content boxes. I also used 50px of
"height:" to add 50 pixels of whitespace at the bottom of the page. You can add more or
less as needed.

I had the box run 100% across the page ("width:"). The IE glitch won't effect this box
because it has no visible elements.

Now were done! We've laid out a page in CSS-P that will look proportionally the same at
all screen resolutions. It looks much like a <table> using percentages, but has many
advantages over the <table>:

1) It requires a lot less code than <table> tags.

2) The styling can be put on a single external stylesheet and applied to a whole site. This
makes for easier editing, too.

3) When you learn JavaScript, you'll find it much, much easier to code dynamic effects in
each box.

Summary & Exercises

        It's a good idea to use some "stub" content instead of your regular content to set
your initial padding.

       You'll need to set the "height:" of each box to a height a little greater than the
longest box. Keep in mind to round this up a good bit so the boxes will be long enough to
hold the largest amount of required content.

       Make some whitespace below the boxes with a footer <div>. Make sure to place
this <div> below all of the boxes by setting its "top:" to a value at or greater than the
regular boxes' "height:". The "height:" of the footer <div> will be the amount of space
between the bottom of the regular boxes and the bottom of the page.
        Below is an outline of the process of using CSS-P to layout a relatively sized

   Draw out your page's layout on paper. Calculate the boxes' "width:", "left:" and the
distribution of whitespace.

  Code your boxes with a colored border and some "height:" to make them visible.
Using a background color will prevent you from seeing some overlapping problems.

   Adjust the widths of boxes and whitespace keeping an eye on overlapping.

   Add some content and adjust your "padding:" on all sides. Now's the time to add the
final borders and backgrounds, too.

   Adjust the height of your boxes.

   Add a footer <div> if you want whitespace between the bottom of the boxes and the
bottom of the page.

Now all that's left is to copy and paste your style rules to an external stylesheet and link it
to your pages!

Lesson 13: Floating Boxes - Making A Right Column

Using CSS's "float:" property to make a right column on your pages.

Why Float?

What we'll be coding this sample during this tutorial. It makes a simple right column by
using CSS's "float:" property.

When making a right column, "left:" becomes a little irrelavant. Think about it. How far
right do you want to go? A column positioned for a 1024x768 monitor will cause side-
scrolling (a near sin) on a more typical 800x600 one. Or, worse, it might overlap content.

When positioning a left column, this wasn't a problem because top and left are at 0 pixels
at all resolutions. We don't have this advantage when making a column to the right of the

Using "float: right;"
To make a column that will automatically find the right edge of the screen, we must
"float" it, as opposed to positioning it with "top:" and "left:". Here's how we float a <div>
column to the right:

position: relative;
float: right;
width: 100px;
border: solid 3px #000000;
background-color: #ffff00;

What's important to note in this box's styling is that we used the default "relative" value
for "position:", as well as, the "float: right;" property/value pair. This is what puts the box
to the right edge of the screen regardless of the screen's resolution.

The Right Content Margin

Using the "float:" property to position a <div> works a little differently than absolute
positioning. For one thing, floated items works a lot like positioned <img>s. They will
not overlap the content's text, but tend to bump right up against the content.

Secondly, the space between the content and the <div> can be trickier to figure out.
Floating keeps the box from overlapping the text like with our absolutely positioned left
box. But, content margins can still be a problem.

Often the content will bump right up against the <div>, and go beneath the <div> column
if there is enough content. To take care of this we need to adjust the content's "margin-
right:" to allow for the <div>.

This is similar to what we did with the left aligned column. Keep in mind that we aren't
sure how many pixels to the right the <div> box is, so a pixel margin won't give a
consistent spacing at all resolutions.

We can get around this by using a percentage value for the content's "margin-right:"

font-family: Times New Roman, serif;
font-size: 15pt;
font-weight: 600;
color: #000000;
margin-left: 20px;
margin-right: 20%;
By using a percentage, the same relative amount of space will between the content and
the <div>. You may have to play around with the actual percentage, but try to get roughly
the same margin between the content and the <div> as you have on the left between the
content and screen's edge. This makes the page look more esthetically balanced.

To maintain this balance, you'll probably want to use a percentage value for the content's
"margin-left:" as well. These values may not be equal, but should provide an equal
amount of white space on each side of the content. By using percentages, the relative
white space at one resolution will be the same in another. You also don't run the same
risk of your margins causing side-scrolling at lower resolutions.

After changing "position:" to "relative" and adding "float: right" to the box's styling, the
box will be to the right. Use a percentage value in the content's "margin-right:" to add
some space between the content and the box, and you're all done.

Summary & Exercises

      When putting a column to the right side of the page with CSS-P, position the box
with "position: relative;" and "float: right;". This will float the <div> to the right edge of
the screen regardless of the viewer's screen resolution.

     Even though floating will prevent the box from overlapping the content, a right
margin will generally be needed to add space between the content and the box and to
keep the text from flowing under the <div> box. A percentage value for the content's
"margin-right:" is generally used for this.

     You should try to get a balanced look with the spaces on both sides of the content
being equal. If you use a percentage value for one margin, you'll need to use a percentage
value for the other. These percentages may not be the same, but they should provide the
same padding at the left and right of the content.

Now, make a page with a longer right column using CSS-P. Leave out the content
margins and see what you get. Try floating a box with "position: absolute;" instead of

Try floating boxes to the left and you'll see why it's easier to use absolute positioning for
left columns. See if you can figure out how to get both a left and right column (next

Lesson 14: Making Two Columns Using "float:"
How to incorportate both of the columns above on one page.

Making The Left Column

Putting two columns at the left and right of a page is pretty simple once you learn the
differences between using absolute positioning to place the left column as opposed to the
relative positioning used to float the right one. Start making a two-column page by
placing the left column. That would be a page like you made in Lesson 09.

Make any margin between the content and the box you'd like for now. We'll tweak the
content margins last.

Floating The Right Column

Adding the right column is merely a matter of adding a second <div> box, styling, and
floating it to the right. Here's the box I made for the example.

<div id="box2">

<a href="#">Link #1><br><br>
<a href="#">Link #2><br><br>
<a href="#">Link #3><br><br>
<a href="#">Link #4><br><br>


The only thing to note here is that I've given this second <div> a unique ID -- "box2" -- to
differentiate if from "box1" in the CSS styling and positioning. Below is the CSS I used
to style and position the "box2".

#box2 {
position: relative;
float: right;
width: 100px;
border: solid 3px #ff0000;
background-color: #00ff00;

The important positioning elements in the above styling are "position: relative;" and
"float: right;". That's really all you need to position the <div>.

Another important issue is where the box is placed in the code. This is because the right
box is positioned relatively. It will be rendered according to its position in the flow of the
code like any other block element. It must be coded before the content it is to float
around. If it were coded after the content, it would appear below the paragraph and to the
right. Give this a try and see for yourself.
Remember that floating works a lot like positioning <img>s. You need to code the
<div>s first and the content afterwards when using relative positioning and floating.

Tweaking The Margins

To wrap up our simple two-column example, we need to style the content's margins to
provide an equal amount of space between the left and right boxes. To keep this space
proportional at all screen resolutions, I'll be using percentages to set both margins for the

Begin by finding a percentage that provides the desired margin for the right box. I use
trial and error. I eyeballed the page and began with a 10% margin. That wasn't enough, so
I went with 20%. That worked better so I stuck with it.

I then used the 20% value to set the left margin. I did this because the boxes were of the
same width and I wanted the same amount of space. It worked great, so the final margins
for the paragraph ended up being:

font-family: Times New Roman, serif;
font-size: 12pt;
font-weight: 600;
color: #000000;
margin-left: 20%;
margin-right: 20%;

In many cases, for various reasons, the margins will often have different percentage
values. Just make sure they look balanced when rendered.

You can set absolute margins, but this often causes too much right margin at high
resolutions and too little right margin at low resolutions. You can also set an absolute
pixel margin for the left margin and a percentage value for the right. In this case, the right
margin will rarely be the same width as the left one and the content will have an
unbalanced, or uneven, look. Generally a balanced appearance is the goal, percentage
values are the best way to achieve this.

Putting The Content In A <div>

If you view the example in Netscape, you'll notice that there's a lot of whitespace above
the content's text. To get around this we can put our content in its own <div> box and
position it. We'll be covering this in the next lesson. In practice, most CSS-P page place
everything in a <div> box if there is more than one simple column.

Summary & Exercises
        Begin making a two-column page with CSS-P by making and placing the left
column with absolute positioning. Next make the right column with relative positioning
and "float: right;". Finally, tweak the margins.

       When making your margins, go for an even amount of white space on both sides
of your content. To maintain these proportions throughout a range of screen resolutions,
use percentage values for both left and right content margins.

Try adding even more columns. Do this by coding the <div>s before the content. Use
absolute positioning to place columns to the left of the content. Use "float: right;" for the
right columns. Notice the order that the right columns float themselves. Change their
position by changing the order in which they were coded.

Lesson 15: Cross-Browser Issues

Some quick work arounds for the differences in IE and Netscape renderings of CSS-P.

Relative Positioning Problems

To make a page look relatively the same at all screen resolutions, we need to use relative
positioning. This poses several problems as IE and Netscape use different points of
reference when calculating relative values.

Look at this page in both IE and Netscape. You'll notice a big difference between the
right margins. In this sample, the content is placed in its own <div> called "box3". I did
this to eliminate the whitespace above the text seen in our previous example. It pulls the
text to the top of the screen in both browsers, but causes left/right margin problems of its

This is due to how Netscape and IE calculate "relative" values when positioning <div>s.
IE calculates relative positioning from the edge of the screen. Netscape calculates the
positioning relative to the floated <div> to the right. There aren't any easy answers to this

Using different points to calculate relative positioning makes it difficult to code one style
that will render the same in both browsers. Below are some of the workarounds available.

Some Quickies

Here are some of the quick workarounds that can make pages look good in all browsers.
First off remember that there are two ways to make whitespace besides using CSS-P:
margins and padding. Both are supported by IE and Netscape.
In our early examples, we used margins to space our content away from our <div> boxes.
Padding works similiarly inside <div>s as well as margins. Don't forget that margins and
padding work vertically ("margin-top:") as well as horizontally.

Using Absolute Positioning

Another solution to the positioning problem is to put everything in a <div> boxes and
position them absolutely on the screen. Just give up on trying to make the page look
perfect at all resolutions. High-res monitors will have some blank space and lo-res
monitors will require some side-scrolling.

This isn't really a solution, but it's one of the better ideas out there. Absolutely sized
pages solve a world of cross-browser and multiple resolution issues that we'll be coming
across more and more as we progress in CSS-P.

In pure CSS-P absolute positioning means that the "top:", "left:", and "width:" properties
are always coded with absolute pixel values as opposed to percentages.

Using A Layout Table

You can get the best of both worlds in both browsers by making an overall layout table,
that both browsers will render appropriately. Then, put your <div>s in the appropriate
table cells. You might choose to use tabular formatting altogether.

The biggest advantage of <div> boxes over <table>s is that <div> boxes can be easily
accessed with JavaScript to make all sorts of dynamic effects. Tables are far more limited

So, why not consider getting the best of both worlds by letting a table define the relative
layout and <div>s inside the table's cells will hold the content. That way the content can
be made dynamic with JavaScript. As you learn JavaScript, you'll see why you don't want
to give up on its neat effects.

Separate Stylesheets

An increasingly popular method of dealing with CSS/cross-browser problems is to code a
separate stylesheet for each browser. This usually means one for IE and one for everyone

As you'll learn in studying JavaScript, you can detect which browser the viewer is using
and direct it to the appropriate .css file. This solution has the advantage of being lean
(only one extra sylesheet in most cases) and effective. It also makes it easier to update
your style as new support and browsers come along.

Nested <div>s
Nesting <div> boxes inside one another can also save the day with cross-browser CSS-P.
A parent <div> box can be used to position any number of child boxes. We'll be studying
this in the next series of lessons.

Summary & Exercises

There is a world of cross-browser compatibility issues and most of them center around
CSS support. Currently IE holds the lead, but Netscape 6+ is catching up. Not only are
there issues of basic support, but more frequent issues of the way the support is rendered.

These differences between browsers has held back CSS-P, but the sleeker, simpler, more
precise CSS-P will eventually prevail. It's important to understand and practice CSS-P
even if your pages use tabular formatting. It's the future of page layout.

There are countless workarounds for cross-browser problems. Most of these problems
relate to positioning <div>s. The three most popular workarounds involve absolutely
sizing and positioning your boxes, putting your boxes in a good ol' reliable layout table,
and coding separate stylesheets for IE and Netscape and using JavaScript to point the
viewer to the appropriate stylesheet.

Oh, and don't forget that most page layouts rarely use more than a couple of columns in
addition to the main content. Both IE and Netscape do a good job of rendering this simple
scheme as we've already seen.

For practice, use different methods to make our current practice page look the same in
both browsers. Try using various margins and padding for the <div>s and content. Try
tables and you'll see why putting <div>s in table cells is so popular. Make separate
stylesheets for Netscape and IE. Don't worry about JavaScript browser detection yet. Just
make the different stylings paying attention to the differences and problems points.

Lesson 16: Using Layout <div>s

How to nest boxes inside parent boxes that are used to position all of them at once.

Getting Started

In this lesson, we'll learn how to make this page employing several <div> boxes laid out
by being nested in "parent" <div>s.

Begin by making one of the colored boxes. You'll note a lot of <div> tags used in each
individual box. It might pay to review Lesson 8. Here's the HTML code for one box:

<div class="boxes">
<div align="center">
<div class="title">BOX 1</div>
<a href="#">Link #1</a><br><br>
<a href="#">Link #2</a><br><br>
<a href="#">Link #3>/a><br><br>

The above code makes one of the colored boxes in the example. Take a good look at how
many nested boxes are used to make only one of the colored boxes. It takes three.

The first box is the one given the CLASS "boxes". This is the overall frame for an
individual box. The second box is given no CLASS, ID, or NAME. It's only used to
center the text because Netscape and IE don't render the "text-align: center" declaration
the same way. Netscape tends to want to center the whole table, not just the text in the

Finally, the there's a third box CLASSed as "title". This is the red box at the top. All of
the above are positioned relatively with no "float:" or other positioning specified. The
only thing styled in these boxes are their appearance and "position: relative".

Make one of these boxes and then copy the code to make three for the next stage.

The Left Column

If you make three of the above boxes and view them in a browser, you'll see that the
boxes render on top of one another. That is because a <div> causes a line break if
positioned relatively. To put a little space between the top and bottoms of the boxes, use
simple HTML <br> tags after the closing </div> tags. One should do it.

If you code some content after the box's code, it will be presented below the boxes, not
beside them. We need to make a column out of the boxes like we did when we made
simpler columns in Lesson 09. To keep from having to code positions for each box, make
a single <div> that surrounds all of the boxes.

Here's an example of what we're doing. You'll notice in the code that there's a <div
id="parentbox">. This box contains all of the colored boxes and it's this "parentbox" that
will be used to position all of the child boxes at once using the styling below:

#parentbox {
position: absolute;
top: 5px;
left: 5px;

Nothing to it. Just surround the little boxes with a parent box and then position the parent
box. The child boxes will be positioned relative to this parent box.
To make the column, we did the same thing we did in Lesson 9 -- we gave the parent box
an absolute position. The child boxes will line up according to their parent box. This
really isn't all that different from nested <tables>.

Don't forget to set a "margin-left:" for the content ("p" element in this case) so the content
will clear the boxes.

The Right Column

To move the column to the right, like this, we just style the "parentbox's" positioning like
we've previously done for a right column:

#parentbox {
position: relative;
float: right;

Once the box is floated, you need to make a margin for your text content that will clear
the boxes on the right side. Using a parent, layout box is much simpler than trying to float
all of the individual boxes and getting them to line up vertically. Try doing this without a
parent <div> and you'll see what I mean. The colored boxes want to line up side-by-side
when floated.

Dual Columns

Here's the final example we'll code. It has both a left and right column of boxes. This is
done by making two sets of colored boxes and nesting them in parent tags with different
IDs. The different IDs are needed so we can tell one from the other in our CSS

Absolutely position the left column as we did previously. Now, float the right column.
Tweak your margins and you're done. It's important to remember to style the child boxes
with "position: relative" so they'll position themselves relative to their parent box and not
the whole screen.

Summary & Exercises

You'll notice the same problems here that you did with the previous exercises. The only
real difference is that you've made one set of boxes for display only and another set for
positioning them. Practice coding dual column multiple box pages a couple of times
before jumping into the Advanced CSS Layout Exam.

Lesson 17: Handling Excess Content With "Overflow:"

Using the various values for the "overflow:" property to clip, scroll, or display any
content that doesn't quite fit in the space you want it to.
The Problem Of Large Content

Sometimes you just have more content than you have space. Say you have a large map or
image, but can only allow a small space in which to view it. What do you do.

Frames and inline frames have been an answer. But, CSS provides many simple answers
from two-dimensional scrolling to simple clipping. They all deal with a little-used CSS
property called "overflow:".

The "overflow:" property controls what happens to excess content when it won't fit into
it's assigned <div>. By default, the <div> will expand to include all of the content nested
in it. There are several other options.

Overflow Values

Lets begin studying "overflow:" by getting a picture like the one below:

The above is simply an <img> centered by being put in a <div>. There is no styling for
the <div>:
<div align="center" id="box">
<img src="frightenedkitty.jpg">

Now lets begin styling the above image. The image is 450x402 pixels. Lets say I want to
put it in a 200x200 pixel box. That will leave a lot of content left over. I can handle this
by clipping the excess content with "overflow: hidden". Here's the styling code:

width: 200px;
height: 200px;
overflow: hidden;

And, here's what the effect would be (note that I have to use different IDs for each

A very popular effect is to make the box scroll. This is particularly helpful for maps as it
produces smooth scrolling over a large image. Here's the code that would allow us to
scroll over our kitty:

width: 200px;
height: 200px;
overflow: scroll;

Below is the effect:
Note that the scrollbars are styled according to the window's styling. Black in this case.
This effect has innumerable uses as it can replace the inline frame in most cases. Isn't it
unbelievable how easy this scrolling effect is? And, it works in IE, Netscape, and Opera.

I've used these CSS scrolling boxes to put forms in a small corner of a page. All this
works with data other than images. I'm just using an image as an example.

There are a couple of other values. The "auto" value will add scrollbars only when they
are needed. This can be handy for boxes holding slideshows where only a few images
really need the scrollbars. For images that fit, the scrollbars disappear. This value is
written "overflow: auto;".

Another value is "inherit". This causes the <div> to inherit dimensions and overflow
values from the parent element - a box it might be nested in.

Finally, there is the default value of "visible". This has the <div> resize itself to contain
all of the content and make it visible: "overflow: visible;" . It's sort of the opposite of
"overflow: hidden;".

Summary & Exercises
        Get a large and a small image and make a simple box styled with dimensions and
"overflow:" . Try out all of the values. Note how each value works. They are all used

CSS-P Layout Exam

Make the page linked above to test your skills at using pure CSS-P to layout a simple two
column page with multiple <div> boxes.

       A <div> box is merely some content coded between <div> and >/div> tags. The
<div> can then be ID'd or CLASSed, and styled a variety of ways. In other words, the
content is "boxed" in the <div>.

Netscape started this idea with the <layer> tag. Both Netscape and IE support the <div>
tag, but only Netscape supports <layer>s. Therefore, it's a good idea to use <div>s so
both browsers can render them.

      We can put a border around our boxes with CSS's "border:" property. Netscape
requires a "border:" property be set before it fully fills in a box's background. You can set
a border's size, color, and type. IE supports more types than Netscape.

       We can add a background color or image to our box with "background-color:" and
"background-image:" respectively. Works in both browsers.

      We can size our boxes with the "width:" and "height:" properties. We can use either
pixel or percentage values. Netscape generally ignores the "height:" property and sizes
boxes according to the width and content.

     Add padding between the edge of your boxes and content using the "padding:"
property. Check your box's content margins first. They may already provide enough

After reviewing the above stuff, try making this page before moving on. Do not worry
about the boxes' position on the page. Only the styling.

Shared By: