Before we get down to the business of learning how to convert a web page to CSS, let us first clearly understand the difference between a non CSS or HTML web page and one using CSS. This naturally leads us to answer the question – what is CSS and why is this methodology important?
A web page typically consists of the content and the HTML tags which define the structure of the content such as a paragraph, a heading, a footer, an itemized list, a table, an image, etc. However, as an author, you may wish your web page to have a specific look and feel characterized by the display style. This is achieved by a variety of style elements such as font, color, text emphasis, spacing, alignment and many others.
Though originally HTML was designed primarily to define the structure of the content, due to the need for presentation, styles were introduced in the form of new tags and attributes to later versions of HTML. With these additions to HTML, it became very tedious and expensive for developers to create and maintain large web sites where font and color information mingled with the other tags in every single page.
As a solution to this problem, the World Wide Web Consortium (W3C) created CSS – Cascading Style Sheets. This enabled developers to remove all formatting from the HTML document and store it in a single separate CSS file. Thus, the tedious job of modifying a style on all website pages is reduced to simply changing the style once in the CSS file. Today, CSS is supported by all browsers.
For new sites, it is best to use the CSS technique from the very first. However there exist a large number of sites on the web with styles embedded along with HTML tags. Some of these may still be very useful but may need to be converted for the sake of easier maintenance. In the rest of this article you will see how to strip style elements from the HTML code and move it to CSS in 10 simple steps.
1. As a first step, let us talk about the <span> tag. Unlike most tags which affect the appearance of the text that they enclose, the <span> tag has no inherent effect on the text it wraps. Its sole purpose is to be used with style sheets.
Used by itself the <span> tag has no effect but paired with the style attribute, it can replace many of the tags.
2. Let us take an example of text formatting using tags and then create the same effect using the <span> tag with the style attribute:
<p>Here is some <u> underlined text</u>. </p> → <p>Here is some <span style='text-decoration: underline'> underlined text</span>. </p>
In the above example the <u> tag has been replaced by the <span> tag paired with the text decoration property having the value 'underline'. Other valid values for this property are overline, line-through and blink.
3. The font properties are an important family of properties that are useful in modifying the appearance of text . These properties are much more specific than the tags they replace. The example below shows how the <b> and <i> tags are replaced by the font style and the font weight properties.
<p>Here is some <i><b> italicized and bold text</b></i>.</p> → <p>Here is some <span font-style: italic; font-weight: bold > italicized and bold text</span>. </p>
4. Let us now take the heading tag and see how flexibly it can be rendered by the use of style. There are 6 heading tags from h1 to h6 representing the heading level. By default, the browser interprets the headings depending on their levels - font sizes decreasing from level h1 to h6. The example below shows you how the h1 tag can be enhanced by a style.
<h1>Here is a top level heading</h1> → <h1 style= 'font-weight: bold; font-size: 200%' >Here is a top level heading</h1>
5. There are three ways of using style sheets:
Inline style
Internal style sheet
External style sheet
So far, in steps 2-4, we have seen the use of inline style where the style attribute is used along with relevant tags and spread all over the HTML page. This should be used sparingly and only when a special style is required for exceptional bits of text. A better and more efficient method is to use the internal style sheet. This is used when a single document has a unique style.
6. The internal styles are page level styles defined in the style block and placed in the head section of an HTML page as shown below:
The styles are defined between the <style> tags. In the code above, the style block contains a single style applicable to the <body> tag. When executed, the web page will have a margin of 15 pixels and the background and font color will be blue and black respectively.
7. The body of the style sheet consists of a series of rules. All the rules follow the structure shown below:
From our examples of inline styles, you are already familiar with properties and their values. The selector may be a tag (as the body tag in the example in step 6), a combination of tags or a class or id defined by you. For the purpose of simplicity, we will make use of tags as selectors.
Supposing your page is displaying an inventory of items resulting in several ul and ol elements. If you want all unordered lists and ordered lists on your page to be highlighted in blue, italics and bold, you need not painfully modify the attributes on each occurrence of the <ul> and the <ol> tag all over your page as in the original version of HTML. You can achieve the desired effect by writing a single rule as shown below:
ol, ul {color: blue; font-style: italic; font-weight: bold}
8. You can make use of contextual selectors when you want to apply styles to elements only when they are nested within other elements. To do this, omit the comma between selectors as in the rule below:
p ol {color: blue; font-style: italic; font-weight: bold}
The above rule will apply the style between the curly brackets to only ol elements that are nested within p elements.
9. Let us now take a slightly more complex example and see how it affects the display. Look at the rules below:
cite{color: green}
p cite { font-style: italic; font-weight: normal; color: red }
li cite { font-style: normal; font-weight: bold; color: blue}
In this example, the nested styles override the default style for the cite tag defined in the first rule. The contents of <cite> tags that don't meet the criteria of the nested rules will appear in green. The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p> tags, the contents will be red. Similarly, for those that are inside list items, the contents will be blue.
10. We finally come to the external style sheet that is ideal to use when the style is applied to many pages. In fact, with an external style sheet, you can control the look of an entire website by modifying a single file. While using the external style sheet, you must link each page of the site to the style sheet using the <link> tag. The <link> tag goes inside the head section as shown below:
You can write an external style sheet using any text editor. The file should not contain any HTML tags. Save your style sheet with a .css extension. An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Now that you have an idea about the basic steps involved in converting an HTML website to CSS, go ahead and try your hand at a real conversion job.
Editor's note: Most articles submitted to Chillibreeze go through a selection process. Only 30 percent of submitted articles are accepted for publication on the Chillibreeze.com featured article list. All accepted articles are edited and proofread for glaring errors of punctuation and grammar. Sentence structure is changed in certain cases and sometimes, entire sections are rewritten. If you notice any errors that have slipped through the cracks, do let us know! (Email us at info at chillibreeze dot com).
Chillibreeze's disclaimer: This is a contributed article and was published on Chillibreeze in July, 2010. The views and opinions expressed in this article are those of the author(s) and do not reflect the views of Chillibreeze as a company. Chillibreeze has a strict anti-plagiarism policy. Please contact us to report any copyright issues related to this article. The relevance of the facts and figures cited (if any) could change after a period of time.
Chillibreeze offers Indian writers the opportunity to work on customer projects. We are also India’s biggest writer network and a one-stop shop for Indian writers and editors. The writers’ section on Chillibreeze offers freelance writers and editors a variety of tools to advance their careers. Resources for writers include:
