This chapter is from the book
This chapter is from the book
This chapter is from the book
CSS box model
Browsers normally read the HTML code, interpret its structure and formatting, and then display the webpage. CSS does its work by stepping between HTML and the browser, redefining how each element should be rendered. It imposes an imaginary box around each element and then enables you to format almost every aspect of how that box and its contents are displayed.
)
CSS permits you to specify fonts, line spacing, colors, borders, background shading and graphics, margins, and padding, among other things. Most of the time these boxes are invisible, and although CSS gives you the ability to format them, it doesn’t require you to do so.
Launch Dreamweaver (2020 release or later), if necessary.
Open boxmodel.html from the lesson04 folder.
If necessary, switch to Split view.
The file’s sample HTML code contains a heading and two paragraphs with sample text formatted to illustrate some of the properties of the CSS box model. The text displays visible borders, background colors, margins, and padding. To see the real power of CSS, sometimes it’s helpful to see what the page would look like without CSS.
Switch to Design view.
Choose View > Design View Options > Style Rendering > Display Styles to disable style rendering.
Dreamweaver now displays the page without any applied styling. A basic tenet in web standards today is the separation of the content (text, images, lists, and so on) from its presentation (formatting). Although the text now is not wholly unformatted, it’s easy to see the power of CSS to transform HTML code. Whether the text is formatted or not, this illustrates the importance of the structure and quality of your content. Will people still be enthralled by your website if all the wonderful formatting were pulled away?
Choose View > Design View Options > Style Rendering > Display Styles to enable the CSS rendering in Dreamweaver again.
Close all files, and do not save changes.
)
)
The working specifications found at www.w3.org/TR/css3-box describe how the box model is supposed to render documents in various media.