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

What Is CSS?

Style vs. Markup

Syntax & Rules

Methods of Use

Writing a Style Sheet

Putting It All Together

CSS Resources

Evaluate this Tutorial

 

Text Formatting with CSS

We want our text to be 12 pixels high, black, and in an Helvetica, Arial, non-serif font. To write a CSS file, you can simply use Notepad on a PC (or any other simple text editor). If you're on a Mac, try using BBEdit or TextEdit. We are going to write an external (attached style sheet) and link it to our HTML file. So to begin formatting our text, we would write the following in our CSS file:

body {color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}

Explanation: What we have done here is declare that all text that is written within the <body> tag will be rendered in black, 12 pixels high, and will be in either Helvetica or Arial font with non-serif lettering. If the computer has the Helvetica font installed on it, it will render the type in that font first. If it doesn't have Helvetica, it will look for the Arial font. If it doesn't have that font either, the computer will simply render the text in the font set up as the default on that particular computer. This is why they are called cascading style sheets (i.e. it cascades down to the next available setting/declaration). If you wanted to render some text differently, you could set up style declarations for other HTML tags (for instance, for the <p> tag) and they would override the style declarations that we have laid out for the <body> tag.

Also, we should note the different ways we could have done this. First, instead of using "black" for the color, we could simply write another color's name. Take a look at this chart for a list of color names and hex codes. If you don't want to use color names, you can also use the hexidecimal code (a six character alphanumeric code). The hex code for black is #000000. You must always preceede a hex code with the pound (#) sign. And last, you could also use the RGB equivalents for colors by writing color: RGB (0, 0, 0) where the three numbers (from 0 to 255) indicate the level of red, green, and blue hue, respectively.

next section >

 

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

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster