Difference between revisions of "AIM Class5"

Revision as of 21:20, 30 June 2006

css box model

Review of terms

A style rule indicates first of all what the selector (thing that will be altered) is. In the following example, the selector is p (paragraph element).

p { color: #cccccc; }

The declaration is contained within the curly braces. In the example above, it is just one line - color: #cccccc;

The declaration lines are made up of a property, and a value. In the example above, the property is color, and the value is #cccccc.

Box Model

Elements have a content area surrounded by "boxes" that describe the padding, border, and margin properties. So a cross section looks like this: margin border padding content padding border margin

With the margin around the outside, then the border, then padding, and the content in the center. These properties surround the content on all 4 sides, though you can alter the values so that the "box" doesn't have to be equal on all sides - you can even make some of the sides "invisible" (we did a preview of this last class when we made links that had borders on only 2 sides). Look at the W3 CSS specification's Formatting Model section for a visual example and some example code.

Some style examples: <style type="text/css">

 .box1 { 
   background: #990000; 
   margin: 20;      
   padding: 30;
   border: #ffffff;
 }
 #box2 {
   position: absolute;
   left:80%;
   width:120%;
   top:200px;
   color: #ffffff;    
   background: #ff3300; 
 

</style>

Note that one is a class, and the other an id.

Class Assignment

Create an experimental CSS file that does the following:

         * Add a border to an element that only shows on two sides
         * Add a dashed border to an element
         * Create an element with extreme padding

Homework

Reading