March 15, 2007

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 <font> tags -- perhaps something like this:

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

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:

<b><font color="#ff000">Red text</font></b>

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: <b class="red">Red text</b>
  • You could apply the class to a paragraph tag to get an entire paragraph of red text: <p class="red">An entire paragraph of red text</p>
  • You could apply the class to a table cell to turn all the text in the table cell red: <td class="red">Everything is red!</td>
  • 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 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 <head> 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 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.

Posted by: Corrie Time posted: March 15, 2007 1:38 PM Trackback: TrackBack
Comments
Post a comment









Remember personal info?