CSS Exercise: Experimenting with two Simple Little Layer

Back to Computer Tips

Back to CSS Syllabus

The Computer Gal on Facebook
Ask to receive tips and handouts to your email.

Purpose: to visualize how a layer works

To make this exercise easier to do, we will use an internal style sheet
Of course, this is the NOT best practices of external style sheets.
Do This:
- Create a new, basic HTML page in Dreamweaver.
- Save the file as PracticeFiles folder/CSSPositioning.html
Start your styles
Do This:
In the <head>, enter
   <style type="text/css">
      
   </style>
Comments
- This is how you start internal styles.
- All the internal styles should be inside theses tags.
Create a style for an outer layer
Enter This
   #OuterLayer
   {
       background: #990000; - or choose a color you like!
   }
Comments:
- All the rest of the style information will be between the .
- That is a comment.
- Styles are in comments so they will be ignored by old browsers, which cannot interpret styles correctly.
- The background color will help you see the layer.
- A "style" is the description of a "layer."
Create a style for an inner layer
Enter This:
  #InnerLayer
  {
      background: #009900; - or choose a second color you like!
  }
Comments:
- This code goes below the code for the OuterLayer, but inside the code created in #2.
Insert two layers on the page, using the styles you just created
Enter the following after the <body> tag:
<div id="OuterLayer"></div>
<div id="InnerLayer"></div>

What do the layers look like? Why is that (Hint: remember what happened in the One Little CSS Layer exercise)
Add a border property to each layer
border: 1px solid #000000;
How many layers do you see?
Add a height property to each layer
height: 50px;

Why isn't one layer inside the other layer?
Put the Inner Layer inside the Outer Layer
   <div id="OuterLayer">
      <div id="InnerLayer"></div>
   </div>
What do you see?
Reduce the size of the inner layer
height: 20px;
How is the inner layer positioned?
Increase the height of the inner layer to 100px
height: 100px;
Add padding to the Outer Layer
padding: 10px;

Look at the page in IE6, IE7 and Firefox. Are they different?
Change the position of the inner layer to absolute
  position: absolute:
  top: 20px;
  left: 0px;

What happened?
Add positioning to the Outer Layer
position: absolute;

Look at the page in IE6, IE7 and Firefox. Are they different?
Change the positioning and the top

Notice that after we placed the layers on the page, we only changed the styles!