As we emphasized in our introductory HTML tutorial HTML 101, HTML is a markup language, not a layout language. In other words, HTML is all about defining the logical structure of a document, not how it looks. A completed HTML document should tell the browser where paragraphs stop and start, which elements are headlines, which are quotations, which are images, which are lists, and so on. It should say nothing about what fonts or colors are used, where the sidebar lives, which direction the menu flows in, or anything else that relates to document display.

Why is this important? For three main reasons:

1. Site designs change frequently. When you embed formatting commands into a document, you make it difficult to change later. By decoupling your content from its display rules, you greatly simplify future changes to the design - you'll be able to alter the display rules without digging around in the content.
2. Webmasters are seldom concerned with a single document -- sites comprises dozens, or hundreds, or thousands of pages. If you maintain a 3,000-page site with formatting embedded in the content of each one, and decide you want to change it later, you're going to have a heck of a job on your hands. By decoupling content and design, you can tweak design rules in a single external document and have the changes apply to your entire site instantly.
3. Keeping HTML documents simple and handling display issues with stylesheets makes your pages more accessible - readers using assistive technology such as screen readers for the blind will have a much easier time navigating your document.

CSS, or Cascading Style Sheets solve these problems (and more) with a straightforward syntax that lets you create and apply design rules to unstyled HTML documents.

This tutorial is divided into two parts: CSS 101 (this part) covers CSS basics: decorative elements, lists, tables, margins and padding, borders, and related techniques. CSS 201 will cover CSS page layout techniques. Both tutorials assume you've already read HTML 101.