Ok, lets look at the main body of that code again. All the attributes we are going to move to our CSS file in part two are highlighted.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Tutorial Page - Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFCC" text="#CC33CC"> <div align="center"> <h1><font color="#FF0000" size="5" face="Verdana, Arial, Helvetica, sans-serif"><strong>The Future is now - CSS to the masses</strong></font> </h1> <strong><font color="#333333">Cascading Style Sheets</font></strong><br /> <strong><font color="#333333"> Part One - Go backwards to go forwards</font></strong> <p> </p> <h3 align="left"><em><font color="#333366" size="+1" face="Times New Roman, Times, serif">This may look like a simple web page, and it is, but you'd be amazed at all the tags (attributes) that it contains!</font></em></h3> <p align="left"><em><font size="+1" face="Georgia, Times New Roman, Times, serif">This line should be the default purple colour, italic in style and Georgia in type.</font></em></p> </div> </body> </html>
Thats a lot of highlighting! Just imagine then a website with a lot more details than this basic page , and over 50 of them with these attributes. A webmasters nightmare to be sure, but we are going to cure that. To keep a website clean, consistent throughout in terms of look and feel, and best of all easy to maintain and make site-wide changes, we remove them all from the web pages and stick them in just one .css file!!, how easy is that.
So with all our highlighted code removed, we are left with this:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Tutorial Page - Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div> <h1>The Future is now - CSS to the masses</h1> Cascading Style Sheets <br /> Part One - Go backwards to go forwards <p> </p> <h3>This may look like a simple web page, and it is, but you'd be amazed at all the tags (attributes) that it contains!</h3> <p>This line should be the default purple colour, italic in style and Georgia in type.</p> </div> </body> </html>
Copy and paste the above code into a blank html document and save as step2.html. Much better, easier to read, but how does the page look now?
Once you have previewed it here , use the navigation links below to continue.
Back to CSS Part One Page One | Forward
to CSS Part One Page Three 