CSS Exercise: Experimenting with a Simple Little Layer

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.
Create a new, basic HTML page in Dreamweaver.

Start your styles .
In the <head>, type
  <style type="text/css">
    
  </style>
You have to do this because we are creating internal styles.

Create the layer style.
All the rest of the style information will be between the . That is a comment.
Enter:
  #TestLayer
  {
      border: 1px solid #000000;
  }

Insert a layer, using the style you just created.
Enter the following after the <body> tag:
<div id="TestLayer"></div>

What does the layer look like?
Notice that the layer stretches all the way across the page. A div takes up a whole line by default. That means that you can make it work differently, but you have to code it to act differently.
Notice that the layer has no specific height.

Add width property to the layer.
Enter the following before the border property:
width: 200px;

There is no computer reason to put the width property before the border property, but if you keep your properties in grouping order, you will find it easier to maintain your pages. Example, put all your sizing properties above visuals, such as borders.

Change the size to 8000px. Yes, that's eight thousand!

Try 200 em.

Try 20 cm.

Try adding two width properties, one above and one below the border property.
Set them to different amounts.
What happens?

Add height property to the layer.
Enter the following before the border property:
height: 200px;