Converting to CSS: separating styling

Now that we have prepared ground for separating styling and content, let's get on with it.

Replacing styling tags

Say, we have numerous <font>, <b> or <i> tags in the old page. As they are either deprecated or used for applying visual effects, we replace them with CSS styles in the new page, index.html. Here how it looks:

<i><h1><font color=#0000ff>Blue text here</font></h1><i>  

is replaced with

• HTML code: <h1>Blue text here</h1>
• CSS code: h1 {font-color:#00f;font-style:italic;}

There. We have made the heading code look nice and easily configurable. Do the same to every tags that are used to change the appearance of the text, not for formatting (paragraph and list tags, for instance).

Replacing inline styles

There may be a lot of inline styles, using tag attributes (bgcolor, align, etc) or inline styling, to give certain appearance to the text. This should be handled by inserting classes or unique identifiers into the HTML code and attributing the same effects using CSS. Here is an example:

<table width="780" border="0" cellspacing="10" cellpadding="0" align="center" bgcolor="#FFFFFF">

The code above is the old way of displaying tables. Here is how we change the way it is written:

• HTML code: <div class="content">
• CSS code: .content {width:780px;border:0; border-collapse:collapse; margin:auto; background-color:#fff;}

Here is an example of another kind of inline styles:

<table style="border-collapse:collapse; border:1px solid black; background:#fff;">

Here how it looks with external styles:

• HTML code: <div class="maincontent">
• CSS code: .maincontent {border:1px solid black; background:#fff;}

Basically, the main culprits of having inline styles are tables. There may be numerous tables and as much styles. It may be a nightmare to adjust the look of a website on tables.

Mostly, inline styles are used for paragraphs, links, lists and other parts of the layout that required specific formatting.

When converting inline styles to external, special attention should be paid to unique styling. If an element is formatted in its own way, and such formatting is not used anywhere on the site, it'd be best to leave it as it is (unless it is a styling tag - read the previous section), as it is the way inline styles are to be used.

So, by now, we have removed all the deprecated tags and have put all the styling in a separate CSS file. Let's get on with positioning our blocks of text.

Learn more:

• Read the benefits of our services
• Redesign your site
• Improve your site usability
• Digg this tutorial