What are all the style# in my page?

Do you have something like the following code in the head section of your new page? NOTE: This was taken from an actual site and is only half of the styles that had been inserted. Expression Web is set up to use cascading style sheets rather than inline styling as FrontPage did. One of the best pieces of advice I can give new users of Expression Web is to forget you have a formatting toolbar. The second piece of advice is learn to work in Split View until you know how the program works and what happens when you take a certain action.

<style type="text/css">
.style1 {
border-color: #c0c0c0;
border-width: 0;
}
.style2 {
text-align: center;
}
.style3 {
background-color: #003399;
}
.style5 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFF00;
font-size: small;
}
.style6 {
border-color: #c0c0c0;
border-width: 0;
background-color: #003399;
}
.style7 {
font-family: Arial;
}
.style8 {
font-family: "Times New Roman";
}
.style9 {
font-size: small;
color: #000080;
}
.style10 {
color: #000080;
}
.style11 {
border: 0 solid #c0c0c0;
}
</style>

The text at the top of this page is styled using the <h1> tag. The style rules are specified within the external style sheet.

h1, h2, h3 {
color: #980E10;
font-weight: bold;
background-color: #ffffff;
margin-top: 5px;
margin-bottom: 5px;
}
h1 {
font-size: 1.5em; )

I decide I want a different look so I highlight the h1 tag and use the formatting toolbar to change the color of the font and make the type small caps. If I am working in Split View and/or may the Manage Styles task pane open, I see a new .style1 has been added to the head section of my page.

Screenshot New style created.

If I wanted all of my <h1> tags to have this style, I would make the change in my style sheet rather than create a new style. If this was a special case and I really wanted this particular <h1> tag to follow this style rule, I could change the name of the .style1 class created to something that means something a few days from now. I can then highlight the style and drag and drop it onto the already existing style sheet.

Screenshot drag and drop style to external style sheet.

In summary:

  • Forget you have a formatting toolbar
  • Work in split view so you see the results of your actions
  • Rename style1, style2, style3 to a name that means something