Can I control the way Expression Web 2 adds and manages styles for me?

If you ask this question every time you create a new style, then you are at the right place. Expression Web helps you to create short and snappy CSS rules, automatically and but adds one style as inline and another as a class. Why? Do not worry. I will tell you how it works and what can you do about it. Thankfully Expression Web has two modes of Style Application: Automatic and Manual.

Automatic Style Application mode lets Expression Web decide how to create a new CSS style before it is applied and which CSS rules to change when you modify a selected portion of text. To view the default policy for ‘Automatic Style Application’; go to Tools > Page Editor Options > CSS tab. See image below:

 

pg_ed_opt

The default Auto Style Application has set inline styles for page properties and sizing, positioning and floating, and all other properties are defined in new CSS classes. This means that as soon as you modify the page properties or make any changes to the sizing, positioning, etc a new inline style would be created by each such element. Whereas any modifications to font, background, borders, padding and margins and bullets, Expression Web would create new classes with names like style1, style2, etc. You can alter these default settings by choosing another option from the drop down menu.

Select the checkbox ‘Only reuse classes with the prefix “style”’ to enable Expression Web to modify class selectors only when their names begin with “.style”. The last option on this dialog box is ‘Use width and height attributes for images instead of CSS’, would let you do what it says!

In Manual Style Application mode, Expression Web lets you take control of when and where you can modify an existing CSS rule or how to add properties. This control is provided by the Style Application toolbar.

chng_style

 

manual

The Target Rule box displays the type of style Expression Web will create or modify when you format any content on your page. It also lets you create a new style. Reuse Properties option lets Expression Web determine which CSS rule contains the particular property declaration you are modifying and modify the same. Show Overlay button highlights the content/tags with a dotted line to identify the rule selected in the Target Rule box.

Filed Under: Expression Web

Tags:

About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (2)

Leave a Reply | Trackback URL

  1. web oogie says:

    Hi

    This is really nice piece of information. Will make me more comfortable with my CSS.

Leave a Reply