Expression Web Tutorials

 Expression Web Tutorial:  Working with Text 

Making Paragraphs with Expression Web

1.  Type some text into one of your layout divs.  Do Not Make a Div Just to Add Text!  A Paragraph Generates its own Box, thus, you do not need to add an extra one!!!  It will create a mess. For instance, type some text into the page-content div of your layout.

2.  Now highlight the text you just typed. 

3.  Apply the paragraph tag to the highlighted text.  To do this, locate the first drop-down menu in the common formatting toolbar that runs across the top of the interface, but under the File Edit View menus.  See figure 1 below.

paragraph

After you choose the <p> paragraph tag, it will be applied to the highlighted text. 

4. Next, just place your cursor after the very last word or period of the paragraph and press your enter key.  A new paragraph begins. 
Once the first <p> has been applied, that's it.  Just press Enter to create more paragraphs.

 

The Next Part of this tutorial involves formatting and styling the paragraphs you just made. 

Styling a Paragraph with CSS

Now you have your paragraphs inserted into your web page.  We will assume, as we did above, that we typed our text (paragraphs) inside the page-content div.  Assume further, if you will, that we styled this div using an id selector of #page-content. 

**This is important because now we are going to style only those paragraphs in this div (page-content).  To do this we will use a descendent selector as such: 

#page-content p

This selector means that we are styling the paragraphs that are inserted inside the page content div.  Remember, a Descendent Selector is used to style nested elements.  In this case, we would say the paragraphs are nested within the page content div.

 

Ok, now we need to add some css properties and values to our selector, and  style the appearance of the text within the paragraph tags.

Creating a CSS Style to Format Paragraphs

  1. Click New Style in the Manage Styles Task Pane
  2. Make your selector:  #page-content p
  3. Define in: Existing Style Sheet (this is your External Style Sheet)
  4. Check the the box to apply the style to the document selection.
  5. URL:  click on the drop-down menu and choose your style sheet.  (this is where the style will be stored for repeated use)
  6. Choose a font-family, font-size, font-weight, color, and any other properties you wish to use.
  7. Click on the Box Category:  You can add some padding to your paragraphs.  Doing this instead of adding padding to the actual div is sometimes better.  Or, you can add margins to the paragraphs  in order to make the width of your paragraphs smaller.
  8. Next, click on the Block Category:   Set a line-height: 26px ??  try different size to see what looks the  best. 
     
    ( Line height simply increases the vertical height of the line that contains your text. )

HINT:  The Width of paragraphs may determine how much of your content is actually read by users.  First, get to the point and do so quickly.  Do not use wordy metaphors that delay the topic and info people are looking for. Second,  Keep paragraph widths manageable.  Short and narrow paragraphs are easier to read, thus, this will increase the chances of your content being read.  Also, use line-height to make text more readable.  (See number 8 above)  Line-height is the way we can double space text.  The value you use for line-height will depend upon the font-size.  A smaller font requires a smaller line-height when compared to a larger font.  Or, just use a percentage, like 140% for line height.  This percentage will be used to calculate the actual line height, based upon the font-size.

Another very Important HINT:  Do not underline text that is not a hyperlink.  People automatically think underlined text is a hyperlink.