Expression Web is great for creating CMS content, but controlling CSS is paramount. Here's how.
I do a fair amount of blogging. In addition to this blog, I also blog on MSDN as part of my job at Microsoft. (Feel free to check out our WebTopics blog on MSDN if you’re an ASP.NET developer or if you’re interested in troubleshooting ASP.NET or IIS.) I realized a while back that Expression Web is an excellent tool for writing blogs, not only because it produces standards-compliant code that merges well with content-management systems, but also because of its excellent CSS features. For those same reasons, Expression Web is a great tool for anyone who uses a content-management system to write content for the Web, but there are a few tricks to pulling it off efficiently.
By default, Expression Web creates an embedded style sheet when you modify things like font size, and nondescript names like “style1” and “style2” are used for the CSS classes that get auto-generated. Because of that, your formatting changes will look fine in Design view in Expression Web, but once you move that content to your content-management system and save it to your site, you’ll lose your formatting unless you remember to copy over the embedded style sheet.
The best way to avoid a problem in this scenario is to change how Expression Web applies formatting so that it uses inline styles instead of CSS classes. To change this setting, click on the CSS Mode icon on the status bar and choose CSS Options as you see in the screenshot below.
When you select this menu option, the Page Editor Options dialog opens with the CSS tab selected. From here, you can change the way that Expression Web applies CSS. In the screenshot below, I have changed the setting for Font and Text, Padding and Margins, and Bullets and Numbering from “CSS (classes)” to “CSS (inline styles)”. After making that change, Expression Web will apply those particular properties using inline styles that easily copy over to my blog posts without having to mess with an embedded style sheet.
The MSDN blog I mentioned previously is maintained by a team of people. Because we have multiple authors for our blog, we use a custom external style sheet for our CSS classes so that our posts have a consistent appearance. Expression Web is a great tool for writing posts for that particular blog because applying CSS classes is incredibly easy using the Apply Styles task pane in Expression Web. However, in order for Expression Web to know about the styles we use for our blog, I need a local copy of the style sheet. Therefore, I created a local Web site in Expression Web that contains a local copy of our style sheet, and I can easily apply CSS classes to my posts as I write them. When my posts are published to the Web, everything looks perfect.
Another great feature of Expression Web that allows you to control how CSS is applied is the Style Application toolbar. You can find out more information about how to use the Style Application toolbar in the article that I wrote for the Expression newsletter a while back.
I hope this information helps you to take advantage of Expression Web to create all of your Web content.
