CSS Web Site Development

Css Website

Image via Wikipedia

Setting web page margin

Web pages look a lot nicer with a larger margin. You can set the left and right margins with the “margin-left” and “margin-right” properties. For example:

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>

This sets both margins to 10% of the window width, and the margins will also scale when you resize your browser window.

Left and right indent space

To make headings a little more distinctive, you can make them start within the margin that is set for the web page body. For example:

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

This example has three CSS style rules. One for the body, one for h1 and one for the rest of the headings (h2, h3, h4, h5 and h6). The margins for the headings add to the margins set for the body. A negative value is used when you need to move the start of the heading to the left of the margin set for the body.

The above examples of particular style rules can be placed within a style element in the web page’s head or in a separate linked style sheet.