Wrox Home  
Beginning Expression Web
by Zak Ruvalcaba
March 2007, Paperback

Excerpt from Beginning Expression Web

Defining How CSS Is Created and Applied Within Expression Web

by Zak Ruvalcaba

CSS integration is abundant in Expression Web and is arguably the single greatest integration asset within Expression Web apart from HTML. CSS has limitless possibilities and because of external style sheets, Expression Web has the power to set the appearance of elements on your Web pages globally.

Many beginning Web designers ignore this fact because they simply want to build pages without carefully considering the long-term management perspective. When you're working with CSS in Expression Web, should styles be created inline automatically for you? Should you have document-wide styles created automatically for you instead? After all, document-wide styles would give you the ability to change properties for the entire page easily. Or, does it benefit you down the road, as your site grows, to create one external style sheet file, add your style rules to the style sheet file, and then apply them manually to elements within your Web pages, essentially preventing Expression Web from doing anything automatically for you?

These are questions you'll want to answer before you begin adding styles to your Web pages. Choosing the inline or document-wide route would allow you to create Web pages faster because Expression Web does most of the work for you automatically. Choosing the external route means that properties must be created manually for every element within your Web page. While the upside to this approach is easier management down the road as your site grows, the downside is careful planning initially, which results in slower development of pages at first.

While you'll learn the benefits to each approach with experience, in the meantime, Expression Web offers a toolbar that allows you to customize how Expression Web should create and ultimately apply styles within your Web pages. Available by selecting View-->Toolbars--> Style Application and visible in 1, the Style Application toolbar allows you to set whether to allow Expression Web to automatically create styles for you, or choose whether you want them to be created manually. If you go the manual route, Expression Web allows you to choose whether to force Expression Web to automatically create inline or document-wide styles as you apply properties to elements within your page. Additionally, you can choose to bypass the inline or document-wide options and have an external style sheet created instead.

Figure 1: Style Application toolbar
Figure 1: Style Application toolbar

The Style Application toolbar offers the following options:

  • Style Application — Options within this list include Auto and Manual. When you choose the Auto option, the rest of the options within the Style Application toolbar are disabled. What this means is that if you select an element within your Web page and then apply the Arial font to it from within the Common toolbar, for example, Expression Web automatically creates a class within a document-wide style sheet and associates that class to the selected element within the page. As you add properties to elements on your page, Expression Web simply adds to the existing document-wide style sheet on the page. While this is the simplest option available, it's far from flexible to the intermediate-advanced user and is nowhere near global to the Web site.

    When you choose the Manual option, the rest of the toolbar becomes enabled. This option allows you to choose how Expression Web should create and subsequently apply styles to elements within your Web page. Should they be created inline, as part of a document-wide style sheet, or will you simply override these options and create an external style sheet file on your own? Whichever option you choose, it's available within the Target Rule menu.

  • Target Rule — If you've selected the Manual option from the Style Application menu, you're next task is to choose how Expression Web should create styles. As you'll see by expanding the menu, options include New Inline Style, New Auto Class, or Apply New Style. If you choose the New Inline Style option, Expression Web creates a new inline style rule for the selected element on the page. For example, if you select a paragraph of text and apply the Arial font to that element, Expression Web adds the style rule inline to the <p> tag. The result would resemble <p style="font-family:Arial, Helvetica, sans-serif">.

    If, however, you decide to choose the New Auto Class option, Expression Web closely mimics the functionality that would be applied had you chosen the Auto option from the Style Application menu. For example, if you select a paragraph of text and apply the Arial font, Expression Web would automatically create a class within a document-wide style sheet. Then it would apply the class reference using the class attribute for the <p> tag as follows: <p class="style1">. The downside to this approach is that you don't have control over the names of the classes. By default, classes are created as .style1, .style2, .style3, and so on. This is not very intuitive when you want to apply a particular class to an element and the only differentiation between the many classes is a meaningless numeric value.

    The final option, and by far the most flexible, is the Apply New Style option. Selecting this option launches the New Style dialog box. It is within this dialog box that you're able to use the options mentioned previously (inline or document-wide), or deviate from these options and choose the more global and site-wide manageable external style sheet option.

  • Reuse Properties — From an efficiency standpoint, select the Reuse Properties button to force Expression Web to figure out whether the style selected in the Target Rule menu contains or doesn't already contain a declaration for the element you format on the Web page. If a declaration already exists, Expression Web simply uses the previously created declaration. If it doesn't, however, Expression Web creates a new one.

    For example, let's say you select an element and choose the Arial font from the Common toolbar. Depending on what option you have selected in the Target Rule menu, Expression Web creates a rule (.style1 by default) and applies it to the selected element. Now, let's say you select a second element and apply the Arial font to that element as well. Expression Web, recognizing that this property has already been established within the .style1 class, doesn't create a new rule; but uses the .style1 class on the new element instead. If this button were disabled, Expression Web would simply create a new class (.style2) for the second element even though the declaration of both rules is the same.

  • Show Overlay — Click this button to display a dotted box in Design view around content that uses the style that is selected in the Target Rule box. In general, this is purely a visual enhancement setting.

Depending on your Web site's needs, you'll probably be switching back and forth between opening and closing this toolbar. In general, keep the following matrix in mind when making a decision as to which options should be selected within the Style Application toolbar:

Beginning-Intermediate user looking to create a simple Web site as fast and easily as possible. Auto
Small Web site where the appearance of the page and elements within those pages varies greatly. Manual, Target Rule: Inline Styles
Small to medium-sized Web site. The appearance of Web pages and elements within those pages remains somewhat consistent throughout. Manual, Target Rule: Auto Classes
Medium to large-sized Web site. The appearance of Web pages and elements within those pages remains mostly consistent throughout the site with little to no variation from page to page. External Style Sheets

As you can see, the options that you decide to enable within the Style Application toolbar can vary greatly, depending on your needs. You should explore all of these options at your leisure.

This article is excerpted from Chapter 5, "Page Formatting Using Cascading Style Sheets" of Beginning Expression Web (Wrox, 2007, ISBN: 978-0-470-07315-5), by Zak Ruvalcaba. Zak Ruvalcaba has been researching, designing, and developing for the Web since 1995. He holds a Bachelor's Degree from San Diego State University and a Master of Science in Instructional Technology from National University in San Diego. Currently, he holds a position with MiraCosta College in Oceanside, California, supporting internal and external .NET applications. His skill set includes technologies and languages from (X)HTML, XML, JavaScript, CSS, ASP, ASP.NET, VB.NET, C#, ADO.NET, Web Services, SQL, T-SQL, and ActionScript. He is a Macromedia Certified Professional (MMCP), a Microsoft Certified Application Developer for .NET (MCAD), and a Microsoft Certified Solutions Developer for .NET (MCSD). He teaches and holds design lectures on various technologies and tools including Dreamweaver, Flash, ASP.NET, ADO.NET, and Web Services for the San Diego Community College District and Palomar College.