What is CSS? - CSS Tutorial

Introduction

This tutorial assumes beginner knowledge of HTML.

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

If you have ever wanted the ability to make your website look visually stunning, CSS is for you. To see the power of CSS, visit CSS Zen Garden. CSS Zen Garden displays exactly the same content (using the same HTML code) but uses different CSS to radically change the appearance of the content.

Tools

In order to walk through the curriculum you will need to setup some tools on your computer. These tools are free.

Komodo Edit - Runs on Mac OS X, Windows, Linux 
Allows us to write code much more efficiently by highlighting the syntax we will discuss throughout the curriculum.

Chrome - Runs on Mac OS X, Windows, Linux 
Modern web browser that allows us to preview and debug our content.

Tutorial

This tutorial is ordered by how we teach the content for the walk-in workshops, but the material listed can be learned on your own time. We encourage you to follow the tutorials in the order that we have provided.

Workshop 1

  1. Basics 
  2. Styling lists and links 
  3. Inheritance and cascade 
  4. Styling tables 
  5. Floats and clearing

Workshop 2

  1. Advanced CSS selectors 
  2. Styling forms 
  3. CSS box model for layout 
  4. CSS background images 
  5. Static and relative positioning 
  6. Absolute and fixed positioning

Frequently Asked Questions

These questions are meant help you solve specific, but common, problems that may come up when using this language. They are meant to be read after you have gone through the tutorial and have begun actual development.

How do I get my font to appear consistently in different browsers?

There is no way to guarantee that a font will display accurately in every browser on every computer. There are, however, 11 fonts that are almost always available. These are called "web safe fonts." You can find more information on web safe fonts, and the alternative "font stacks" here: CSS text styling.

How can I build a simple three column layout?

A three column layout is a very appealing and popular design thus there is no need to start from scratch. The following link will take you to a list of three column CSS files of various designs that you can easily apply to your website: http://css-discuss.incutio.com/wiki/Three_Column_Layouts.

Supplementary Resources

In no particular order, these external resources supplement the tutorial by providing shortcuts to commonly used information and further learning.

Text Styling

Introduction to typography using CSS.

Web Design Concepts

Higher level step through of some of the theories and concepts behind developing a website. Discusses topics like typography, color schemes, wire framing, information architecture, and plenty more.

Shorthand reference

"Cheat sheet" for developing CSS. Condenses most of the knowledge you need for developing CSS on one web page.

Headers, footers, columns, and templates

Takes a deep look at page structure in HTML and CSS from the perspective of user-centered design. This is a great resource if you plan on developing a public facing website available to many users.

Last modified: December 30, 2013