WebReference.com - Part 1 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (1/6)
  [next] |
CSS: A Beginner's Guide
Understand the Visual Model
Normally, when people think of Web pages they think of the kind of pages you view on a computer monitor. In other words, they think in terms of a visual medium. Although the Web is now moving into many different types of media, its roots go back to a visual presentation. In CSS, this is known as the visual model. If you want to use CSS to design Web pages in the traditional sense of the word, you must learn how to work with the visual model. A key part of the visual model is the concept of box generation.
Box Generation
In the CSS visual model, every element is assumed to generate a box in which its contents are placed. You can manipulate the size, appearance, and position of the box by adding padding, borders, and margins. (To review the box properties, see Module 9.) As the following illustration demonstrates, padding adds space inside the box, borders are drawn around the outside of the box, and margins govern the space around the box.
By learning how to control the positioning of boxes, you can create sophisticated page layouts and designs. If you have worked with a desktop publishing program, greeting card software, or even a word processor, you are probably familiar with the idea of arranging text and image boxes on a page. CSS layout works in much the same way. However, you need to learn how the various boxes on a page relate to one another before you learn how to position them.
Containing Blocks
Every box is contained within another box, usually referred to as the containing block. The position, width, and other aspects of most boxes will be determined by the size and position of the containing block. The "master" containing block on a Web page is the root element. The root element is the element from which all the other elements on the page descend. All of the other elements on the page are considered to be inside this initial containing block. As the following illustration shows, the width of each of the boxes is the same as the containing block (in this case, the entire window).
Tip: In an HTML document the actual "root" element is the <html> element. However, for design purposes you should consider the root to be the <body> element.
[next] |
Created: July 8, 2002
Revised: July 8, 2002
URL: https://webreference.com/authoring/style/sheets/beginners/chap11/1/
Find a programming school near you