Transitioning to CSS

Author: Corrie Haffly, PixelMill

PixelMill offers modular site-building solutions optimized for Web 2.0, featuring high quality templates, images, video, audio, add-ons, platform-specific solutions, training, and custom services for developers' web design needs.

If you have used a CSS-layout template in FrontPage 2003 or earlier, you probably saw gigantic heading text and sections that seem to go all over the page instead of staying in properly aligned columns. If you tried to stick it out, the style sheet might have scared you off when you tried to rearrange the columns or change the dimensions of certain regions. These experiences might have been enough to cause you to throw your hands in the air and say, "I give up! Tables are much better!"

To help convince you to take another look at CSS templates, here is just a short list of comparisons between CSS and tables-based templates:

Tables-based templates, particularly those that use a lot of nesting tables to achieve layout and interface effects, double, triple, or quadruple the size of your web pages because of the extra table, rows, and cell markup tags. This slows the viewing time for users, increases the bandwidth used by your site, and dilutes the effectiveness of your content for search engine spidering.
CSS-based templates can streamline the code for your site, making your pages load faster. The keywords in your content gain more relevance, which is great for search engine rank!
The content in your table has to fully load before it can be displayed in a browser. If you have a large table or a series of nesting tables in a page for layout, the viewer may only see a blank screen while the page loads all the stuff inside the table, then finally renders the table and content.
CSS-based templates do not depend on tables for layout, so the content displays as the page loads.
If you want to make a global design and layout change in a tables-based template, you essentially have to recreate your site and modify every single web page.
Because CSS templates separate the design from the content, modifying the style sheet will affect every page in your website that uses the style sheet. You only have to make your design changes once if your site's HTML structure has been well planned!

Web developers who have made the leap from basic styling of fonts and link-underlining to advanced CSS positioning all say definitively that they would never choose to go back to designing with tables. By the end of this article, you should feel empowered to take a look (or another look, as the case may be) at CSS layouts.

Working with CSS Templates in FrontPage 2003

What to Expect

Take a look at this CSS website layout (Boutique Pink by John Galt's Templates, available from PixelMill). This is how it displays in a browser:

Template displayed in browser

Now, take a look at what the web page looks like when you open it in FrontPage 2003:

Web page displayed in FrontPage 2003

The left column is below the main center column, and the main center column positioning is off. You'll find that many CSS templates in FrontPage 2003 will have columns not where you would expect them. Some templates will also have gigantic fonts for the headings, although they display properly in a browser.

Tips and Tricks

Depend on Preview in Browser.The FrontPage Design View is based on an out-of-date rendering engine and doesn't display some aspects of CSS design properly. Because of this, it is very important to test your page in a browser fairly often instead of depending on FrontPage's Design task pane. The Preview task pane will usually display the site normally, but I recommend that you have your site open in a browser and periodically refresh your pages to see how they look. So, you might add some content, save your page, go to the browser, and refresh, then return to FrontPage to make your next change.

Conversely, don't depend on the Design task pane. Don't try to make your site "look right" in the Design task pane. Instead, focus on entering your content in the given areas.

Narrow your vision. Focus on each individual content area instead of trying to look at the whole page in Design view. It most likely isn't in the right place in FrontPage anyway, so just assume that it will show up in the right place and enter your content in that area (then Preview in Browser to make sure!).

Test in multiple browsers. Some CSS changes won't work the same way in different browsers, so it's important to download and install other major browsers such as Firefox, Netscape, and Opera. I typically have all four browsers open (including Internet Explorer), and refresh in all four after I make a major change to the CSS layout.

Don't be afraid to work in Code View. The beauty of FrontPage 2003 is that you can easily switch between working in the Design and the Code views with the Split view. Sometimes FrontPage can freak out and the content areas move all over the page while you are trying to edit, which can be quite distracting! In cases like that, I simply switch to Code view to enter my text and content in the HTML code itself.

Working with CSS Templates in Expression Web

What to Expect

Here is the same site open in Expression Web:

Web Page displayed in Expression Web

As you can see, Expression Web does a much nicer job of displaying the CSS template layout properly! (This may not be the case for every layout, but it is true for most.)

Working with CSS in Expression Web

Expression Web comes with some handy tools for understanding the CSS in a website. In the diagram below, I've selected the heading in the left column.

Heading selected in Expression Web

First, notice that the heading gets outlined, and a tab sticks up from the top informing you what HTML element is being used. In this case, the <h2> tag is being used.

In the CSS Properties task pane, the top half ("Applied Rules") shows all of the rules that apply to this particular element. This helps to demonstrate the "cascading" nature of CSS—outer elements have properties that may affect this element, so Expression Web tries to show you how they relate with each other. Expression Web will display all of the rules—that is, the parts of the style sheet—that correspond with this element. You can click on each item in the Applied Rules list to view the defined properties in the CSS Properties area below. You can also hover over each rule, and the corresponding code from the actual style sheet will show up as well, as you can see in the diagram below:

Style sheet code displayed when the pointer hovers over a rule

In this example, there are several different sections of code in the style sheet that give this particular heading its properties. The Applied Rules area lists everything in cascading order, so any duplicate properties near the bottom cancel the properties above them. You can see this more clearly if you click the Summary button at the top of the task pane:

Summary of properties

When you activate the Summary button, you can see every property that has been defined that affects this element. Clicking on any of the properties will highlight the corresponding rule in the Applied Rules area.

For example, the first font color property (labeled with the number 1) sets the text color to black. This property was defined in the <body> tag, which allows all fonts in the page to have a default color of black.

But you can see that this color property has been crossed out, because the next color property (labeled with the number 2) supersedes it and sets the font to white. This specific property is under the#body2 h2rule in the style sheet. (#body2 is the ID of the div that holds the left column content, so#body2 h2creates properties for any Heading 2 elements that are inside thebody2div.)

The Summary button is an easy way to see all of the properties for an element at one time, and to understand where they are being defined in the style sheet.
Another useful task pane in Expression Web is the Manage Styles task pane. This task pane lists and organizes all of the style rules used in the web page, including styles in external style sheets (.css files) as well as styles defined internally on the page (inside of <style> tags). Hovering over one of the rules brings up the style sheet code, similar to the CSS Properties task pane.

Manage Styles task pane

Each style has a colored icon next to it:

Blue: Element-based styles
Red: ID-based styles
Green: Class-based styles
Circled icon: Used on current page

At this point, I may have thrown out several terms that you do not recognize. ID-based styles? Class-based styles? What are those? You may also be unaware of which CSS properties exist, and even what they mean. For example, Font > Color is a pretty obvious property, but what about Box > Margin? And why do some margin definitions have one value, while others have two or four? (See diagram above of CSS Properties task pane to view the different margin property values.)

Don't worry—my next article will give you some CSS basics so that you can use the Expression Web tools with confidence!

The key thing to realize with the Manage Styles task pane is that it basically lists every rule in your style sheet in order. (You can change the display to organize them differently by clicking the Options button.) You can click on the individual styles and drag to rearrange them. (This may mess up the formatting and tabs of the style sheet.)

This also means that it is pretty easy to add new styles to your website. There are two ways that you can do this:

Create a new style from scratch
Click the New Style link in the Manage Styles task pane. Name the selector (more about this later) and choose if you want to define the style in the current page or inside an existing style sheet. Then define properties for the new style and click OK.
Format a section of your web page
Simply by selecting some content on your page and using the normal toolbars to format it, Expression Web will automatically create a new style with those properties. This new style will show up in the Manage Styles task pane, under the "Current Page" category. If you look in your HTML code, you'll see that the class has been defined for you in the headof the document and applied to the area where you added formatting.

In this example, I've followed the instructions from #2. I highlighted some text, and then used the font color button on the toolbar to turn it red.

Selecting text and turning it red

Expression Web automatically created a new style called .style1 for the red text and added it to the top of the page. The selected text was wrapped in <span> tags, with the style1 class applied.

Expression Web's generated style code

When I looked in the Manage Styles task pane, the .style1 class had been added under "Current Page."

New style added to Manage Styles task pane

Here come two demonstrations of the powerful capabilities of the Manage Styles task pane. First, I right-clicked on the style and chose Rename Style. In the dialog box, I put a descriptive name for the style ("redtext").

Renaming the style

Expression Web automatically renamed the style in both the style definition and the content area.

Renamed style updated in the code

Then, deciding that this was a class I wanted to make available for all my pages, I dragged it from the Current Page area of the task pane to the list of rules in the style sheet:

Moving the style from the current page into the style sheet

This removed the style definition from the top of the page and moved it into my external style sheet!

I hope I have sufficiently shown how powerful the CSS tools in Expression Web can be. But to best use the tools, it's necessary to learn the nitty-gritty of the CSS language. That's where the next article comes in!

Next: Learning CSS