Expression Web Tutorials: Building Web Sites with CSS & HTML ~ One Step at a Time
Getting Started Steps
- CSS
- Style Declaration
- 3 Types of CSS
- Style Declaration
- CSS Selectors
- Style Builder
- Positioning Properties
- CSS Layouts
- NEW! CSS 3 Tutorials
Expression Web Tutorial: The Style Builder
Contents
Using the Style Builder:
- 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 Style Builder can be opened in 1 of 2 ways:
- 1. Click on the words, "New Style"
-
-
2. Or, Right-Click on an Existing Style and choose Modify Style. 
The 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.
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).