CSS and Expression Web

I’ve added a new article to our support knowledgebase about how CSS works and is integrated in Expression Web. You can view the full article text here…

If you’re a long-time FrontPage user, you’re probably used to using the
Formatting toolbar to make your text bold, italic, colored, use different fonts,
etc. If you ever took a glimpse at the generated HTML code, you would have seen
lots of


tags — perhaps something like this:

<h1><font color="#000099" size="5" face="AGaramond, Garamond, Georgia,
serif&quot;&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &lt;/font&gt;&lt;/h1&gt;<br />
&lt;p&gt;&lt;b&gt;&lt;font size=&quot;2&quot; color=&quot;#CC0000&quot; face=&quot;Georgia, serif&quot;&gt;In volutpat
consectetuer nulla.&lt;/font&gt;&lt;/b&gt;&lt;font face=&quot;Verdana&quot; size=&quot;2&quot;

Expression Web, in keeping with today’s web standards, has thrown out the
<font> tag altogether and now generates formatting using CSS, or Cascading Style
Sheets. (If you need to be convinced that CSS is a good thing, take a look at my
Intro to CSS ("A Baking Analogy") article, or "Why CSS?" from the PixelMill newsletter.)
With CSS, not only can you end up with cleaner, leaner code, but CSS gives you a lot more options for formatting not just text but the display properties of any object or element on your page.

How a style works

CSS code is different from HTML code, which means it has its
own rules. But it was designed to work together with HTML to format your web

If you wanted bold red text in a paragraph before (using the formatting
toolbar), you would have had HTML code that looked like this:

&lt;b&gt;&lt;font color=&quot;#ff000&quot;&gt;Red text&lt;/font&gt;&lt;/b&gt;

With CSS, you can streamline the code by creating separate CSS code that looks like this:

.red { color: #ff0000; }

In the HTML code, you can then use this "class" as many
times as you’d like.

  • You could apply the class to the bold tag for bold, red text:
    class=&quot;red&quot;&gt;Red text&lt;/b&gt;
  • You could apply the class to a paragraph tag to get an entire paragraph
    of red text:

    &lt;p class=&quot;red&quot;&gt;An entire paragraph of red text&lt;/p&gt;
  • You could apply the class to a table cell to turn all the text in the
    table cell red:

    &lt;td class=&quot;red&quot;&gt;Everything is red!&lt;/td&gt;
  • The opportunities are endless!

In FrontPage, applying red text would result in multiple instances of the
<font> tag, and if you wanted to change the color later, you’d have to go
through every page and select the text and change the color. With CSS, you can
simply edit the stylesheet to use a different color:

.red { color: #660000; }

… and ALL the red text in your site will change!

How Expression Web creates CSS code for you

In FrontPage, you could generate CSS using the
Style dialog box
. Expression Web provides two ways of creating CSS code:

  1. Style dialog box
    Expression Web has redone the Style dialog box to allow easier access to
    properties and brought it front and center with convenient links to create a
    "new style" or to modify a style via the
    Apply Styles
    Manage Styles task panes. This
    allows you to create your own custom styles and define as many properties as
    you’d like. When you use the style dialog box, you have the option of
    creating the CSS code in the page itself (the style would only be available
    for that page) or in an external stylesheet (the style would then be
    available for all pages that link to the stylesheet).
  2. Formatting toolbar
    Expression Web will auto-generate CSS code when you apply formatting
    (colors, fonts, etc.) from the Formatting toolbar. By default, Expression
    Web will create classes called ".style1", ".style2," etc., in the


    area of your page. If you use the Formatting toolbar to apply the same
    property, Expression Web will reuse styles as appropriate. (See Advice and
    tips below about the Formatting toolbar.)

Advice on transitioning to Expression Web and CSS

If you’re totally new to CSS but want to use Expression Web to create
standards-compliant sites, I have some advice for you:

  • First, accept that you will have to learn at least some basic CSS.
    Expression Web organizes the Style Dialog box options by grouping similar
    CSS properties. While some of the property names are fairly intuitive to
    figure out what they do ("color" allows you to change the text color, for
    example, and "font-size" is pretty obvious!), you’ll need to learn what the
    difference is between "padding" and "margin," how properties can be applied
    to affect different elements, how CSS rules "cascade" from one element to
    another, and other basic knowledge about how to best use stylesheets.
  • Think "globally."
    In general, using the formatting toolbar creates a lot of new styles that
    you have to rename and keep track of. You’ll have to re-train yourself to
    think in terms of creating "global" CSS rules that can be either applied by
    default (without any more page-by-page work on your part) or that can be
    reused multiple times. As a concrete example, instead of highlighting all
    the text on your page and then setting the font, text size, and text color,
    you can create a CSS rule on the


    element (in HTML, the
    body element contains everything else that shows on your page) to set a
    default font, text size, and color for your entire site. As another example,
    drawing from my "red text" example above, you can create a global class for
    ".red" text that can be reused throughout your site and applied to your
    text, instead of using the Formatting toolbar and ending up with multiple
    styles that do the same thing.

  • Use the Style dialog box instead of the Formatting toolbar.
    By using the Style dialog box, you have more control over how your CSS rules
    apply to different elements and you have more options than what the
    Formatting toolbar provides. You can use the Formatting toolbar to learn
    CSS — make a change and then look at the generated code to see how the
    properties are defined in CSS; however, using the Formatting toolbar on a
    day-to-day basis can create lots of extraneous styles that clutter up your

Creating and using CSS in Expression Web

To learn more about creating and using CSS in Expression Web, take a look at
"Transitioning to CSS" and scroll down to the
section on "Working with CSS Templates in Expression Web."

To learn the basics of CSS, take a look at "Learning
." This article gives some sample code of how you can use CSS and
provides information on the different CSS properties and what they are used for,
but it doesn’t go into great detail on actually creating complex layouts with
CSS (it’s focused more on the kind of CSS you might find in one of our
templates). The article is a great place to start to familiarize yourself with
CSS, and there are links to other resources if you’d like to learn more.

From CSS and Expression Web, KB101771.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under


Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now: https://hubs.ly/Q01nc9dm0


During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!


In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.


Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant


Subscribe to PixelMill's

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch