minitutorials main logo the place to learn online

Sponsor This Site!
Sponsorship Details - miniTutorials is taking enquiries into various Sponsorship opportunities. Available NOW! Read More on our Sponsorship page.
Discussion Forums
visit the mini tutorial forums
For expert help and advice on any of our Tutorials or anything else .... visit the forums and ask away!!

Last Five Posts :-

Click on a Topic Title
Google Ads

Cascading Style Sheets

Part One - Go backwards to go forwards

Strange title, but the truth. What we are going to do here is create a single web page in the normal way, using a few colors, fonts and other formats along the way, see what it looks like, then strip the web page of all these 'attributes' and see what it looks like then - it wont be a pretty site (sic).

That's all there is to part one, very simple, but a grounding in which to understand the basics and build upon in future parts.

Part Two will see the creation of a .css file, where we put all those attributes stolen from part one. Linked to the bare page we will end up with here, will see technicolor glory return to our screens once more.

A word to the wise - first we concentrate on getting CSS sorted, then we will validate to HTML and CSS standards. Also, those familiar with the use of Style Sheets rather than inline styles, will see some of the example code as rediculous. Trust me when I say, although it may look like old style code, it is still in use today and I have adapted a real use-case scenario.

So lets get on with it, I am using Dreamweaver 8 and previewing in IE6 and Firefox , you can use Notepad and Opera7 if you like, it does not matter at this stage.

Cut and paste the following code into a blank html document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Tutorial Page - Step 1</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>&nbsp;</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>

Save the file as step1.html. A very simple looking page, but already those attributes are making a mess of the code.

Take a look at the result of the above code here and then use the navigation below to continue.

left arrow depicting to go back Back to CSS Index Page | Forward to Part One Page Two right arrow depicting to go forward

About Us | Site Map | Privacy Policy | Accessibility |Contact Us | ©2003 - 2007 miniTutorials.com