Setting the Page Editor Options in Microsoft Expression Web 3 (Part III – CSS tab)
Posted by: Minal Agarwal ,
on 2/22/2010,
in
Category Expression Web
Abstract: In this article, we will explore the various CSS options that help you control how styles are generated by Microsoft Expression Web 3.
Setting the Page Editor Options in Microsoft Expression Web 3 (Part III – CSS tab)
In my earlier two articles; ‘Setting the Page Editor Options in Microsoft Expression Web 3 Part I and Part II’ we explored few tabs of the Page Editor Options. In this article, we will explore the CSS tab of the Page Editor Options.
On the CSS tab you can set preferences as to how Expression Web should generate styles in the Auto Style Application mode, if the styles should be inline or use class or element selectors. You can change the Style Application mode and set preferences for both of them.
To open the CSS tab of Page Editor Options dialog box; do one of the following:
1. Go to Tools > Page Editor Options > CSS tab.
2. On the status bar, at the bottom right corner, click on the Style Application button and choose CSS Options… as shown below:
The CSS tab:
1. Auto Style Application: Configure options for the Auto Style Mode.
Use ‘Auto Style Mode’ if you are new to CSS. Expression Web will do all the work and help you learn along.
2. Manual Style Application: Configure options for the Manual Style Mode.
If you are well versed with CSS then you can write your own CSS, using the Manual Style Application mode. With Manual mode you can streamline your design process by controlling the styles Expression Web would generate and modify.
NOTE: In both Manual and Auto Style Application modes, Expression Web creates and modifies styles for you when you format objects in the page.
Select which technology to use for the following properties:
a. Page properties on the <body> tag – select the type of style Expression Web should generate in Auto mode when you use the Formatting tab in the Page Properties dialog box to set properties like background picture, background color, text and hyperlink colors.
b. Font and Text – select the type of style Expression Web should generate in Auto mode when you use the Font and Symbol, any buttons on Formatting toolbar except Numberings, Bullets, Indentation, Highlight and Borders.
c. Background - select the type of style Expression Web should generate in Auto mode when you use the Highlight button on Formatting toolbar and Patterns section in Borders and Shading dialog box shown below:
d. Borders - select the type of style Expression Web should generate in Auto mode when you use the Borders and Shading dialog box, except the Padding options on Borders tab and Patterns options on Shading tab.
e. Padding and margins - select the type of style Expression Web should generate in Auto mode when you use the Paragraph dialog box, Padding options on Borders tab in Borders and Shading dialog box, Advanced tab in the Page Properties dialog box, and adding margins or padding in Design view.
f. Sizing, positioning and floating - select the type of style Expression Web should generate in Auto mode when you use the Positioning toolbar, Position dialog box, Layers panel and when you resize the element in the Design View.
g. Bullets and numbering - select the type of style Expression Web should generate in Auto mode when you use the Numbering and Bullets buttons on the Common and Formatting toolbars and List Properties dialog box.
h. Only reuse classes with the prefix “style” – select to tell Expression Web to modify only those class selectors with names beginning with “.style”. This options is available only in Auto Style Application Mode.
i. Use width and height attributes for images instead of CSS – select to tell Expression Web to add the width and height attributes to the <img> tag instead of creating a style for them. If this option is deselected, then Expression Web uses CSS to apply the dimension. The type of style depends upon the Sizing, positioning and floating option (f.).
j. The Reset Defaults button will reset style application preferences to default settings.
Now that we have explored all the options available on the CSS tab, I would like to share a few tips that can help you while working with CSS.
1. If you are a novice then use the Auto Style Application mode.
2. Set the Page properties on the <body> tag as CSS (rules) and rest to CSS (classes).
Conclusion
I am sure this article has given you an insight into the CSS options and preferences you can set to work effectively with styles.
If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (
SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called
Foodatarian.com. Follow her on twitter @
saffronstroke