To add a line height to a paragraph using CSS in Microsoft Expression Web 3

There are two ways to do this with CSS;

  1. By assigning a line height to all the paragraphs:
  2. In the Apply Styles or Manage Styles panel (task pane in earlier versions of Expression Web) click on ‘New Style’. In the selector box, type in ‘p’ and in the Block category, enter a value for line-height, say 20px.

    new_style_line_ht  

    Now all the paragraphs will have a same line height of 20px. 

  3. If you do not want a same line-height for all the paragraphs, define a class selector and assign a line-height value. The class selector could be generic (.line_ht) or specific to paragraph element (p.line_ht). (Both these concepts are explained later in the article.) To define these styles follow the same steps given above in pt. 1. Then apply the styles to the paragraphs. 

Difference between Generic Class Selectors and Specific Class Selectors

A generic class selector could be assigned to any element like <div class=” line_ht”></div>. Unlike this kind of class selector, the specific class selector will be applied only to those paragraph elements that have a class attribute containing the word ‘line_ht’, and no other elements. 

Take a look at these examples to make things more clear;

/*Element Selector */

p { line-height : 20px;}

<p>This paragraph will have a line-height of 20px</p>

<div> This paragraph will have the default line-height </div>

 

/* Generic Class Selector */

.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<span class=” line_ht”>This paragraph will also have a line-height of 20px</span>

<div class=” line_ht”>This paragraph too will have a line-height of 20px</div>

 

/*Specific Class Selector */

p.line_ht { line-height : 20px;}

<p class=” line_ht”>This paragraph will have a line-height of 20px</p>

<p> This paragraph will have the default line-height <p/> 

Filed Under: Expression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (4)

Leave a Reply | Trackback URL

  1. p { line-height = 20px;} ????!!!

    Shouldn’t it be p { line-height : 20px;}

  2. […] To add a line height to a paragraph using CSS in Microsoft Expression Web 3 « Microsoft Expression … saffronstroke.com/2009/09/23/to-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3 – view page – cached To add a line height to a paragraph using CSS in Microsoft Expression Web 3 September 23, 2009 — From the page […]

Leave a Reply