<?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; paragraph</title>
	<atom:link href="http://www.saffronstroke.com/tag/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>
		<item>
		<title>Set Text Spacing in Microsoft Expression Web 2</title>
		<link>http://www.saffronstroke.com/2009/01/27/set-text-spacing-in-microsoft-expression-web-2/</link>
		<comments>http://www.saffronstroke.com/2009/01/27/set-text-spacing-in-microsoft-expression-web-2/#comments</comments>
		<pubDate>Tue, 27 Jan 2009 10:00:05 +0000</pubDate>
		<dc:creator>Minal</dc:creator>
				<category><![CDATA[Expression Web]]></category>
		<category><![CDATA[character]]></category>
		<category><![CDATA[character spacing]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[Expression]]></category>
		<category><![CDATA[Expression Suite]]></category>
		<category><![CDATA[Expression Web 2]]></category>
		<category><![CDATA[Font]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[line height]]></category>
		<category><![CDATA[line space]]></category>
		<category><![CDATA[Microsoft]]></category>
		<category><![CDATA[paragraph]]></category>
		<category><![CDATA[settings]]></category>
		<category><![CDATA[space]]></category>
		<category><![CDATA[spacing]]></category>
		<category><![CDATA[web page]]></category>
		<category><![CDATA[webpage]]></category>
		<category><![CDATA[word spacing]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://saffronstroke.wordpress.com/?p=396</guid>
		<description><![CDATA[Spacing can be set between characters, words, lines and paragraphs. The Font dialog box contains text space settings for characters and words; whereas the Paragraph dialog box lets you adjust the space between lines and paragraphs. To set spacing between characters: 1.       In Design, Split or Code view; select the piece of text you want [...]]]></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/01/27/set-text-spacing-in-microsoft-expression-web-2/"></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%2F01%2F27%2Fset-text-spacing-in-microsoft-expression-web-2%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.saffronstroke.com%2F2009%2F01%2F27%2Fset-text-spacing-in-microsoft-expression-web-2%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p class="MsoNormal" style="margin:0 0 10pt;"><span style="font-size:small;font-family:Calibri;">Spacing can be set between characters, words, lines and paragraphs. The Font dialog box contains text space settings for characters and words; whereas the Paragraph dialog box lets you adjust the space between lines and paragraphs. </span></p>
<p class="MsoNormal" style="margin:0 0 10pt;"><span style="font-size:small;font-family:Calibri;">To set spacing between characters:</span></p>
<p class="MsoListParagraphCxSpFirst" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">1.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">In Design, Split or Code view; select the piece of text you want to adjust the spacing for. </span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">2.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">Go to <strong>Format</strong> &gt; <strong>Font</strong>…</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">3.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">In the Font dialog box, switch to <strong>Character Spacing</strong> tab.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">4.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">In the Spacing drop down box, choose Expanded to increase the space or Condensed to decrease the space.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">5.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">If you want set the spacing to be normal (default selection) but want to change that a bit, then in the ‘<strong>By</strong>’ drop down box, set the number of points to specify the exact increase or decrease in the character space.</span></p>
<p class="MsoListParagraphCxSpLast" style="text-indent:-.25in;margin:0 0 10pt .5in;"><span style="font-size:small;font-family:Calibri;">6.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">Click OK.</span></p>
<p class="MsoNormal" style="margin:0 0 10pt;"><span style="font-size:small;"><span style="font-family:Calibri;"><span style="color:#888888;"><strong>TIP:</strong> You can also choose the position of the characters in the <strong>Position</strong> drop down box.</span></span></span></p>
<p class="MsoNormal" style="margin:0 0 10pt;"><span style="font-size:small;font-family:Calibri;">To set spacing between words, lines and paragraphs:</span></p>
<p class="MsoListParagraphCxSpFirst" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">1.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">In Design, Split or Code view; select the piece of text you want to adjust the spacing for. </span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">2.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;"><span style="font-family:Calibri;">Go to <strong>Format</strong> &gt; <strong>Paragraph…</strong></span></span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">3.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">In the Paragraph dialog box, under the Spacing section; do one or more of the following:</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 1in;"><span style="font-family:Symbol;"><span style="font-size:small;">·</span><span style="font:7pt &quot;">         </span></span><span style="font-size:small;font-family:Calibri;">Enter value in pixels or use the arrows to increase or decrease spacing before the paragraph in the <strong>Before</strong> box.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 1in;"><span style="font-family:Symbol;"><span style="font-size:small;">·</span><span style="font:7pt &quot;">         </span></span><span style="font-size:small;font-family:Calibri;">Enter value in pixels or use the arrows to increase or decrease spacing after the paragraph in the <strong>After</strong> box.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 1in;"><span style="font-family:Symbol;"><span style="font-size:small;">·</span><span style="font:7pt &quot;">         </span></span><span style="font-size:small;font-family:Calibri;">Enter value in pixels or use the arrows to increase or decrease spacing between words in the <strong>Word</strong> box.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 1in;"><span style="font-family:Symbol;"><span style="font-size:small;">·</span><span style="font:7pt &quot;">         </span></span><span style="font-size:small;font-family:Calibri;">Click on the drop down and choose an option to set spacing between lines in the <strong>Line Spacing</strong> box.</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-indent:-.25in;margin:0 0 0 .5in;"><span style="font-size:small;font-family:Calibri;">4.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">The Preview in the dialog box gives you an idea of how the new spacing would look in your page.</span></p>
<p class="MsoListParagraphCxSpLast" style="text-indent:-.25in;margin:0 0 10pt .5in;"><span style="font-size:small;font-family:Calibri;">5.</span><span style="font:7pt &quot;">       </span><span style="font-size:small;font-family:Calibri;">Click OK.</span></p>
<p class="MsoNormal" style="margin:0 0 10pt;"><span style="font-size:small;"><span style="font-family:Calibri;"><span style="color:#888888;"><strong>TIP:</strong> You can also set the indentation by choosing an option from the <strong>Alignment</strong> drop down box.</span></span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.saffronstroke.com/2009/01/27/set-text-spacing-in-microsoft-expression-web-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

