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

1
<font>

tags — perhaps something like this:

1
2
3
4
5
<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;
color=&quot;#CC0000&quot;&gt;&lt;/font&gt;&lt;/p&gt;

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
content.

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

1
&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:

1
.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:
    1
    2
    &lt;b
    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:

    1
    &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:

    1
    &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:

1
.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
    and
    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

    1
    &lt;head&gt;

    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

    1
    body

    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
    site.

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
CSS
." 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

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch