CSS #3

Page Layout with CSS

The Box Model

Notes

Borders

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;
}

Notes

Margins and Padding

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;
}

Notes

Block level and Inline elements

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

Notes

Width/Height of Block-level elements

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 */
}

The case of

height: 100%;

For some reason (because we scroll up & down?), height needs to be explicitly specified. If not, it will be calculated with repsect to the element that it is contained in. Ultimately somewhere along the line, you need to specify the height of the parent element. [see more here]

Workaround:

You would think that div with 100% height and width would turn the whole thing magenta, but it won't unless you tell html and body to be 100% as well

Notes

Positioning with the Position Property

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 even if the page is scrolled (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;
}

Notes

Using Float to Position Block Level Elements

CSS Layout using float @ w3schools

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.

Notes

More CSS Layout options

CSS Flexbot [@w3schools]
CSS Grid Layout Module [@wschools]

Notes