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

View this page's html file and css file

Time For a Change in Thinking

For too long have web designers been forced to write pages and pages of code, over and over, just to make simple web sites look the way they want. For too long have web designers been confined to browser specific tags, and hit-and-miss mark-up. For too long have we had to design our sites around what the browser would allow. It is time for web designers to fight back, to design the way they want, to break free. It is time for a change in thinking. It is time to step into the future. It is time for CSS design.

What is CSS?

Cascading Style Sheets, they are the future. Cascading Style Sheets allow you to separate content from design. Since the beginning of time (internet time) the design of a site and its content were nearly one, constructing the correct markup for the design often added pages of redundant code to the mark-up.

For any experienced web designer it is the word redundant that grates the most at the nerves. If you wanted certain paragraphs of text formatted differently than the rest, you were often forced to repeat the same FONT and P tags over and over, adding many unneeded lines to the code.

CSS allows you to define the characteristics you want separately and point to the elements you want formatted in such a way. This allows you to use the same definition to point to multiple elements without wasting space and time.

So why use CSS?

The idea of this exercise is to show you how easily you can transform the design of a web site without ever changing the actual markup in the code. The reasons for doing range from the simplification of your own personal site, to creating a rock-solid site for an employer.

Perhaps you have been contracted to design a page for a completely computer illiterate client (there are still a few). By using Cascading Style Sheets to house the actual design of the site outside of the HTML markup, you are able to allow your client to modify the text of the site without being concerned about damaging the layout.

Perhaps you have been contracted to design a large, multi-page web site. By storing all of the design information in a separate file you will decrease the overall size of the site by having all of the pages link back to a single CSS file. Also, CSS can do everything Tables can do with less mark-up, further slimming your site.

Perhaps you have been contracted to design a web-application to serve information to clients or employees of a particular firm. By putting design information in a stand alone CSS file you can concentrate on designing the actual application, and not making sure that it has the correct layout mark-up in its output.

Gone are the days of extensive and redundant mark-up just to make one simple paragraph look "just right." With CSS you can achieve spectacular results with less hassle, increasing productivity (and reputation).

What is Required?

The only requirement of using CSS to format your site is heavy classification and identification of you elements. This can be done by placing CLASS and ID tags inside of the declaration of your elements. Here is an example.

 <p class=”p1” id=”sampleP”>This paragraph is part of the ‘p1’ class and is identified as the ‘sampleP’ paragraph.</p>

We will discus this further as you begin the tutorial. Just keep in mind, that when coding your own sites, you should CLASS and ID as much of the page as you can. Your viewers can not see it, and it only makes your job easier in the end.

Begin by following the links under the "Topics" section.

Happy reading.