Expression Web makes CSS styling easy.  In this example, I want to apply a new style to an existing page.

I start by selecting text, and then I navigate to the Apply Styles box on the lower right, and I choose New Style.

The New Styles box appears, and I have to make several decisions.

• Define In:
  • Current page will give me an embedded style.
  • New style sheet will create a new, linked stylesheet.
  • Existing style sheet will allow me to add this style to an existing style sheet.
• Let's stick with a linked sheet.  Create a new one if this is your first style sheet, or use an existing one, if possible.
  • This will automatically create a link to the new or re-used stylesheet in your page.  I called mine styles.css, and here's what it gave me:   <link href="../styles.css" rel="stylesheet" type="text/css">
    

Once we've chosen where to put our style, we can choose the font markup.  Most of this is self-explanatory. 

• You can select font size, style, color, etc.
• There are several pre-defined colors.  Click the drop down to see them.
• Don't see a color you want?  A very useful part of Expression Web is the eye dropper tool.  You can use this to select a color if you don't see the color in the drop down, and you don't know the color's hexadecimal number.  Simply click the "swatch" (box with the diagonal line) next to the color drop down.  A new dialog box will appear.  This dialog box will have a button with an eye dropper logo and the word "Select".  Choose this, and the mouse icon will turn to an eye dropper.  Hover this over any part of the screen - even outside Expression Web - and it will show you the color over which you are hovering.  Click to save the color to the current style.
  • Screen captures do not capture the mouse icon, but in the case below, I was hovering over the hand icon in Tag Properties.  I placed a red box where I was hovering.  The color selected appears in the More Colors window.  I placed a red box around the color that was selected when I hovered over the hand.

I give the style a logical name, subheading1, and choose OK.  Now that I have created the style, Expression Web surrounds the selected text with <span class="subheading1"> and </span> tags.  I can select any other text on this page, and choose my style from the Apply Styles dialog.  Expression Web will add the span tags above to the selection. 

Since this is a new style sheet, Expression Web prompts me to save the css file the next time I save the document in which I am working.  I choose to save this in a root directory, so that it can be accessed from other pages in other directories.