Let me start by saying that I am a web designer.  I love PhotoShop, HTML, and Web Standards as much as the next guy.  I feel I need to say that before I write this because it’s possible that I may be accused of being a poser or agent of “The Man”  for saying what I am about to say, or rather, asking the question that’s been on my mind for a long time now.  Why does the design community ignore SilverLight?  Not only that but why does the design community refuse to acknowledge great tools like SketchFlow and SuperPreview?  Just asking… read more…

Checking the compatibility and general “clenliness” of your CSS is important on any web project.  Expression web provides a number of great tools for making sure that you code is not only clean but also compatible with your target browsers.

Start by opening your site in Expression Web 3.  Select the CSS files you want to test from the file and folder list or the entire site.

You will find the CSS report by clicking on Tools>CSS reports…

About the errors tab:

Unused Styles - List class, ID, and element selectors that are defined in a CSS and not used in your web pages.
 
Undefined Classes - List class selectors that are referenced in a web page and aren’t defined in a CSS.
 
Mismatched Case - List class and ID selectors that are defined with a case that is different than the case of a reference to that style. For example, if your style sheet defines a class that is named “myclass” and a web page references “MyCLASS”, this style will appear in the report.

About the usage tab:

Class Selectors - List class selectors that are being used, the web pages that are using those styles, and the location of the style definition.
 
ID Selectors - List ID selectors that are being used, the web pages that are using those styles, and the location of the style definition.
 
Element Selectors - List element selectors that are being used, the web pages that are using those styles, and the location of the style definition.

The results of your report will show you any classes that are questionable and allow you to open the page with the offending lines lightlighted.

Old habits die hard. I started writing HTML code in the mid 90’s. Back then I had a book and a few sites online for reference and that was about it. There were not many great markup editors at the time and much of my work was done by hand. Eventually I moved on to HotMetal. The functionality was very basic but there were a few shortcuts for formatting text.

As editors have evolved I have found it difficult to break my habit of going to the web for code references I cannot remember, even when my feature rich editors provide all the tools. Maybe it’s some kind of trust issue or maybe my mom just did not hug me enough as a child…who knows. Recently have committed myself to learning all the features of the tools I am using. Even if it’s not a feature I would use much, I think they are all worth learning.

In my last post I talked about how Expression Web 3 makes it easy to establish your DocType declarations. One of the other tasks that designers have to do during page setup is to attach or link an external style sheet. It’s a very simple thing to do but I have never committed the code to memory. Now I can perform this task quickly and perfectly every time.

Attaching a style sheet
In design view- drag and drop the file onto your page from the folder list (wow, that was easy)

In code view- Open the page you want to attach the style sheet to and do one of the following
From the menu: Format>CSS Styles>Attach Style Sheet

From the Style Tool Bar: Click the attach style sheet icon.

After performing one of these selection options you will be presented with the Attach Style Sheet dialog box. Browse to the style sheet you want to attach. Notice you can attach your style sheet to multiple pages at a time by selecting either All HTML pages or Selected pages. This is quite handy if you need to attach your CSS to many pages at a time.

Linking vs. Importing CSS
The last thing you need to do is determine if you want to Link or Import your CSS. From a standards perspective there is no real difference between them and each will work equally well. It used to be that using @import was a convenient way of hiding styles from older browsers that could not understand @import (Netscape 3, IE3 and 4). Now, @import is more frequently used to import styles from one style sheet into another.

After selecting your CSS file click OK and Expression Web 3 will insert the required line of code.