CSS #3

The Box Model

Sample file [09_border.html]

• border-style property: specifies type of border.
  
  
  • value: none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit
  
  
• border-width property: specifies how wide the border around the box should be
  
  
• border-color property: specifies the color
  
  

Or if you choose, you can use a shortcut property:

• selector { border: style width color;}

body {
  border-style: solid; /* none, dotted, dashed, solid, double, groove, ridge, inset, outset, and, inherit */
  border-width: 1px;
  border-color: blue;
}

div {
  border: solid 3px red;
}

Sample file [09_border.html]

• Margin: white space outside the border
• Padding: white space inside the border

body{
  border: solid 1px blue;
  padding: 5px;
  margin: 10px;
}

p {
  border: dashed 2px;
  background: gray;
  padding: 10px;
  margin: 15px;
}

Options for Margins and Padding

p {
 margin: 10px  /* 10px around top, right, bottom, left */
}

div {
 margin: 10px  20px /* 10px top and bottom, 20px right and left */
}

body {
 margin: 10px 20px 30px 40px /* 10px top, 20px right, 30px bottom, 40px left in clockwise order */ 
}


img {
  margin-top: 10px;
  margin-left: 5px;
}

Sample file [09_border.html]

• Block-level elements (eg. div) have line-breaks before and after the element and are wide as the container you place them in, and you can modify its height and width using CSS.
  
  
• Inline elements: (eg. span) are wide as they need to be to display their contents. It does not have line-breaks before or after the element
  
  

You can change whether an element is block or inline by using the "display" property with three possible properties (block, inline, and none). List items by default is a block element, and hence every list element is listed in a new line like this:

  item 1
  item 2
  item 3
  item 4

If you want them to appear inline:

li {
     display: inline;
}

and it will be displayed like this:

  item 1   item 2   item 3   item 4 

To control the size of the block, use width and height properties.

div {
   width: 80%;      /* 80% of browser width */
   height: 500px;  /* 500px tall */
}

If the contents are larger than the box:

div {
     width: 80%
     height: 500px;
     overflow: hidden; /* visible, hidden, scroll, auto */
}

height: 100%; 

Sample file [09_float.html]

Block-level elements flow down the page from top to bottom. By using the float property you can modify the placement. You can float the content as much as possible to the left or to the right, and have other content wrap around it. The options for float are left, right, and none.

#art230{
 width: 300px;
 float: right;
}

A related property is clear. The clear property cancels any prior float that has been set. The options for clear are none, left, right, and both.

#midpoint{
 clear: both;
}

When using float, make sure that the width of the content you are trying to float is less than the width of the browser or you will not see any effect.

Sample file [10_positioning.html], [11_content.html]

• position property
  
  
  • static value: default (everything flows down the page from left to right, top to bottom)
  • relative value: positions the element relative to it's normal position
  • absolute value: locates the elements where you specify
  • fixed value: fixes the element in place (may not work on all browsers)

Used in together with the top, left, bottom, and right properties that specify a corner

 /* this will be placed 10px, 100px from the top of the browser window */
.intro {
     position: absolute;
     top: 10px;
     left: 100px;
}

/* this will be placed 20px upward relative whhere it would be otherwise */
.abstract {
     position: relative;
     top: -20px;
}