Cascading Style Sheets: A Primer
Computing Resources >> Instruction >> Tutorials >> Web Development >> CSS 

Style vs. Markup

Syntax & Rules

Methods of Use

Writing a Style Sheet

Putting It All Together

CSS Resources

Evaluate this Tutorial

 

What Is CSS?

For whom is this tutorial intended?

Building web design skills is very similar to learning math...one set of principles and skills will build on another. If you understand basic HTML, you will find that CSS is easy to learn and apply. Therefore, this tutorial will assume at least a basic understanding of HTML coding. If you aren't familiar with basic HTML tags and attributes, it would be best to start there and then begin to incorporate style sheets into your web pages.

CSS is an acronym for Cascading Style Sheets. A style sheet is simply a text file that controls and manipulates the presentation of your content (which in many cases will be marked up in HTML format). Style sheets can make your life much much easier because one style sheet can control multiple HTML files. Why is that so powerful? Well, let's say that you wanted to change the background color and the text color of 500 separate webpages. Using HTML attributes, you would probably have to change 500 files; using one style sheet, you only need to change one file (i.e. the CSS file). Using CSS to design your website will allow you much more flexibility, it will save time, make site maintenance easier, decrease download times, and best of all, you don't need an expensive WYSIWYG editor like Dreamweaver or FrontPage to make elaborate web pages.

There are issues that complicate matters though (big surprise ehh?). Browser compatibility and standardization was (and still is) poor at best. In the early days of the Web, different browsers supported different HTML tags and attributes. Even those that supported the same attributes differed in the ways they actually rendered the HTML that the browser read. Sadly, this is still very much the case! And, lucky you, the case with CSS is no different.

Like many other programming languages, CSS has different versions which are capable of different and increasingly complex tasks. In CSS, these are called levels (currently there are three different levels). CSS level 1 was formally adopted in 1996 by the World Wide Web Consortium (the W3C) in the midst of the browser wars between Internet Explorer and Netscape). Since then CSS 1 has been revised once (in 1999), CSS level 2 was adopted in 1998, and updated to CSS level 2.1 (the current standard as of September, 2003); CSS level 3 is in the works. Despite the fact that CSS 1 and 2 have both been around for some time, many new browsers still do not support all of the features specified in either version or in the same way. For instance, IE version 5.5 on the PC may render a CSS rule completely differently than IE version 5.5 for the Mac. And, (at least in general) older browsers (i.e. versions 3 & 4) have strong support only for CSS level 1. For a complete reference of CSS 1 browser support, take a look at this CSS 1 support chart. Learning which browsers support what CSS properties is challenging and only comes with time and patience. Because current browser suport for CSS 1 is strong (and because it is a good starting point), we will only concern ourselves here with CSS 1.

next section >

 

Watch the video
screenshot
choose format/speed
real media dial-up | broadband

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster