<< Return to Syllabus

CSS Tutorial

CSS stands for Cascading Style Sheets. These style sheets give a powerful and elegant way to handle the presentation of HTML documents. While HTML formerly had to include presentational parts to its code, that was primarily because there was no alternative.

Using CSS gives the precision for styling specific HTML elements, the power to handle the presentation of many webpages with a single style sheet, and the flexibility to modify or replace that style sheet - and thus change the look of an entire website - at a moment's notice.

This tutorial is designed to introduce you to CSS, let you know the basic parts, and then get you started on using it to handle presentation in your own webpages. Throughout the tutorial there will be small examples of CSS code to demonstrate various things you can do. Try playing with each example on your own to better understand which parts of the code create which parts of the example webpage. Also, this tutorial is designed to be skinny so that you can resize your browser window and put this beside a text editor for your own CSS coding.

When learning something new, it's always nice to have a goal in mind to see what you're trying to achieve. So, here's an example webpage: before CSS and after CSS. This assumes that you already understand the HTML code involved. By the end of this tutorial you'll be able to understand all of the CSS code that made it. Then, you'll be able to start adding CSS to webpages of your own.

If you're curious, you take a peek at the code for this webpage. Otherwise, click the link below to take the first step towards learning CSS.


>> Step 1 >>