<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Saffron Stroke - Your Web Design Resource &#187; add line-height to paragraph</title>
	<atom:link href="http://www.saffronstroke.com/tag/add-line-height-to-paragraph/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.saffronstroke.com</link>
	<description>Design Blog</description>
	<lastBuildDate>Wed, 11 Jan 2012 06:36:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>To add a line height to a paragraph using CSS in Microsoft Expression Web 3</title>
		<link>http://www.saffronstroke.com/2009/09/23/to-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3/</link>
		<comments>http://www.saffronstroke.com/2009/09/23/to-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 16:27:10 +0000</pubDate>
		<dc:creator>Minal</dc:creator>
				<category><![CDATA[Expression Web]]></category>
		<category><![CDATA[add line-height to paragraph]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Expression Web 3]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[line height]]></category>
		<category><![CDATA[paragraph]]></category>

		<guid isPermaLink="false">http://saffronstroke.com/?p=721</guid>
		<description><![CDATA[There are two ways to do this with CSS; By assigning a line height to all the paragraphs: 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, [...]]]></description>
			<content:encoded><![CDATA[<div align="left" style="float: none; clear:right; padding: 0px 5px 5px 0px;"><a name="fb_share" type="button_count" share_url="http://www.saffronstroke.com/2009/09/23/to-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3/"></a></div><div class="tweetmeme_button" style="float: right; margin-left: 10px;; margin-top:-2px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.saffronstroke.com%2F2009%2F09%2F23%2Fto-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.saffronstroke.com%2F2009%2F09%2F23%2Fto-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>There are two ways to do this with CSS;</p>
<ol>
<li>By assigning a line height to all the paragraphs:</li>
<p>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.</p>
<p><a href="http://www.saffronstroke.com/wp-content/uploads/2009/09/new_style_line_ht1.jpg" rel="lightbox[721]"><img class="alignnone size-full wp-image-724" title="new_style_line_ht" src="http://www.saffronstroke.com/wp-content/uploads/2009/09/new_style_line_ht1.jpg" alt="new_style_line_ht" width="434" height="416" /></a>  </p>
<p>Now all the paragraphs will have a same line height of 20px. </p>
<li>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. </li>
</ol>
<p><strong>Difference between Generic Class Selectors and Specific Class Selectors</strong></p>
<p>A generic class selector could be assigned to any element like &lt;div class=” line_ht”&gt;&lt;/div&gt;. Unlike this kind of class selector, the specific class selector will be applied only to those <strong>paragraph</strong> elements that have a class attribute containing the word ‘line_ht’, and no other elements. </p>
<p>Take a look at these examples to make things more clear;</p>
<p><strong>/*Element Selector */</strong></p>
<p>p { line-height : 20px;}</p>
<p>&lt;p&gt;This paragraph will have a line-height of 20px&lt;/p&gt;</p>
<p>&lt;div&gt; This paragraph will have the default line-height &lt;/div&gt;</p>
<p> </p>
<p><strong>/* Generic Class Selector */</strong></p>
<p>.line_ht { line-height : 20px;}</p>
<p>&lt;p class=” line_ht”&gt;This paragraph will have a line-height of 20px&lt;/p&gt;</p>
<p>&lt;span class=” line_ht”&gt;This paragraph will also have a line-height of 20px&lt;/span&gt;</p>
<p>&lt;div class=” line_ht”&gt;This paragraph too will have a line-height of 20px&lt;/div&gt;</p>
<p> </p>
<p><strong>/*Specific Class Selector */</strong></p>
<p>p.line_ht { line-height : 20px;}</p>
<p>&lt;p class=” line_ht”&gt;This paragraph will have a line-height of 20px&lt;/p&gt;</p>
<p>&lt;p&gt; This paragraph will have the default line-height &lt;p/&gt;<span id="_marker"> </span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.saffronstroke.com/2009/09/23/to-add-a-line-height-to-a-paragraph-using-css-in-microsoft-expression-web-3/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

