Common & Formatting Toolbars
Toolbars are handy since they contain items you are likely to use frequently. You can also customize toolbars so you can have your favorite items at your fingertips.
The Common Toolbar:
In the image above, you will notice items located between the red brackets. These are common "formatting" items. Why they are in the common toolbar is a mystery to me, since you also have a Formatting Toolbar that contains the same items.
Expression Web is designed to write CSS rather than add a lot of HTML markup to your coding. This is a good thing! Unfortunately, many see these formatting items and start using them to change font sizes and colors, etc. For newbies who rarely look at their coding, this can quickly cause problems.
To save a few headaches down the road, I would recommend that you remove these formatting elements from the Common Toolbar. At the end of the toolbar, you will see a small down arrow.
Click on this arrow and you will see "Add or Remove Buttons". From there you can see the word "Common" with a right-facing arrow.
Clicking on Common will lead to a list of all of the items that are contained within the Common Toolbar. You can then uncheck any items for removal. [Don't worry, you can easily turn them back on again.]
Now you will want to activate the Style toolbar and perhaps the Formatting toolbar. You can then dock these two toolbars below the common toolbar.
With the Style toolbar, you will have quick access to all of the Classes and IDs that are in your external style sheet. You can also choose to turn off the Formatting toolbar if the temptation to use it gets to be too great. We'll cover more on this topic in some upcoming lessons on CSS.
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 green and centered. You can highlight your text and change it in the Common toolbar by clicking on the formatting elements.
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>
Realistically, one or two extra embedded styles is unlikely to cause any problems since these are easy to edit. Headaches can happen when you have a dozen or more and some are conflicting with the external CSS file.