|
|
Line 1: |
Line 1: |
| [[Category:AIM]] | | [[Category:AIM]] |
| | | |
− | ==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
| |
| | | |
| | | |