1. Type some text into one of your layout divs.
Do Not use 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 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 in expression web 4
(Note: this video has no sound. Just watch and read the text I type on the page!!)
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.
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.
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. )
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. (Less is Better)
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.
Do not underline text that is not a hyperlink. People automatically think underlined text is a hyperlink.
Use a Readable Font-Family. Only a few font-families are appropriate for paragraph text. Arial and Verdana are two of the most commonly used fonts because they are readable and they are guaranteed to be installed on everyone's computers.
Do Not use Bold or italicized text for entire paragraphs. Instead, use bold and italics only to draw attention to the most important sections or phrases in your paragraphs. Otherwise, it's a distraction and very difficult to read.
Avoid using Serif Fonts (fonts with pointy edges) for paragraphs. They are not very readable on the web.