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

What Is CSS?

Style vs. Markup

Syntax & Rules

Methods of Use

Putting It All Together

CSS Resources

Evaluate this Tutorial

 

Writing a Style Sheet

Planning: The essential ingredient

 Before you begin writing a style sheet (or designing any website in the first place), you must do some planning. Here, you must decide on a few basic elements of your website or web page. For our purposes, we'll agree on the following basic styles we want to incorporate into our website. I'll show you how to implement these styles in the order they are outlined below.

  • Text size: We want our text size to be readable, right? Right! We'll set our text size to 12 pixels high. Note: There is more than one way to set text size and there are pros and cons to each method. Please take a look at this explanation of the different methods for text sizing with CSS.

  • Text color: We'll stick to plain old black. I'll explain how to change it to another color though.

  • Text font and family: For ease of reading, we'll stick with a steadfast Helvetica, Arial, non-serif font. Non-serif simply means that there aren't any stylistic squiggles on the tips of the letters. Non-serif has proven to be easier to read in an online environment.

  • Background color: We'll set our background to a very light grey color. This is easy on the eyes when combined with black text.

  • Link colors and style: We're going to do something really cool here. We'll create roll-over effects for your hyperlinks using something called a pseudo-class. In the past, roll-overs were done with Javascript and images, but it's much easier to do it with CSS. These links will be orange, but when the mouse rolls over the text, the text itself will stay orange, its background will change to blue, and the underline will disappear. Don't worry, it's not that complicated!

  • Text spacing: Much like we write APA styled papers with double-spacing and indents for easy reading, we'll set up our text on the web page to do the same thing.

That's about it. After we're done doing that, I'll discuss some other cool things you can explore with CSS after you've mastered the basics.

next section >

 

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

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster