Len's Style Sheet 2 - Setting Margins

Setting Page Margins

You can set the left and right margins with the " margin-left " and " margin-right " properties, i.e.

< STYLE type= "TEXT/CSS" >
BODY { margin-left: 20%; margin-right: 20%; }
< /STYLE >

• This sets both margins to 20 % of the window width
• The margin will scale as you resize the browser window.

---

The " margin-top " property specifies the space above and below headings and paragraphs, etc. and the " margin-bottom " property specifies the space below. To set these for all H2 headings, you can write:

H2 { margin-top: 3em; margin-bottom: 2em }

• The em is a very useful unit as it is scales with the size of the font.
• One em is the height of the font.
• By using this unit, you can preserve the general look of the Webpage independently of the font size.

To specify the space above a particular heading, you need to create a named style for the heading. You do this with the CLASS attribute in the markup, i.e.

< H2 CLASS= " subsection " > Setting Margins </H2>

The style rule is then written as:

H2.subsection { margin-top: 3em; margin-bottom: 2em; }

• The rule starts with the tag name, a dot, and then the value of the class attribute.
  
• Do not leave any space before or after the dot.
• Note that the STYLE element must be placed in the document's HEAD section along with the TITLE element.
• It should not be placed within the BODY section.

Back Next Return to Beginning of Page

---

I take full responsibility for the information posted. The information on this page represents that of myself and not that of California State University, Sacramento or the School of Engineering and Computer Science