CSS box model tutorial: Difference between revisions
Jump to navigation
Jump to search
m (Created page with "{{Incomplete}} {{Web technology tutorial|Beginners}} <pageby nominor="false" comments="false"/> <div class="tut_goals"> ; Learning goals * Understand the CSS box model * Be able...") |
m (using an external editor) |
||
| Line 1: | Line 1: | ||
{{ | {{stub}} {{under construction}} | ||
{{Web technology tutorial|Beginners}} | {{Web technology tutorial|Beginners}} | ||
<pageby nominor="false" comments="false"/> | <pageby nominor="false" comments="false"/> | ||
| Line 27: | Line 27: | ||
</div> | </div> | ||
== Analyzing the box structure and other tips == | |||
=== Include an HTML declaration === | |||
Make sure to include a valid HTML declaration in your HTML file. Read the [[HTML_and_XHTML_elements_and_attributes#HTML_and_XHTML_structure_and_document_type_information_.28DTD.29|HTML and XHTML elements tutorial]] or the [[HTML]] article if you don't know how. | |||
For example: | |||
<source lang="XML"> | |||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |||
</source> | |||
If you don't include such a declaration, then browsers will fall into '''quirks mode''' and may add some padding and border to the width... | |||
=== Using the Firefox WebDeveloper plugin === | |||
... to do ... | |||
=== Using code === | |||
Chris Coyier in, [http://css-tricks.com/2841-the-css-box-model/ The CSS Box Model] ( retrieved 18:19, 7 November 2011 (CET)) shows a simple trick. | |||
At the end of your CSS, add: | |||
<source lang="CSS"> | |||
* { | |||
border: 1px solid red !important; | |||
} | |||
</source> | |||
Of course you can change the color and the line thickness. The "!important" keyword will override other border specifications of course. | |||
== Links and references == | |||
=== Introductions === | |||
* [http://redmelon.net/tstme/box_model/ Basic CSS Box Model Demo]. Actually it's a useful visualization that decomposes a flat "picture" into a faux 3D representation. | |||
* [http://css-tricks.com/2841-the-css-box-model/ The CSS Box Model] by Chris Coyier, June 2009. | |||
* [http://www.w3schools.com/css/css_boxmodel.asp CSS Box Model] (W3C schools) | |||
=== Reference === | |||
* [http://www.w3.org/TR/CSS2/box.html Box model] chapter of the W3C [http://www.w3.org/TR/CSS2/cover.html Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification] | |||
[[Category: CSS]] | [[Category: CSS]] | ||
Revision as of 19:19, 7 November 2011
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
<pageby nominor="false" comments="false"/>
- Learning goals
- Understand the CSS box model
- Be able to style all parts of a CSS box
- Concurrent
- CSS tutorial (summary)
- Moving on
- Level and target population
- Beginners
- Teaching materials
- Remarks
- This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
- Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).
Analyzing the box structure and other tips
Include an HTML declaration
Make sure to include a valid HTML declaration in your HTML file. Read the HTML and XHTML elements tutorial or the HTML article if you don't know how.
For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you don't include such a declaration, then browsers will fall into quirks mode and may add some padding and border to the width...
Using the Firefox WebDeveloper plugin
... to do ...
Using code
Chris Coyier in, The CSS Box Model ( retrieved 18:19, 7 November 2011 (CET)) shows a simple trick.
At the end of your CSS, add:
* {
border: 1px solid red !important;
}
Of course you can change the color and the line thickness. The "!important" keyword will override other border specifications of course.
Links and references
Introductions
- Basic CSS Box Model Demo. Actually it's a useful visualization that decomposes a flat "picture" into a faux 3D representation.
- The CSS Box Model by Chris Coyier, June 2009.
- CSS Box Model (W3C schools)
Reference
- Box model chapter of the W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification