Creating Stylish Paragraphs

Unlike font effects, which you apply to individual letters and words, paragraph styles apply to entire paragraphs. A paragraph in a Web page differs from the paragraph you had to write in second grade about your summer vacation. In Expression Web, every time you press the Enter key, you create a new paragraph. Even if you type only one word and then press Enter, Expression Web considers the word a paragraph.

Tip 

If you simply want to create a new line without creating a new paragraph, use a line break instead. To create a line break, press Shift+Enter.

In this section, we cover the paragraph types that you use for the majority of text on your Web pages:

• Paragraph: This type is the default style for paragraphs. It's nothing fancy-just regular old left-aligned paragraphs with a proportional font. (The Times font appears in most Web browsers.) Every time you press Enter, Expression Web creates a new paragraph and surrounds it with the HTML code <p></p>. We cover all the different ways to customize paragraphs in this section.

• Headings: Headings are bits of text that help identify clumps of information inside a page. Large headings, usually located at the top of the page, identify what the page is all about, and smaller headings, sprinkled throughout, divide the page's information into manageable chunks. Headings in Web pages come in six sizes, or levels. Heading 1 (<h1></h1>) is the largest size and Heading 6 (<h6></h6>) is the smallest. We discuss headings in more detail in "Handling headings," later in this chapter.

• Lists: Lists group related bits of information by using bullets, numbers, or special text formatting. There are two types of lists: "ordered" for sequential lists with numbered items, and "unordered" for lists of bulleted items. Ordered lists use the HTML tag <ol></ol>, and unordered lists use <ul></ul>. We cover lists in detail later in this section.

Expression Web can create other types of paragraphs, although you use these paragraph types rarely, if at all:

• Preformatted: Creates paragraphs with a fixed-width font (Courier for most browsers). Use this paragraph style if you want your paragraph to look like it was typed on a typewriter. The HTML tag for this type of paragraph is <pre></pre>.

• Address: A holdover from the olden days of Web design (around 1993). Back then, the Address style was used to designate the page creator's e-mail address so that visitors could get in touch. Now, folks format their contact information in any number of ways, so the Address style has, for the most part, become obsolete. Besides, the style creates italic text just as the italic font style does, so why use the old clunker? The HTML tag for this type of paragraph style is <address></address>.

• Defined Term/Definition: Formats terms and definitions in a dictionary look-alike manner. The tags for these paragraph types are <dt></dt> for defined term and <dd></dd> for definition.

• Blockquote: Indents a block of text on both the left and right sides to set it off from surrounding text. The HTML tag for this paragraph type is <blockquote></blockquote>.

To change the style of a paragraph, follow these steps:

1. Place the cursor inside the paragraph you want to change, or select more than one paragraph.

2. On the Common or Formatting toolbar, choose the paragraph type you want from the Style list box, as shown in Figure 3-8.

   
   Figure 3-8: Paragraph styles.

   This list box is called the Style list box because it refers to the different "styles" of paragraphs.

GLANCE AT THE CODE 

Take a peek in Code view and notice how Expression Web has formatted your paragraphs with opening and closing HTML tags for each type of paragraph type, like this:

 <h1>Main heading for a page</h1> <p>This is a paragraph.</p> 

Adjusting paragraph alignment, indenting, and spacing

By default, basic Expression Web paragraphs (with the exceptions of headings and lists) are single-spaced; they line up with the page's left margin; and they contain no indentation (that is, no extra space exists between the margin and the paragraph). Also, a little bit of space precedes and follows each paragraph. You can change these default paragraph settings in a few different ways. First, here's the quick methods:

• Quick way to change a paragraph's alignment: Click inside the paragraph (or select multiple paragraphs) and, on the Formatting toolbar, click the Align Text Left, Center, Align Text Right, or Justify button.

• Quick way to change paragraph indentation: Click inside the paragraph (or select multiple paragraphs) and, on the Formatting toolbar, click the Increase Indent Position button. Click the button as many times as you want to achieve the desired effect. To decrease the level of an indented paragraph, click the Decrease Indent Position button.

If you're the precision-minded type, you can change paragraph alignment, indentation, and spacing by following these steps:

1. Click inside the paragraph (or select multiple paragraphs).

2. Choose Format Paragraph.

   The Paragraph dialog box appears.

3. From the Alignment list box, choose the alignment option you want.

4. From the list boxes in the Indentation section, specify the amount of indentation (in pixels) you want.

   The Left Side list box controls indentation along the left margin, and the Right Side list box controls indentation along the right margin. The Indent First Line list box enables you to apply a different indentation setting to the first line of the paragraph.

5. From the list boxes in the Spacing section, specify the amount of spacing (in pixels) you want.

   The Before list box controls the amount of space before the paragraph; the After list box controls the amount of space after the paragraph; the Word list box controls the amount of space between words in the paragraph; and the Line spacing list box controls (you guessed it) the space between the lines in the paragraph.

6. Click OK.

   The Paragraph dialog box closes, and Expression Web applies the formatting to the selected paragraphs.

GLANCE AT THE CODE 

Whether you click the buttons on the Formatting toolbar or use the options in the Paragraph dialog box, Expression Web uses styles to control paragraph alignment, indentation, and spacing. Take a look at the style rule that Expression Web created for a paragraph indented with one click of the Increase Indent Position button:

 .stylex  {           margin-left: 40px; } 

For each time you click the Increase Indent Position button, Expression Web indents another 40 pixels from the left. If you use the Paragraph dialog box to set the indent, you can specify an exact number of pixels.

Here's a style rule for a center-aligned paragraph:

 .stylex  {            text-align: center; } 

In case you want more control over the placement of your paragraphs than the Paragraph dialog box can give you, we cover using styles for positioning in Chapter 8.

Adding borders and shading

Want to surround the selected paragraph with a box? Or give the paragraph a colorful background so that it visually jumps off the page? These effects and more await you in the Borders and Shading dialog box.

Adding a border

To quickly add a border to the selected paragraph, click the down arrow next to the Outside Borders button and choose a border style you like. For a little more control, do this:

1. Click inside the paragraph (or select multiple paragraphs) and then choose Format Borders and Shading.

   The Borders and Shading dialog box appears, as shown in Figure 3-9.

   
   Figure 3-9: The Borders and Shading dialog box.

2. In the Setting area of the dialog box, click the option that corresponds to the type of border you want.

3. In the Style box, click the name of the border style you want.

4. Choose a border color from the Color list box.

   If you choose More Colors, the More Colors dialog box appears. We explain how to use the More Colors dialog box in the previous section "Changing text color."

5. Enter a border width (in pixels) in the Width box.

6. To turn on or off individual borders, in the Preview area, click the button that corresponds to the border you want to change.

7. To add empty space between the paragraph text and its surrounding border, enter pixel values in boxes in the Padding area of the dialog box.

8. Click OK to close the dialog box and apply the border settings.

GLANCE AT THE CODE 

As with other text formatting, borders are controlled by styles. Here's the style for a paragraph with an outside border around all sides applied by clicking the Outside Border button and selecting the Outside Border option (in the upper-left corner of the drop-down menu):

 .stylex  {           border-style: solid;           border-width: 1px;           padding: 1px 4px; } 

As you can see, a few goodies are associated with borders, all of which you can set individually in the Borders and Shading dialog box. Because you have so many options for adding borders, Expression Web sometimes abbreviates style definitions, using standard CSS shorthand. Here's an example of a style rule for a paragraph with a 4-pixel-wide, dotted, fuchsia border around all sides:

 .stylex  {           border: 4px dotted #FF00FF;           padding: 1px 4px; } 

The first line states that the border should be 4 pixels wide, dotted, and fuschia. The second line controls how much space, or padding, is inserted between the paragraph text and the border. In this case, there's 1 pixel on the top and bottom and 4 pixels on the left and right sides. (We discuss padding around page elements in more detail in Chapter 8.)

Adding shading

In Expression Web, shading refers to the paragraph's foreground and background attributes. The paragraph's foreground is its text color, and its background refers to the color or picture that sits behind the selected paragraph's text.

To quickly apply a background color to selected text, click the Highlight button. To add more complex shading, do this:

1. Select the paragraph (or select multiple paragraphs), and then choose Format Borders and Shading.

   The Borders and Shading dialog box appears.

2. In the dialog box, click the Shading tab to make those options visible.

3. To change the paragraph's background color, choose an option from the Background Color list box.

4. To change the paragraph's foreground (text) color, choose an option from the Foreground Color list box.

5. Click OK to close the dialog box and apply the shading settings.

Tip 

After you start positioning elements on your Web pages, the real fun with borders and backgrounds begins. We talk more about using borders and backgrounds effectively in Chapter 8. We show you how to add a background picture in Chapter 5.

GLANCE AT THE CODE 

All options in the Borders and Shading dialog box and the Highlight effect are controlled by styles. Here's the style rule for a paragraph with a red background:

 .stylex {           background-color: #FF0000; } 

Handling headings

Headings break up text on your Web pages into meaningful chunks. Well-constructed headings can also give your visitors a sense of the page's content at a glance. Web pages can contain six levels of headings: Heading 1 is the largest, and Heading 6 is the smallest. (Trust us-Heading 6 is so small that you never use it.)

Expression Web automatically makes all headings bold and sets relative text sizes for them. Just as with any chunk of text on your Web page, however, you're in control. You can make all your headings hot pink if you want!

To make a line of text a heading, follow these steps:

1. Click inside the text you want to format as a heading.

2. On the Common toolbar or Formatting toolbar, click the arrow next to the Style list box (refer to Figure 3-8) and click the desired heading level.

Tip 

Notice that Expression Web nicely displays the HTML tags for the different heading levels.

For example, to create a first-level heading, click Heading 1 <h1>.

GLANCE AT THE CODE 

The HTML code for headings works simply. Notice that Expression Web has replaced the paragraph <p></p> tags with heading tags:

 <h1>This is a first-level heading</h1> 

Notice also that when you click inside a heading, the <h1> tag appears in the Quick Tag Selector bar (we cover using the Quick Tag Selector bar in Chapter 14) and on a little tab above the heading text in the editing window. And, if you change any aspect of a heading, such as its color or font size, Expression Web writes a style rule. For example, the style rule for a heading in small caps with red text looks like this:

 .stylex  {           color: #FF0000;           font-variant: small-caps; } 

Tip 

If you decide that you want all first-level headings colored red and in small caps throughout your entire page, you can create a style rule that uses the <h1> HTML tag as the selector. We tell you how in Chapter 7.

Creating bulleted and numbered lists

Whether you're a list lover or hater, you're likely to eventually be in a situation where a list is the best tool for organizing your page's information.

Lists come in two basic flavors:

• Bulleted lists are groups of items, each of which is preceded by a solid dot, or bullet. The Web design term for this list flavor is unordered list (a list with items in nonsequential order).

• A numbered list looks like a bulleted list, except that numbers stand in for the bullets. In the world of Web, this flavor is an ordered list. Ordered lists are useful if you need to present a series of sequential steps.

To create an ordered or unordered list, follow these steps:

1. Place the cursor in the page where you want the list to begin.

2. Click the Numbering button or the Bullets button.

   A number or a bullet appears at the beginning of the first line.

3. Type the first list item and then press Enter.

   A number or bullet appears on the next line.

4. Type your second list item (and so on).

5. After you're done adding items to your list, press Enter twice to end the list.

You can convert existing paragraphs into bulleted or numbered lists by selecting the paragraphs that you want included in the list and then clicking the Numbering button or the Bullets button.

Tip 

To split a long list into two separate lists, click at the end of a list item and press Enter twice. The list splits into two lists and, in the case of numbered lists, renumbers itself automatically.

If the plain dots or numbers sitting in your lists don't thrill you, you can change them. The List Properties dialog box enables you to change the shape of your bullets or replace the dreary black spots with pictures. If you want to give a numbered list a makeover, you can use the List Properties dialog box to apply Roman numerals or change the list's starting number.

To access the List Properties dialog box, click within the list you want to format, and then choose Format Bullets and Numbering. Or, right-click the list and, from the pop-up menu that appears, choose List Properties.

Nesting a list in a list

Sometimes a simple list doesn't cut it. Suppose that you need something more sophisticated, such as a multilevel outline or a numbered list with bullets following certain items (similar to the one shown in Figure 3-10). No problem!

Figure 3-10: A number-bullet combo list.

To create this type of fancy-shmancy combo list, follow these steps:

1. Create a bulleted or numbered list.

   The list should contain every item, regardless of level.

2. Highlight the item or items you want to put in the second level of the list, and then click the Increase Indent button.

   The list items move to the right.

3. To change the items' numbering or bullet style, with the items still highlighted, right-click and choose List Properties from the pop-up menu.

4. Choose the numbering or bullet style you want from the List Properties dialog box, and then click OK.

   Note 

   Use the Decrease Indent button to demote list items. It's basically the preceding process in reverse!

GLANCE AT THE CODE 

Take a look at the Quick Tag Selector bar: The HTML tags are really building up. In Split or Code view, the code for a default bulleted list with three items looks like this:

 <ul>           <li>mangoes</li>           <li>papayas</li>           <li>kumquats</li> </ul> 

First on the scene is the HTML tag that tells the browser, "Hey, get ready for an unordered list" <ul>. Then the <li> and </li> tags enclose each list item. After the last item, the </ul> tag tells the browser, "Okay, that's it for the list."

If you change the bullet style for this list to squares, Expression Web adds a class selector to the <ul> tag:

 <ul >           <li>mangoes</li>           <li>papayas</li>           <li>kumquats</li> </ul> 

Practicing safe styles

You may remember when word processors first appeared on the scene. Some people, seduced by the millions of text styles at their disposal, started churning out documents that looked more like cut-and-paste ransom notes that you might see in old private-eye movies than in professionally designed documents. Although the text was readable, it was a gaudy mess.

We relate this example only to illustrate how the moderate use of font and paragraph styles enhances a page's readability and visual appeal, whereas overuse sends your readers screaming to a new Web destination.

As with most things in life, moderation is the key. Choose a single font for headings, and perhaps one more font for body text. Keep your hyper-links a single color so that visitors can easily identify clickable bits of text. (We show you how to change hyperlink colors in Chapter 4.)

Here's the style rule:

 .stylex  {           list-style-type: square; } 

Play around with creating lists and changing bullet and numbering styles, and look at the code. Aren't you glad that Expression Web keeps track of all those tags for you and all you have to do is click a few buttons and type in your items?