What is .style1?
Expression Web is designed to use CSS (cascading style sheets) rather than add HTML markup to your code. So when you make a change to the text on a page, Expression Web will create a new style. The first new style will be named .style1, the second will be named .style2, etc.
Here's an example:
<h2>Example - Heading 2 Text</h2>
The text above is the look of text that uses the Heading 2 <h2> tag. The text color, size, and font is set within the CSS file. You don't have to do anything special because the CSS file does the work.
But say you want a different look, such as having the text in blue and centered. You can highlight your text and change it in the toolbar so that it looks like this:
<h2>Example - Heading 2 Text</h2>
Unless you are working in Split or Code view, you won't see that Expression Web has added this change as an embedded CSS style in the head of the page:
<style type="text/css">
.style1 {
text-align: center;
color: #3333CC;
}
</style>
If you have the Manage Styles task pane open, you will see this new class style has been added in the current page rather than in the external style sheet:
This is valid code! CSS is made to cascade from external to embedded to inline. The problem comes if you have several of these new styles in the head of each page. You would spend quite a bit of time if you have to edit all of your embedded styles.
You can easily move any embedded styles into your external style sheet!
In the Manage Styles task pane, highlight the .style and drag it into the panel below that is your external style sheet. Once your style is in your external style sheet, you can rename it to something more appropriate like .bluecenter.
By managing any new styles you create, you will find it easier to edit these new style classes and keep from cluttering the head portion of your page with styles that can be reapplied to other elements from the external CSS file.