CSS or Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to be used in HTML and XHTML respectively. It can also be used in XML.

Uses

CSS can be used to define colors, fonts, layout, and other aspects of document presentation in a web page. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS also allows authors to move much of that information to a separatestylesheet resulting in considerably simpler HTML markup.

Sources

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

href="mystyle.css" />

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

This is a paragraph

 

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:

 

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

A full definition of CSS can be found here.

CSS bug fixing

 

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the
process. But before jumping on the bandwagon to fix things consider these criteria...

 

Make sure your markup is well structured

 

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for
what they're meant for, tabular data.

 

Fixing for IE

 

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...

 

Isolate the problem via XHTML

 

You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear.
If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.

 

Isolate the problem via CSS

 

Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc. Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine is Adobe Dreamweaver and even a notepad has done wonders for me. There are also a number of plugins for Mozilla Firefox that you can use to debug your css like CSS Viewer, FireBug and Web Developer Tool.

 

In general, CSS is a great way to present your web page. SEO will also benefit on your CSS use, it will no longer need to crawl unwanted codes like because you wont be using tables unless there is a tabular data to present. SEO will be so efficient on your web page. So i urge every web designer out there to use CSS every time they design web pages. After all it is the road to enlightenment.