Basic CSS Tutorial

I've been asked about CSS quite often and I was asked to create a simple tutorial to help you understand what CSS is and how to use it. During and at the end of this tutorial, I'll provide you with any code you might want and a condensed version of the site. The main reason I learned CSS is because I'm lazy; I realized a long time ago that redecorating a site is a lot easier when there's no previous formatting on the pages. I still build new templates all the time but I only have to copy and paste the "meat" of the page to the new template and old formatting doesn't get left in it to make a mess. And once I've redecorated with my basic template, I can change the whole look of a site by creating a new CSS fille.
You can use the Next and Previous buttons at the bottom of the page to work on the lessons in order or use the menu up top to find something specific.
Please take a moment and look at the front pages of these two websites, they have the same TEMPLATE with different CSS files. Most of the difference is in simple things like borders, background, colors and fonts. You can see that, once you find a template you like, it's possible to decorate it in many different ways. Even this tutorial has the same template as these pages.

Site One - Site Two
Before you can understand CSS, you need to know a little bit about HTML and the difference between the two.
HTML, in a nutshell, is a computer language used to build a web page. The only thing you really need to know is that HTML is mostly a collection of "boxes" - well, I call them boxes. The boxes I use most often on my sites are headings (h1, h2 h3, etc.), divisions (div) and spans. With these three boxes and some line breaks (br), you can do a lot of amazing stuff. The commands used to create these boxes are called TAGS - open <div> and close </div>. Images (img) and line breaks (br) are not boxes and do not close.
CSS is a set of directions on how to decorate HTML. You can easily set colors, sizes and backgrounds for any box AND it's contents. If you don't like the defaults for a box, you can modify them (like the blockquotes I used here). In addition, you can use CSS to change the way a site looks on a cell phone or other small device.
So STEP ONE: set up a basic web page in whichever way you feel most comfortable but DON'T decorate it all. No font color, no background, nothing. If you prefer, you can copy this one. Be sure to name it with an .htm or .html extension. (They're the same thing and it doesn't matter which one you use. I'm lazy so I don't use the L at the end.)
  • Once you have that page created and saved, close it in your HTML editor and open it in your text editor.
  • You'll also want to open it in your favorite browser - the easiest way is to
    • open the folder where you created the page,
    • in most cases, just double-click it
    • if that doesn't work, right-click the page name,
    • choose Open With, then
    • choose your browser.
  • If you don't have the option to Open With (older Windows versions), hold down the Shift key when you right-click.
Next