GatheringStorms.org

Introduction to CSS Part the second.

Cascading Style Sheets — The Box Model

Everything in CSS is treated as a rectangular box, even inline elements (or at least they are a series of boxes). This is easy to demonstrate. Add some code like this to your css/html: span.example { background-color: #ff0000; color: #0000ff; } Some text <span class="example">containing some more</span> text.
It should produce this: some text containing some more text. Spot the box. Note, howver from here on in we are concerned with block level elements like h1, p and most especially div.

The best way to understand the basic of the box model is to look at a picture. The best one I have seen is at http://www.hicksdesign.co.uk/boxmodel/. It also inspired this fancy interactive 3d model. Go look at them NOW and then come back here. Get it? Cool.

Here is the diagram for reference (released under a Creative Commons licence, © Hicksdesign 2002-11).

Block level element

paragraph headings divs etc. They default to a height of zero and a width of 100% ofthe parent element, or something like it. It will be affected by any padding set on the parent. Also if you set an explicit width padding will push it beyond where it would have gone otherwise (hopefully this will make sense later).

Content area

The area that contains any child elements (e.g. text). Note when you set the width of an element you are setting the width of the content area. Note how the text lines up at 180 px below (the green line is a div with width=180px set).

Here is some text and xx here is some more text.

Background

The background (image or color) goes into a area = width/height + padding.

Border

The border sits at width/height + padding.

Margins

Margins sit outside the border line (think of no border as a 0px wide line). They push other elements away. Margins are collapsing so two elements with a margin of 40px will have a magin of only 40px, not 80px when they touch — only the larger applies. Used as

margin-top or

margin: 0 0 0 0

Padding

Padding goes inside the border and pushes the content area inward

Total Width

total width = width + padding + border width + margin. (ditto for height).

Attributes

Dimensions

width, height, padding and margin can all be set with relative or absolutes values. e.g. px or %.

Position

Position is one of static, fixed, relative or absolute. Static is the default.

• postion:static Static blocks are flowed normally: e.g. in the order they appear. They are not effected by any other positional parameters e,g. top etc
• postion:relative Elements wth position: realtive are dispalced from their normal postion by the about defined by top bottom left right. They are commonely used to set containig blocks.
• postion:absolute Sets a postion relative to its containing block if that block is not static. Often this is the html block so you can use this to postion things on a fixed position in a page (or other containing block).background-postionworks in the same way so you can use it to postion a background image (the rest will be filled with background-color.
• postion:fixed. This fix a position relative to the viewport i.e. browser window. Elements with this never scroll but stay in place. Often used for headers etc. background-attachment: fixed works in the same way.

Floating in Clear space

Float

float controls how text and other elements float around a block.
float:left pushes an element as far left as it will go causing text to flow around it to the right.
float:right the opposite

IMAGE FLOAT LEFT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis diam sed nunc pretium a vestibulum velit pharetra. Integer molestie vestibulum tincidunt. Fusce non risus non ligula imperdiet adipiscing. Mauris molestie, nulla at vulputate hendrerit, ligula turpis lobortis sapien, id venenatis mauris nisl a nisi. Aenean dolor odio, mollis sit amet facilisis et, ultricies a felis. Fusce semper venenatis rhoncus. Maecenas feugiat metus sagittis magna scelerisque et mollis leo lobortis. Nam gravida rhoncus leo, eu tempus eros tempus eget. Fusce massa purus, convallis aliquet ultrices aliquet, gravida ac mi. Duis ut malesuada turpis. Nullam lacus eros, pulvinar vitae tristique ut, adipiscing id leo. Sed sit amet dui turpis, in sollicitudin magna. Morbi et nisi ut quam porttitor consequat non eu ligula. Vivamus volutpat faucibus quam sed laoreet. Nulla posuere sem urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

IMAGE FLOAT RIGHT Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lobortis diam sed nunc pretium a vestibulum velit pharetra. Integer molestie vestibulum tincidunt. Fusce non risus non ligula imperdiet adipiscing. Mauris molestie, nulla at vulputate hendrerit, ligula turpis lobortis sapien, id venenatis mauris nisl a nisi. Aenean dolor odio, mollis sit amet facilisis et, ultricies a felis. Fusce semper venenatis rhoncus. Maecenas feugiat metus sagittis magna scelerisque et mollis leo lobortis. Nam gravida rhoncus leo, eu tempus eros tempus eget. Fusce massa purus, convallis aliquet ultrices aliquet, gravida ac mi. Duis ut malesuada turpis. Nullam lacus eros, pulvinar vitae tristique ut, adipiscing id leo. Sed sit amet dui turpis, in sollicitudin magna. Morbi et nisi ut quam porttitor consequat non eu ligula. Vivamus volutpat faucibus quam sed laoreet. Nulla posuere sem urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Clear

clear:ileft| right|none|both is used when you don't want something to flow around soemthing else. It pushes it clear of other elements.

Other

z-index:[number] controls vertical stacking: the highest number goes on top

overflow:visible|hidden|scroll|auto|inherit determines what happens to stuff that would be dispalyed outside a blocks area

p class="sans">display: none| inline| block causes block elenets to act as inline or vice versa. Can also hide stuff.

visibility: visible| hidden

min-width etc.

Hints & Examples

Negative values for margins can be used to push the contents of a block outside of itself. Float:left can be used with li to make hotizontal menus. line-height can also be used when postioning to squeze thingswhere they wouldn't normally go. Remember everything can have a background this is useful for faxing full-height colums etc. Putting colored 1px borders ({border: solid red 1px;}) on divs etc is useful for figuring out what is going on.

Example1, Example2, Example3