CSS and Expression Web
Article ID: KB101771
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:
- 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).
- 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.
Authors and Contributors:
Corrie Haffly
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1129/kb101771.htm
permalink to this article:
http://www.pixelmill.com/support/kb101771.htm
Back to top