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

What Is CSS?

Syntax & Rules

Methods of Use

Writing a Style Sheet

Putting It All Together

CSS Resources

Evaluate this Tutorial

 

Style vs. Markup

In the course of learning CSS you will probably come across this phrase: Use HTML for structure, not design. This is a very basic tenet of web design that is often neglected. The original idea of marking up a document (in SGML, HTML, or XML) was to convey its content in an ordered and structured manner. In the simplest of terms, markup is supposed "to describe what your content is, not how it looks."1 As such, some versions of WYSIWYG editors, such as Macromedia Dreamweaver and Microsoft FrontPage, will use HTML tags and attributes to style your web pages. Using WYSIWYG editors is not necessarily a bad thing; however, some HTML purists would balk at the use of such editors and the use of HTML for stylistic purposes. It is completely possible to control ALL of the aesthetics of your webpage with CSS.

Why does this even matter? For one thing, separating content (which is in a markup format) from style will allow easy readability of the source code. As it stands, many webpages rely on tables, spacer images, and other various HTML hacks that use HTML tags in ways in ways they were not originally intended to be used. How many times have you looked at the HTML code of a really cool webpage and thought "Wow, what a mess? How will I ever understand what correlates to what?" The code may work, but it doesn't easily convey the structure of the webpage (unless, of course, you think like a web browser). Separating content from style also increases the accessibility for impaired users who may be blind or deaf. In some cases, if you're designing websites for federal agencies, making a website accessible to impaired users is a requirement subject to Section 508 of the U.S. Americans with Disabilities Act of 1998.

At this point, you may think I'm just standing on a soapbox and preaching the way it should be. Well, in some ways I am, but in many other ways I am telling you like it is. Many web pages now rely on CSS and neatly structured HTML to complete many tasks. While we will only be dealing with the basics of CSS level 1 in this tutorial, let me just tell you a few things that can be done with CSS.

One of the most powerful things you can do with CSS is control the positioning of elements in your webpage down to the pixel. This capability was originally incorporated into CSS 1 (although most browsers at the time did not support positioning). So what, you say? Well, if you've ever created a webpage with multiple tables, columns, and rows all nested within each other with spacer images controlling where one ends and another begins just to create a basic layout....you can forget about all that with CSS. With CSS positioning, you can put one thing on the left, one thing on the right, and one in the middle without ever having to create a table. Pretty cool, huh! Ever struggle with spacing your lines of text so your pages will be more easily readable (e.g. for a paper you need to post online as a webpage for a class that adheres to APA guidelines)? With straight HTML, this would be a very time-consuming task. With CSS you would need to write one line of code and that's it.

Alright, enough of the talking, let's get down to business!

next section >

 

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

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster