Creating CSS Styles 

Learn how to create CSS Styles with any version of Expression Web

Styles can be created by accessing the 'Style Builder' in Expression Web.

 

How to open the style builder:  

Click 'New Style' which is located in the Manage Styles Panel.  (see screenshot below)

The Manage Styles Panel is located in the Left Panel, usually the bottom half.  To locate this panel quickly, click on Panels--> choose Manage Styles Panel.

This will open the Panel.

As a result, the New Style dialog window will open.  This is what I refer to as the Style Builder.  It's just easier to say! (see the image below.)

 

The Style Builder is show below

Now that we have the style builder open, let's start creating our Style.

• We need to indicate they name of the Selector we will use to target the HTML Element in question.
• We need to define the Style in the External Style Sheet ("existing style sheet").
• Check the box to apply the style to current document selection.
• And lastly, choose the Style Sheet in which you want Expression Web to write the style.

Let's assume we are styling the header of our web page.  We already have the div on the page.  Now we need to create the CSS Style and apply Properties and Values.

The Header:  The best type of Selector to use for the header, in this situation, is an ID Selector.  Remember, an ID Selector must be unique.  In other words, a particular id selector may be applied to one element on the page, and that's it.

An ID Selector also begins with the # pound or hash sign.

The actual word that we use for an ID Selector is any word we want to use.  In this example, we will just use the word "header".  Therefore, our Selector for our Style we be #header 

#header {
}

Next, we need to set the property value pairs that will control the appearance of the header.  for instance, let's specify a height for header.

#header {
  height: 80px;
}

We would continue to add property: value pairs until we achieve the look we are shooting for.