Expression Web Tutorial: The CSS Style Builder

Expression Web's "New Style" Dialog Window

Learn How to Design Web Pages with CSS & Expression Web

What is the Style Builder?
The Selector
How to Make External Styles
How to Make Internal Styles

What is the Style Builder?

The Style Builder is used to create CSS styles in Expression Web. This makes it easier for the beginner to create styles and build a web site quickly as compared to learning how to code by hand without the help of a web authoring software program.

How to Access the Style Builder

Locate the Manage Styles Panel (lower right area of the workspace).

The Manage Styles Panel

The Style Builder can be opened in 1 of 2 ways:

1. Go to the Manage Styles Panel and Click on the words, "New Style"

2. Or, Right-Click on an Existing Style and choose Modify Style.

right click

The Style Builder

style builder

How to Create a CSS Style Rule Using the Style Builder

1. The Selector: The first item to complete in the style builder is the Selector. A css selector defines the HTML page element to be styled.

For instance,

#masthead { background-color: #000000; }

In the above style declaration, the CSS Selector is #masthead.

This Selector targets or 'Selects' a div tag that we choose. (We will place a div on the page, then immediately create a new style that targets this div.) Typically, this selector is used to style the header of a web page.

If you were coding your page by hand, you would first add the following markup to your code:

<div id="masthead"></div>

Next, you would write the following CSS Style on your External Style Sheet:

#masthead {property:value pairs would go here;}

This id selector matches the id attribute in the code, therefore, the style will be applied as specified.

In Expression Web, we do this a bit differently so we can avoid writing the code ourselves. We place a div on the page, click new style, make the selector #masthead and click apply. Expression Web, as a result, will write the html code for us, <div id="masthead"></div>.

Checkout the Online Class

2. Define In: Existing Style Sheet ~ or ~ Current Page

Next, it's almost always a good idea to define in an existing style sheet. The existing style sheet refers to the External style Sheet that we created in Step 4 of the Getting Started Checklist.

This keeps the content separate from the presentation, and lightens the code which makes for easy management. (We will talk more about this later.) See "Benefits of CSS".

It also makes it a lot easier to over-ride External Styles by using Internal Styles (if you can no longer use specificity).

3. URL: Choose Your Style Sheet

Next to URL: is an that when clicked on opens a dropdown menu. Choose your External Style Sheet from this menu.

Now go choose your CSS Properties and Values!

A Place For Beginners