Sept. 20, 1998
The major part of your content will consist of block elements. BODY, BLOCKQUOTE, DL, DT, DD, DIV, H(n), HR, HTML, LI, OBJECT, OL, UL P, and PRE are all block elements. Rather than thinking of these elements as paragraphs and lines of text, think of them as boxes. Each time you add a P you are starting a new box. Boxes can contain other boxes which can contain yet other boxes. BODY is the outside box, it can contain a P box which can contain a UL box, etc. A box consists of four levels with the perimeter of each of the four levels being called that level's "edge".
This is a box. It contains content, the area between the content and the
black border is the padding, the white space outside of the border is
the margin. (If you're viewing this on NS, you'll see a thin white
area between the padding and the border. This thin line is just a little
NS feature and shouldn't be confused with the entire padding area).
The following three boxes all have their individual rule displayed inside the box so that you can see the rule and the results at the same time. The darker content background is for display purposes and is added inline to the P element rather than to the style sheet. The content box is the area directly behind the text. In some browsers if you add a background color to the content box it will display as a full box, in others, the color will display directly behind the text. This block of text is being displayed with a left sided margin of 75px and a padding of 3em on all sides. A border has been added for display purposes.
Now, lets consider the same box, with the same properties, only this time let's remove the padding. Notice how the text now extends all the way to the border. You can effectively indent and un-indent blocks of text simply by changing the padding and/or margins of the blocks.
Using the margin and padding properties, you can place your text where you want it. If after you have finished an entire page, (or website), you decide you would like to change the layout of the various blocks all you need to do is change the style sheet!
Of course, it's not necessary to include a background color or border. Leaving them off, or setting their properties to transparent and none respectively, will allow you to present your content in a random layout without the 'boxed in' effect. For example, the paragraph above has a margin property of margin: 0em 2em 0em 9em; while this paragraph has the left and right values reversed; margin: 0em 9em 0em 2em; Viewed without style, both paragraphs would appear normally, filling the space from one side of the screen to the other.
To produce these last three paragraphs we would first create the style
sheet:
Then we would add it to the html file thusly:
Alternating the two classes on each new paragraph will stagger the text all the way down the page. Remember, the class attribute may be used many times in a document, the id attribute may only be used once. Additional Resources:
Putting Style Sheets in Perspective: padding 
| |||||||||||
|
|---|
|