Difference between revisions of "CSS:BoxModel"
From mi-linux
Jump to navigationJump to search| (21 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | [[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> The Box Model | |
| + | |||
| + | [[Category:CSS]] | ||
| + | |||
When using CSS, every element can be thought of as an object with several different boundaries. The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS. The picture below demonstrates the concept well: | When using CSS, every element can be thought of as an object with several different boundaries. The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS. The picture below demonstrates the concept well: | ||
| − | [[Image:boxmodel. | + | [[Image:boxmodel.gif|frame|none|The box model - from http://www.w3.org/TR/REC-CSS2/box.html]] |
| + | |||
| + | Let's experiment with some of these spacial concepts with simple paragraphs: | ||
| + | |||
| + | ''HTML document'' | ||
| + | <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>CSS 2</TITLE> | ||
| + | <LINK rel="stylesheet" href="style4.css" type="text/css"> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | <P id="first">contents of section 1</P> | ||
| + | <P id="second">contents of section 2</P> | ||
| + | <P id="third">contents of section 3</P> | ||
| + | </BODY> | ||
| + | </HTML></nowiki> | ||
| + | |||
| + | ''CSS document (save as style4.css)'' | ||
| + | <nowiki>#first {padding:10px; margin:10px; border:1px solid #00ff00} | ||
| + | #second {padding:20px; margin:20px; border:2px dashed #0000ff} | ||
| + | #third {padding:30px; margin:30px; border:3px dotted #ff0000}</nowiki> | ||
| + | |||
| + | *'''TIME TO PRACTICE''' | ||
| + | ** Practice changing some of the values of the pading, margins, borders, etc. to achieve some effects you might like to see in your website | ||
| + | ** For example, change the #first line in the CSS to: | ||
| + | <nowiki>#first | ||
| + | { | ||
| + | background-color:#aaaaff; | ||
| + | color: #0000ff; | ||
| + | text-align: center; | ||
| + | font-size: 150%; | ||
| + | padding:10px; | ||
| + | margin:20px 250px 75px 250px; | ||
| + | border:4px solid #00bbff; | ||
| + | }</nowiki> | ||
| + | |||
| + | * When using a number of different formatting commands on a selector, separate each with a newline and indent them to make them easier to read and maintain. | ||
| + | |||
| + | =Ready To Move On?= | ||
| + | When you're happy with the box model, it's time to take a look at some simple methods of page layouts in [[CSS:Layouts101]] | ||
| + | =Related Pages= | ||
| + | <categorytree mode=pages>CSS</categorytree> | ||
Latest revision as of 15:02, 12 July 2011
Main Page >> Website fundamentals >> Workbook >> CSS >> The Box Model
When using CSS, every element can be thought of as an object with several different boundaries. The "content" is separated from the "border" by "padding", and the "border" is seperated from the next object by the "margin." Each of these boundaries are controllable through CSS. The picture below demonstrates the concept well:
The box model - from http://www.w3.org/TR/REC-CSS2/box.html
Let's experiment with some of these spacial concepts with simple paragraphs:
HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>CSS 2</TITLE>
<LINK rel="stylesheet" href="style4.css" type="text/css">
</HEAD>
<BODY>
<P id="first">contents of section 1</P>
<P id="second">contents of section 2</P>
<P id="third">contents of section 3</P>
</BODY>
</HTML>
CSS document (save as style4.css)
#first {padding:10px; margin:10px; border:1px solid #00ff00}
#second {padding:20px; margin:20px; border:2px dashed #0000ff}
#third {padding:30px; margin:30px; border:3px dotted #ff0000}
- TIME TO PRACTICE
- Practice changing some of the values of the pading, margins, borders, etc. to achieve some effects you might like to see in your website
- For example, change the #first line in the CSS to:
#first
{
background-color:#aaaaff;
color: #0000ff;
text-align: center;
font-size: 150%;
padding:10px;
margin:20px 250px 75px 250px;
border:4px solid #00bbff;
}
- When using a number of different formatting commands on a selector, separate each with a newline and indent them to make them easier to read and maintain.
Ready To Move On?
When you're happy with the box model, it's time to take a look at some simple methods of page layouts in CSS:Layouts101
Related Pages
<categorytree mode=pages>CSS</categorytree>
