CSS Tutorial-Chapter Two

Introduction

Chapter two of our CSS tutorial is how to convert our existing HTML which uses tables into a "table less" web page web page which uses CSS: embedded, external or inline. Our examples use embedded.

Bullet points before we start slow and easy

Nothing in life is certain except death and taxes. Nothing in web publishing is error proof when using software either online or on your local computer. So always, always save output as a temporary file, then test before overwriting an existing file.
When it comes to testing web pages remember that there are many graphical browsers, so use several of the current browsers. Do not rely on viewing of test pages using only one browser.
We also have non graphical browsers, like JAWS.
Display devices such as Cell phones, PDA's and so forth may also be a consideration when viewing test pages.
The software used in this tutorial is presently in use by the author. Additional software is available which may better suit your needs or how you work.

What Will Happen To My Lovely Page Pages?

Trepidation, anxiety and the unknown accompany any change. So we invested an hour or so, to see if our web pages actually changed. We noted that the physical appearance while viewing did not change. Whew! All that hard work using tables was not undone. So what changed? Looking under the "skirts", the "hood" when we went to view, page source from our browser, a lot changed. We now have CSS near the top of the page source and all the style elements for the tables are removed from the page, but something else is now there.

The actual page itself did not change. Just the source code. Now how on earth did that happen? Let us take what happened a step at a time, or slow and easy.

Alt-A or Enter- Top of Page.

Step One

We selected a WCAG/WAI and WDG/W3C validated web page for the purposes of illustrating step one.

While a validated web page will not prevent the unexpected from happening, the probability for relatively error free HTML output after converting to table less CSS is enhanced.

So before you attempt the conversion, know that we have many organizations which offer peer to peer assistance. One such organization is Award Sites! They also have a resource section which lists the "validators" and other web building resources too. Visit the AS! HelpNow forum..

Table2CSS Converter is among the excellent software tools available to convert HTML with tables, to HTML without tables and with CSS. This one is trial ware to be used for HTML pages under 15 kb in size. All software of this class has the following advantages.

Reduce the percentage of HTML markup in your pages and get a better search engine ranking.

Reduce the overall size of your web pages and even further improve your positioning in search engines.

Replace the complex table layout in your website with simpler, easily maintainable CSS code.

Summary

Select one of your web pages which is published or a local computer file. We selected our sample page from the World Wide Web.

Open the software from your local computer and select a page.
Select either embedded, external or inline. Our examples use embedded.
Check the box for format output.
Select a output file name you can remember. The location too
Open several different browsers to view (4 above).
Compare the saved output file to the original
If you are satisfied, the answer the question-Has this process been slow and easy?

Conclusion

We selected a web page in our illustration from among our Faerie Clan. Knowing that an already excellent navigational system and code quality would provide a delightful visit from those who find this tutorial a benefit.

The top portion of CSS which was generated from this exercise is shown below. So the question was what will happen to my beautiful web pages built using tables? The outward presentation has not changed. So what did we really accomplish?

All of us wish to improve. All of us delight in doing something new and different. This is how we grow, mentally. But to do something new and different, or to follow the crowd just for the sake of "doing" should not be a valid reason.

Only the individual can determine for themselves whether this exercise is worth the time, effort and nominal expense. So we will leave chapter two with a question in mind, which will be covered in another chapter.

What would happen if we took the inline CSS into an external CSS file and called that file something like iamlearning.css? Then used something to tell all of our web pages to use that file too. Later we wish to make a change to all pages. Have you saved a great deal of time and effort?

Sample Web Page Code Error Free-Converted Source Code, partial

Note that the CSS would only apply to this illustrated web page and if place on all pages would apply to them too.

.ts_0 {
background-color: #ffff00;
border: 0px outset black;
height: 150px;
position: relative;
text-align: left;
width: 468px;
}

.ts_1 {
height: 19px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 468px;
}

.ts_2 {
height: 92px;
left: 0px;
padding: 0px;
position: absolute;
top: 19px;
width: 468px;
}

.ts_3 {
height: 13px;
left: 0px;
padding: 0px;
position: absolute;
top: 111px;
width: 468px;
}

.ts_4 {
height: 26px;
left: 0px;
padding: 0px;
position: absolute;
top: 124px;
width: 468px;
}

.ts_5 {
border: 0px outset black;
height: 450px;
position: relative;
width: 740px;
}

.ts_6 {
height: 150px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 740px;
}

.ts_7 {
height: 150px;
left: 0px;
padding: 0px;
position: absolute;
top: 150px;
width: 740px;
}

.ts_8 {
height: 150px;
left: 0px;
padding: 0px;
position: absolute;
top: 300px;
width: 740px;
}

.ts_9 {
border: 0px outset black;
height: 1344px;
position: relative;
width: 756px;
}

.ts_10 {
height: 1310px;
left: 8px;
padding: 5px;
position: absolute;
top: 8px;
width: 153px;
}

.ts_11 {
border: 0px outset black;
height: 491px;
position: relative;
text-align: left;
width: 104px;
}

.ts_12 {
background-color: #ffffff;
height: 491px;
left: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 104px;
}

.ts_13 {
background-color: #000000;
height: 489px;
left: 0px;
padding: 1px;
position: absolute;
top: 0px;
width: 102px;
}

.ts_14 {
background-color: #ffffff;
border: 0px outset black;
height: 468px;
position: relative;
text-align: left;
width: 102px;
}

.ts_15 {
height: 466px;
left: 0px;
padding: 1px;
position: absolute;
top: 0px;
width: 100px;
}

.ts_16 {
height: 1328px;
left: 187px;
padding: 0px;
position: absolute;
top: 8px;
width: 561px;
}

.ts_17 {
border: 0px outset black;
height: 42px;
position: relative;
text-align: left;
width: 205px;
}

.ts_18 {
height: 19px;
left: 2px;
padding: 1px;
position: absolute;
top: 2px;
width: 199px;
}

.ts_19 {
height: 13px;
left: 2px;
padding: 1px;
position: absolute;
top: 25px;
width: 199px;
}
</style>