New Style Dialog Box

NOTE: Screenshots were taken using Expression Web 3.0 with the default color scheme. Your screen may look slightly different depending on the version and color scheme you have selected. All examples are using the Organization 3 default template.

The New Style dialog box enables you to design a new style and preview the style's appearance as you design it. You can access the new style dialog box from a variety of locations.

To open the New Style dialog box, use the Apply Styles, Manage Styles, or the CSS Properties panel. You also open the New Style dialog box by using the Format menu or the Style toolbar.

Both the Apply Styles and Manage Styles Task Panels (Panes in EW 1 & 2) has a New Style Icon.

Figure 1: New Style icon

To create a new style by using the New Style dialog box

Do one of the following:

• To add a style to an external CSS, open the .css file.
• To add a style to an internal CSS, open the web page.
• To add an inline style, open the web page, and then select the content you want to style.

Do one of the following:

• Click the New Style Icon on the either the Apply Styles or Manage Styles task panel.
• Click New Style on the Format menu or Style Toolbar.
• To copy an existing style in the Apply Styles, Manage Styles or CSS Properties panel, right-click the style that you want to copy, then select New Style Copy.

Figure 2: New Style dialog box.
Click thumbnail for larger image.

 

The New Style dialog box enables you to define everything about your new style:

Use this	To do this
Selector (1)	To use a class selector, type a period (.) followed by a unique name. To use an ID selector, type a number sign (#) followed by a unique name. NOTE:  Class and ID selector names can't contain spaces unless you're creating a complex selector. To use an element selector, either type the name of an HTML element or click the Selector drop-down box and select an element name. To use an inline selector, select inline style. To create a complex selector, type the selector.
Define in (2)	Select one of the following: Current page adds the new style to the internal CSS in the current web page. New style sheet adds the new style to a new blank external CSS. Existing style sheet adds the new style to an existing external CSS that you specify.
Apply new style to document selection (3)	Apply the style to the current selection in the current web page.
URL (4)	If you selected Existing style sheet in Define in, enter the URL to the .css file.
Category (5)	Select any of the following, and then set the properties that appear to the right in the dialog box: Font sets font properties, including size, weight, decoration and color. Block sets line-height, text alignment, text indentation, and text spacing. Background sets background color and background image properties. Border sets a border and its properties. Border Radius is new with EW 4.0 SP2 and allows you to add rounded borders to a div element. The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera. View Screenshot Box sets the padding and margin properties of box and block-level elements. New in EW4 SP2 is support for box shadows. The box-shadow property is supported in IE9+, Firefox 4, Chrome, and Opera. View Screenshot Position sets the dimensions and position of box and block-level elements. Layout sets the visibility, floating and wrapping behavior, clipping and other layout properties of box and block-level elements. List sets the properties of list elements, including type, position, and image. Table sets the properties of table-related elements, including spacing, layout, border properties.

Real Life Examples: In the Creating web site from site templates in Expression Web tutorial, I mention creating a style that will keep your images that are hyperlinked from having the ugly blue line around them. I used the default template Organization 3 in that tutorial.

Step 1: Open the site you wish to work with in Expression Web. Double click the style sheet that is attached to the template to add this new style.

Step 2: From the Manage Styles or Apply Styles panel, click the New Style icon.

Step 3: In the New Style dialog box, do the following:

• Selector: Choose body from the dropdown menu. Enter a space and type img
• Border: Type 0 in the border-width box
• Font: text-decoration: none
• Click OK.

As you create the style, you will see a preview and a description of the style. Once you click OK, the style will be added at the bottom of the style sheet. You can leave it there or copy and paste it just under your first body style. If you do move it, make sure and delete the bottom one.

body img { text-decoration: none; border-width: 0px; }

You can also type the style directly into the style sheet and IntelliSense will help you with that. For example, if you type a CSS selector and then a left curly brace ({), IntelliSense displays an alphabetical shortcut menu of all available properties. After you select a property from the menu or type the property, IntelliSense can display a different shortcut menu that contains values that are appropriate for the property you selected.

body img { text-decoration: none; border: 0px; }

Once you are familiar with CSS you may well find that a quick edit in the CSS Properties task pane/panel directly onto the CSS file is more efficient and easier than going through all the dialog box steps.

The New Style and Modify Style dialog boxes provide the same categories and properties. The properties that appear to the right of the Category box, reflect the selected category.