Using CSS instead of plain HTML

For those that started studying computers or those in the 90s, most of us started learning the HOW TO BUILD A WEBPAGE with HTML. Those days, a webpage is defined by how well it was formatted and if you want fancy stuffs, the best one can get is Macromedia Flash (now Adobe Flash). Here are the old codes of the old.


<table width="80%">
  
<tbody>
    
<tr>
      
<td></td>

      
<td><span style="color: red;">This text is red</span></td>

    </tr>

  </tbody>

</table>

By doing this, the following text becomes red. Nothing is wrong with doing things like this. Though now there exist something better which is able to format text which is CSS (Cascading Style Sheet).


Some of the books used to teach CSS

Using CSS to format a text like the above to turn to red has got it’s advantages over the old style format. One it is Web 2.0 friendly, XML friendly and also changes can be made directly from a seperate file ( .css file). Another important thing is that it’s way flexible, assigning a class to a row of text with the specific characteristics changes the overall text.

This is a simple method to show how CSS works.


<table width="80%">
  
<tbody>
    
<tr>
      
<td><span style="color:red">This text is red</span></td>

      
<td><span style="color: red;">This text is red</span></td>

    </tr>

  </tbody>

</table>

It’s the same result. But what’s so special? Now let’s modify the code once again. We’ll start right at the beginning.

<html>
<head>
<style type="text/css">
.redLight {
color:red;
}
</style>
</head>
<body>
<span class="redLight">This text is red</span>
</body>
</html>

Now just copy and paste this script into your notepad and save it as example.html. Open it and you’ll see, wow… it’s RED. Now how about if you wanted to add more text with the same color on other parts of the HTML. Simple! Just add <span class=”redLight”> or <div class=”redLight”> on another row of text.

For those who have been around tweaking their blogs and websites, most would be familiar with this new method. For those who are still using the old old school format of modifying your website or blog, it’s time to leap into the new way of doing things.

Edit : Amended code above.

4 Comments

  1. Lasker March 9, 2010
    • techieDan March 9, 2010
  2. AlvinC March 25, 2010
    • techieDan March 26, 2010

Leave a Reply