Len's Style Sheet 2 - Positioning Objects with CSS

Style Sheet Positioning

Cascading refers to the combining of style sheets from different sources that may influence the presentation of a document. Style sheets may come from the browser, the designer, and the user as well. The cascading mechanism is designed to resolve any conflicts among these style sheets.

The noted text is positioned using Cascading Style Sheet absolute properties...

This text has been positioned in a 200 pixel wide area offset by 100 pixels from the top and 100 pixels from the left of the page using absolute properties.

The following text is positioned using Cascading Style Sheet relative properties...

This text has been positioned in a 200 pixel wide area offset by 100 pixels from the top and 100 pixels from the left of the page using relative properties.

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: 2em; 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: 2em; 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