Working with Text

Making Paragraphs with Expression Web

 

1.  Type some text into one of your layout divs. 

Do Not use an extra 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 below.

After you choose the 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 paragraph (or other text tag) 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.  We will use CSS to do this.

 

Making Paragraphs with Expression Web 4

 (Note:  this video has no sound.  Just watch and read the text I type on the page!!) 

 

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 Panel  (this opens the Style Builder)
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)

Note:  your external style sheet must be attached to the web page, otherwise, it will not appear in the drop-down menu mentioned in #5.

 

Start Choosing Properties and Values to Apply to the Paragraphs

Font Category:  Choose a font-family, font-size, color, and any other properties you wish to use. (Actually, the font-family should be set on the body, then Inheritance will automatically apply it to every element on your web page. Then, you only need to specify a font-family to over-ride the Inherited font-family.

Click on the Box Category:  You can add some left and right padding to your paragraphs.  Doing this instead of adding padding to the actual div is sometimes better.  The idea here is to keep your text away from the edges of the column, and left and right padding will also help to decrease the total width of your paragraphs which makes your text more readable.  (You don't want text the runs clear across the entire width of your web page!)

 Margins: set the top and bottom margins to 16px.

Next, click on the Block Category:   Set a line-height: 145%.  (Try different size to see what looks the  best. )

Line height simply increases the vertical height of the line that contains your text.  Think of Single Space and Double Space.