Using style sheets for dynamic content

Use relative values for styles

Use relative values when defining styles for parameters that surround content (such as padding, borders, and margins), element width, and so forth. Static values such as pixels (padding: 10px) do not scale content for different screen sizes and resolution. Instead, use relative values such as:

em—em, relative to the height of the element's font.
ex—x-height, relative to the lowercase character x of the element's font.
%—percentage, relative to the containing box.

Figure: Margin, border, padding values for enclosing element

Following creates relative styles for margins around an image:

img.floatTopLeft {
   float: left;
   margin-right: 1.5em;
   margin-bottom: 1.5em;
   margin-top: 0.5em;
}

Following creates relative styles for the padding around list items.

#menu li a
{
   margin-left: 0.5em;
   display: block;
   padding: 0.8em 1.0em 0.8em 1.0em;
   background: #fff url('images_red/n4.gif') repeat-x;
   border: solid 1px #fff;
   color: #616161;
   font-weight: bold;
   font-size: medium;
}

Create elements that expand with the screen size or orientation

Following creates a relative style so that the <div> extends the width of the page, regardless of the screen size.

div.extend {
   width:100%;
}

Using a CSS reset file

Use a reset CSS file to adjust the CSS to a more accurate layout. This also makes the CSS easier to debug. Call the CSS file from the HTML file to reset the page. Following is a example of a reset.css file.

* {
   padding: 0;
   margin: 0;
   border: 0; 
}