ITWP-1050 HomeWork2: The CSS Box Model

The CSS Box Model:

CSS Box Model Diagram
Note: Box Model diagram from Teach Yourself CSS in 24 hours, by Kynn Bartlett

The main components/properties of the CSS Box Model are:

The MARGIN Property:

The BORDER Property:

The PADDING Property:


Ok, now for some examples of how to use the CSS Box style element.....

This is an h3 tag styled with Linked Style Sheet CSS Box Style 1: Margin= 5px, Border= solid, Padding= 5px

This is an h3 tag styled with Linked Style Sheet CSS Box Style 2: Margin= 10px, Border= double, Padding= 20px

This is an h3 tag styled with Linked Style Sheet CSS Box Style 3: Margin= 20px, Border= dashed, Padding= 40px

This is blah-blah-blah content, but the < p > tag "block" is formatted with a css block style class type that I defined as cssboxstyle2 in the externally linked css document. Note: As CSSBoxStyle2 was defined as an CLASS (.), it can be re-used multiple times in the web document...

Just some more verbage to prove that CLASSES are Re-USABLE, (( ID's are not)) .. Mnemonic: CLASS can be used always - period.


Resources Used in this Project:


Valid XHTML 1.0 Transitional Valid CSS!

Joe's ITWP 1050 Homepage