CSS Training Classes

Cascading Style Sheets, commonly known as CSS comes handy to web designers and developers when it comes to providing uniformity to the layout of different pages of the same website.

Let’s see how we can manage margins in a website using this CSS tutorial.

Margin, as you know clears an area around any element. The margin is always transparent and we cannot add properties such as background color etc., to it.

The keyword to be used while customizing the margin of a webpage is ‘margin’. Four properties, namely top, right, bottom and left can be changed independently as well as altogether once in CSS.

The values used along with margin are: auto, length and %. Auto lets the browser set the margin on its own. Hence, the resultant output on screen varies from one browser to another.

We can define in pixels, points or ‘em’ what length has to be left at the four sides of the margin.

While we can define length using ‘length’ property, we can also use ‘%’ to mention what percentage of the page has to be taken for the margin.

Example:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

In the above example the top margin is set to 100 px, bottom to 100 px, right to 50 px and left is set to 50 px.

Alternatively, just a single statement can also do the necessary customization, for example:

margin:25px 50px 75px 100px;

The first, second, third and fourth values correspond to the top, right, bottom and left margin of the page respectively.

With this simple CSS tutorial you have learnt to manage margins in your webpage.

Here is a list of 15 CSS Tutorials that we’ve found to be very useful and full of great CSS information:

• CSS Basics
• A List Apart CSS Topics
• Horizontal and Vertical CSS Menu Tutorial
• CSS Rollovers
• All About CSS Drop Shadows
• CSS Font
• W3CSchools CSS Tutorial
• Learn CSS Positioning in Ten Steps
• Page layout with css positioning
• /* Position Is Everything */
• Stylesheet with CSS
• The CSS Box Model
• CSS Image Gallery
• HTML Dog CSS Tutorials

Thanks to GraphicMania for providing some of the resources on this list.

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a webpage written in a markup language.

CSS is most commonly used on HTML web pages, however the language can also be utilized for any kind of XML document, including SVG and XUL.

Basically, you refer to a stylesheet in your HTML code to create a uniform design/format so that you don’t have to recreate that design on each weboage. Simply call out that stylesheet in each webpage.