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

 

Double Spacing with CSS

Ever want to double-space your HTML text so it's easier to read? Again, with CSS it is very easy to do. And actually, it's being used on the very text you are reading right now! So...this is what we do:

body {color: black; font-size: 12px; font-family: Helvetica, Arial, non-serif;}
a:link {color: #FF8C00;}
a:visited {color: #FF8C00;}
a:hover {color: #FF8C00; background: #ADD8E6; text-decoration:none;}
a:active {color: #FF0000;}
p {line-height: 2em;}


Example of double-spacing with CSS in action...is the text you're reading

Explanation: This one new line will double-space all the text you enter within <p> tags (paragraph tags). So...what's "em" stand for? Em is a unit of measure. One em is equal to the height of one unit of text in your document. In our case, since we have our text set to be displayed at 12 pixels in height, one em is 12 pixels, 2em is 24 pixels. So, when we set the line height at 2em, each line will be 24 pixels high...remember, it's relative to the height of the text which you've specified in earlier selectors. If we had set the font size to 30 pixels and we set the line height to 2em, each line would be 60 pixels high. If that's too much space, you can also use decimal points...for instance, the text you're reading is actually set to 1.7em. This gives you great control of your text layout.

If we wanted to, we could have inserted this in the first declaration block in the style sheet. If we did that, every line of text within the HTML document would be double-spaced regardless of what HTML tag it fell into. That could be good and bad. The first line would just look like this:

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

next section >

 

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

© 2003 Chad Hutchens | iSchool | UT Austin | webmaster