CSS Tutorial-Chapter Three

Introduction

Chapter three of our CSS tutorial may be redundant for some, but others will hopefully be able to develop order out of what may seem like "chaos."  In this chapter we will discuss a technique for saving a temporary file, why we should validate our temporary file and finally in later chapter whether to use our CSS as embedded, external or inline.

Saving A Temporary File

In the picture to your right at the top are original files or web pages. On the bottom are temporary files or web pages.  A technique graphic artists use is to save temporary graphics at each stage of development which permits them a return to a previous saved graphic, if the newest graphic is not to their liking.  If you followed that technique for saving your web pages then you would except to have as an example criteria39b, criteria39c and so forth.

The lesson learned from above is to name temporary files and place them in the same place consistently or uniformly and save progressive updating or corrections until you are satisfied with the results.  Remember consistency!

Validating A Temporary File or Web Page

The reason for validating a temporary file or web page is to identify HTML coding errors, which would possibly hinder converting an existing web page which uses tables, into a HTML document which uses CSS. There is absolutely nothing wrong with using tables.  This author still initially uses tables, but converts most to CSS.  Tables are convenient to layout pages, place graphics and other elements on a web page.

Step One

We randomly selected a web page from the internet which used tables. Did a cut and paste into a temporary file on our local computer and called the file D'Fire1.  Then opened our FireFox web browser and found that there were 255 events loaded and the total elapsed time was 131899 milliseconds or 132 seconds. That is 2.20 minutes based on a benchmark using a 56 kbps dial up modem. Events are instructions which are processed by the browser, enabling a web page to be viewed in the browser. Time is calculated based on a dial up modem, which contrary to popular belief is the dominant connection used in the world to gain access to the internet.

 

 

Step Two

Next we selected the same web page from the internet which used tables using our FireFox browser with Tidy inline.  Found the following warnings (which are not the same as HTML errors), made these corrections shown below and saved the webpage downloaded as D'Fire2.

line 16 column 42 - Warning: missing </font> before </td>
line 14 column 75 - Warning: missing </font> before </td>
line 14 column 24 - Warning: missing </font> before </td>
line 18 column 1 - Warning: plain text isn't allowed in <tr> elements

Finally we performed a conversion using our Table2CSS Converter, applauded in chapter two of this tutorial. Then we viewed the converted file D'Fire2 in our FireFox browser and found the only 16 events were required to render the web page in 19257 milliseconds or 19 seconds.

Step Three

Hopefully last task would be a comparison of Fire1 to Fire2.  Oh my goodness there is a big difference.  The original table has a border and line separation for the rows and columns. A careful inspection of the HTML source let us see that inline CSS was used to style the table.  So the CSS was copied into the converted file, a comparison revealed that there was absolutely no difference between the original web page and the converted and validated web page.

Conclusion

Dear reader the intent of this tutorial is to teach, not preach.