Good CSS Design, CSS Tutorial, Global Guideline

Bookmark Bookmark: Good CSS Design, CSS Tutorial
Forum | Blog


Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.
 CSS Summary.                   

CSS Tutorial >> Good CSS Design.

     Back             Next     

CSS Good Design based on the appropriate use of Cascading Style Sheet.  Here we will look at what might be considered best practices, or perhaps, good coding habits to get into with CSS. To begin, we will look at removing any defaults that a browser may add to our elements and then look at how we can explicitly set the values we want. If you are new to CSS use, you may want to bring yourself up to speed by reading a series of tutorials and it is the right way for you to learn CSS with this easiest CSS Tutorial.

Deploying Cascading Style Sheet For The Greatest Impact in webpage.

The beauty of CSS is the control it gives us. If used correctly we can perform website wide changes on thousands of pages in seconds. If used incorrectly, CSS is little better than using font tags. The difference between getting it right and getting it wrong is huge, it really is. The object of CSS is to separate design from content. The greater the separation, the easier our life becomes, as we shall see.

We can use CSS in three ways as under.

Inline CSS use.

Inline CSS use is the least flexible of the three options listed above. When applying inline Cascading Style Sheet you are styling your elements right inside the code. You can see an example of inline styling in CSS Tutorial right below:

Example of Inline CSS use.

<p style="margin: 15px;">Sample Paragraph text</p>

The inline style in above is highlighted bold. Why is this method a poor one? The answer to that is simple, the style we have applied to that p element is only affecting that p element. This means that every single time we use a p element we will need to write an inline style to force the 15px margin we want to add to our paragraphs.

This situation is further complicated when we need to make changes to our code in future. Let's say our client wants to reduce the margins on his paragraphs from the 15 pixels we have set to 10 pixels. The site may contain 1000 pages, to complete the client's request we would need to find and change every single instance of that inline style on every page within the site; a job that could take many hours.

Embedded CSS use.

Embedded CSS use is somewhat of a halfway house between inline styles and an external style sheet. An embedded Cascading Style Sheet file keeps our styles out of our html code and moves them into the head of our document. An example of an embedded style sheet can be seen in below

Example of Embedded CSS use.

<style type="text/css">
p {
     margin: 15px;

An embedded style sheet is contained in an opening and closing style tags pair, and it exists in the head of webpage. The problem here is that it exists in the head of every page. If we revisit client's required change of reducing the margin on our p element from 15 pixels to 10 pixels, we do have a slight improvement. We would now only need to change the setting once in each page, from within our embedded style sheet. This is much better than changing many inline style instances in every page. Better, but still not so great.

External CSS use.

An external CSS use of file is the way to go where we want. An external Cascading Style Sheet file is exactly what it says; it resides outside the (x)html document. From there it is linked to from within the <head> of the document in web page, and the link implements those external styles onto the page. Each page in our web site might carry the same link to the same style sheet, allowing each element within our pages to adopt its styles from a single CSS file. This is a major advantage to us, because it means that we only need to change any given selector in a single location - our external style sheet - and the changes we make to that selector will propagate throughout all our pages, so long as those pages are linked to the external style sheet.

Example of External CSS use.

<link href="/ourexternal.css" rel="stylesheet" type="text/css" />

The selectors within our external style sheet would be written in exactly the same way as they would be in our embedded style sheet, the only difference being that we don't need to include the surrounding style tags in our external CSS file, as you can see below:

p {
     margin: 15px;

An external style sheet is without a doubt the way to go where we want, and our aim should always be to keep your selectors within external style sheet. That is not to say that inline or embedded style sheets do not have their uses, they do, but those instances are the exception rather than the norm.

     Back             Next     


[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 233 visitors are online now