A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Setting up .

Before we can do any actual learning, we first need to get all the required files onto your computer, so that you can actualy modify and save things as you go. By default we tell you to save to your desktop, but idealy you should save it to your Z: drive or a thumbdrive.

Instructions.

Firstly, create a new folder on your desktop entitled "I am a CSS Dummy." If you feel insulted don't worry, in the end we will rename it. Right click here and click "Save Link As." and save the file in your new folder as "tut.css," then do the same for this file (save it as "tester.htm"), this file (save it as "mario.gif") and this file ("whiteDotBack.gif"). Now open "tester.htm."

You will notice that this page is very bland. If you have not changed your system color and font settings this page should be a few lines of Black, Times New Roman, 12pt text on a grayish-white background.

This page is bland because it is only simple HTML, without the FONT and TABLE elements that are often used to define the layout and look of pages. By the end of this course we will have changed this bland page into something... interesting...

Next you will need to click on your [START] button and then "Run..." Type in 'notepad' in the blank and click [OK]. This is notepad, the simplest of text tools, and the most powerful thing you really need to design in CSS. There are other tools, such as Macromedia Dreamweaver, Microsoft Frontpage, and Adobe GoLive, but all you really need is your trusty Notepad. This is where we will be making our Cascading Style Sheet for the tutorial. Open "tut.css" in Notepad by clicking [file] and "Open," then find it and open it. Unfortunatly, because of the way this server works, "tut.css" is not blank, so make it blank my selecting everything, and hitting the [Delete] key.

Everytime you see a peice of text inside of a box like this, you can modify your "tut.css" file (by adding the highlighted text), save it, and view "tester.htm." If it has not changed in the way described, try pressing [F5] on your keyboard, and if it still does not change, double check your work.

When calling a new target be sure to srart on a new line, so targeting "a" and ".testerP1" will look like this.

a {
.......
}

.testerP1 {
.......
}