- Len's Style Sheet 2 - Embedded Style Sheet This webpage is updated by Len Hom on May 1, 1999
This is an example of a background color for an element in the embedded stylesheet.
Len's Style Sheet 2 - Embedded Style Sheet - Margins & Positioning
Margins
Positioning
Z-Index
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 for embedded stylesheet 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.
The noted text at the top of the page is positioned using Cascading Style Sheet absolute properties...
This text has been positioned in a 200 pixel wide area offset by 100 pixelsfrom 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 pixelsfrom the top and 100 pixels from the left of the page using relative properties.
The Z-Index is patterned after the W3C recommendation for Cascading Style Sheets. The highest Z-Index is the top layer of the overlay and the lowest Z-Index is the bottom layer.The reference source is:
http://www.w3.org/Style/CSS
If you have any comments or questions, please send email to:
Len Hom
Back ![[Back Button]](backbutn.gif)
Next ![[Next Button]](nextbutn.gif)
Return to Beginning of Page
I take full responsibilityfor the information posted. The information on this pagerepresents that of myself and not that ofCalifornia State University,Sacramento or the School ofEngineering and Computer Science