1.866.363.5633

www  . Expression - Web - Tutorial . com


Expression Web Tutorials:  Building Web Sites with CSS & HTML  ~  One Step at a Time


Expression Web Tutorial:  The Style Builder

Contents

Using the Style Builder:

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 Style Builder can be opened in 1 of 2 ways:

  • 1.  Click on the words, "New Style"
  • 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 is going to style an html div, and every style created for the masthead will be applied to the html div.

FYI:

 ID Selectors must match the HTML ID Attribute

When coding by hand, you have to be careful to make sure the html id attribute matches the css style selector.    For instance..............

The html that would correspond to the #masthead style:

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

Since our selector begins with a #, it means it is an ID Selector.  So the id attribute is used in the html must match the ID Selector. 

The above html is all you will see in the code.  This is because we place all the styles for the masthead on a separate page, called an external style sheet. 

 

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).