Recipe 1.18. Using CSS in Microsoft Expression Web Designer

Problem

You use Microsoft Expression Web Designer to design web pages and want to take advantage of its CSS features.

Solution

Like Dreamweaver, Microsoft Expression Web Designer allows you to attach an external style sheet, create a new one from scratch, and add styles within the HTML page as you can see in Figures 1-45 through 1-47. Here are a few ways to add CSS:

To attach an external style sheet to any web page in Microsoft Web Expression, click Attach Style Sheet in the Apply Styles task pane.
Click the New Document icon, and then click CSS to start a new CSS document with a blank page.
Edit the web page like a Word document; Expression Web Designer automatically adds internal styles.
Enter styles in the Code view.

Figure 1-45. Use Microsoft Expression Web Designer Apply Styles task pane to attach an external style sheet

Figure 1-46. Start a new CSS file in Microsoft Expression Web Designer

Figure 1-47. Manage styles in Microsoft Expression Web Designer in its Manage Styles task pane

Discussion

Microsoft Expression Web Designer has made strides in CSS support over FrontPage, its predecessor. After adding styles to a web page, refer to the Manage Styles task pane to list current styles and to switch styles from external CSS to internal CSS and vice versa.

If you add styles to content within an HTML page in using the Formatting toolbar, the application automatically adds inline CSS. As you select fonts and color to selected text, Expression Web Designer creates an internal style sheet rather than use <font>. In FrontPage, the code would look like the following:

<font face="georgia, times new roman, serif" color="#ff0000"  size="2">This is text.</font>

If you made changes to the code in FrontPage, the application often doubled-up on the code, such as the following:

<font face="georgia, times new roman, serif" color="#ff0000" size="2"><font face="times new roman, serif">This is text.</font></font>

This led to bloated pages that rarely rendered correctly in browsers other the Internet Explorer. Expression Web Designer doesn't have double code trouble as you can see in Figure 1-48. Furthermore, styles can be categorized by order or type for easier reviewing.