How to Use the Style Builder in Expression Web
The Style Builder: Easy to Use CSS Tool
The Style Builder is where you will create Styles. These styles are really CSS styles. Expression Web makes this whole process very simple. Read below to learn how to use the style builder.
hover your cursor over the image to see larger image.
Style Builder for CSS in Expression Web
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.
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.
HTML 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. 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
Next, always define in an existing style sheet. This keeps the content separate from the presentation, and lightens the code which makes for easy management.
How to make an Internal or Embedded Style
If you define in current page, this is called an Internal or Embedded Style and will be placed in the <head> section of the web page. The embedded style cannot be reused on other web pages, it will only be applied on the current page.
Internal or Embedded styles are not the ideal way to create and re-use styles. But, it's up to you.
3. URL: Click on Browse to find your external style sheet
Simply choose the style sheet that is attached to the current web page.
4. Check the Box
Check mark the box to make sure the style will be applied to the current document selection.
That's it.
Use the Category List to Navigate the Style Builder and CSS Properties
The Category List displays different property types we can apply to the html on our page. Navigate through each category to see what is available. Each property and corresponding values is equivalent to CSS properties and values. You need to look up each property and value to see what it does.
I am in the middle of making a CSS Reference for beginners using Expression Web.
Another resource to get you started is the video tutorials page on this site. Watch the tutorials and learn about the selectors and styles along the way.