Paragraph Line Height with CSS

Setting paragraph line height (line spacing) is a snap when you use CSS. Place the following code in your external style sheet and it will appear to resemble double spacing . (Note: If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?")

p {line-height : 30px;}

Assigning this line-height property to your p (paragraph) tag will cause all of your paragraphs to be spaced at 30px. What if you don't want every paragraph on your site double spaced? No problem. Create a custom style class (example below) and assign that class to only the p tags you want spaced differently.

.lh30 { line-height: 30px; }

Notice I used .lh30 as the name for this class. Why? Because when I see it in my style sheet or HTML source code, I can quickly identify what it means. You can name it whatever you like, just be sure to assign the HTML tag the proper class name and always remember that classes begin with a period within your style sheet. When you assign the HTML tag to the class, you do not include the period.

In your HTML source code, the code looks like this when you assign the custom class to the paragraph tag:

<p class="lh30">

This technique works the opposite way as well. Just change the number of pixels. The higher the number the farther apart your lines will appear. The second paragraph in our example been assigned a custom class of 12px and I named it .lh12 in my style sheet. Go wild and add other CSS properties from past articles we have published, ie. colored text, colored backgrounds, etc. Cool, eh?