Mr. DaBag
February 15, 2005
Lesson 2

Introduction

Thank you for choosing to take the HTML Helpers' Basic CSS class. In order to complete this course, you must already be familiar with HTML coding, and be comfortable with formatting techniques. This class will not teach you HTML. If you are not familiar with HTML, please let your instructor know that you need to take the Basic HTML class instead. You will need a text editing program to complete your lessons and homework. Although it is possible to use something like notepad or wordpad, I suggest installing EditPad Lite, which is a free download. This program will allow you to have more than one file open at a time, which can save time with your editing. Last, but not least, you will need webspace to upload your homework. If you do not already have webspace, please see the HTML Helpers' Resources page for a list of free hosts.

In this course, you will learn to add formatting information to your webpage using CSS code in two manners. The first manner will be to add CSS code to the HTML document itself. The second manner will be to create a separate CSS file to store all formatting information.

Adding CSS coding to an HTML document provides you with a way to format your pages individually. This method is best used when you have formatting information which pertains only to one HTML document. This method is not a good way to format an entire site which uses the same style information on multiple pages. First, and foremost, using this method to format an entire site requires redundant typing, and who wants that? Second, using this method to format an entire site increases the size of each of your HTML files, and causes you to have to search through more code to update your pages.

Creating a separate CSS file and linking that to each of your HTML documents using one tiny snippet of code allows you a way to format an entire site in one fell swoop. Imagine not having to type in your background image, font type, text size, text color, scrollbar colors, paragraph alignment, etc. on every page you create on your site. Imagine creating a new page for your site and having all of that formatting already applied to it. Sounds nice, right?

Now, let's take this imagining one step further. Let's imagine you have created an extensive site and have painstakingly applied formatting information to each HTML element on each individual document. That takes a lot of time. Most times, this formatting takes longer than the creation of the content for the page. Now imagine that you have tired of your background set. It's not all that difficult to simply upload new graphics, making sure the names are the same as what you had before to change the look of your site; however, what if your text color disappears on your new background? I actually felt you all cringe knowing you would have to update each page within your site with the new text color information. And, that's just one element that could cause a problem. If you have a large site, the time it takes to reformat each page may be keeping you from changing your look. You now feel trapped in a layout that you no longer like.

Now, imagine being able to open one file, make a few simple changes and have them apply to the many pages you have in your site. Like magic, the look of your entire site can be updated in minutes. Was that a sigh of relief I heard? Are you feeling less trapped? Are your creative juices flowing again?