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

Are you preparing to launch a new #SharePoint #intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar with @EricOverfield!

https://pixelmill.com/webinar-recap-9-takeaways-from-a-migration-to-sharepoint-online/

Are you preparing to launch a new #SharePoint intranet?

Don’t spring it on employees out of the blue. First, talk to as many of them as you can.

Planning is just phase one. For all of our tips, watch our recent webinar!

http://ow.ly/dsQM50GqPI5

It's that time again! Join #Microsoft MVP & Regional Director, @EricOverfield on Thursday, October 28th, at 11:00 AM PST as he walks through #MicrosoftViva’s current state & offerings and what they mean to your #digitalworkspace right now.

http://ow.ly/3QFK50Gnx9f

It's the final countdown! Join @EricOverfield at 11am PST to learn about common pitfalls and paths to success when moving to #SharePointOnline. You'll walk away with practical tips to use in your organization today!

http://ow.ly/fdf150GjyJT

In today's episode of the #PixelMillWebinars, you'll learn from the experience of a global organization’s path to digital teamwork victory and get to see first-hand how to successfully plan a smooth migration for your team.

Join us at 11am PST!

https://pixelmill.com/webinar-9-takeaways-from-a-global-organizations-migration-to-sharepoint-online/

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch