Expression Web

Review and First Look

Cascading Style Sheet (CSS),
Task Panes and Implementation.

There are a variety of web standards all serving different purposes. The strictest of these standards is XHTML while the least restrictive and currently supported standard is HTML 4.01, an outcome from HTML 4.0 first recommended in 1997. HTML 4.01 was recommended in 1999, and XHTML 1.0 was recommend for use in 2000, so you can see these standards are not new.

So why move to CSS and XHTML now? Foremost because newer browsers are moving to the newer standards. With the release of IE 7 many web sites may no longer perform the way they were intended to. As for additional benefits and answers to the most frequently asked questions about web standards, you'll want to check out the information at the W3C organizations site.

This review does not look at designing a web site with CSS and XHTML. Although the concepts are fairly simple, the implementation of CSS and XHTML has been significantly troublesome because of the way the standards are implemented in different browsers.

The greatest challenges have been the Microsoft browsers although each of the other browsers have their own quirks. The release of IE7 should have simplified a lot of this but has added yet another set of variables and IE 6 will still be a factor for a while.

If you are just starting in CSS development you'll want to use a DOCTYPE standard that keeps all browsers out of a quirks mode. This significantly simples getting your pages to look nearly the same in all web browsers. You can find information about these doctypes on A List Apart's web site.

CSS and Expression Web

All in all - attaching style sheets, making new style rules and  modifying style rules are very useable, but a little cumbersome and time consuming. I had hoped Microsoft would streamline the task panes and make things a little less cumbersome but I guess they had other priorities to work on first.  

CSS development and HTML 4.01 and XHTML compatible web pages are developed though a couple of primary sections in EW.

  • Two style dialog boxes, one for creating New Styles and the other for Modifying styles.
  • Task panes for Apply Styles, Manage Styles, CSS Properties, and Layers.
  • Tool bars which can be used such as the Formatting, Positioning, Style and Style Application tool bars.
  • And you can open and directly modify a style sheet.

apply styles dialogYou attach a Style Sheet to the current web page by selecting the menu item in the Manage or Apply Style Task Panes.

The New Style and Modify Style dialog boxes enable you to design a new or existing style. The New Style dialog is available by clicking the New Style menu item in the Mange Style or Apply Style task panes or the Style tool bar. The Modify Style dialog can be accessed by right clicking the CSS rule in the task panes and selecting Modify Style... in the menu.

The Apply Styles task pane enables you to apply, create, delete, modify, or remove styles, and attach or remove an external CSS. The task pane identifies style types, and shows you if the style is used in the current web page and by the current selection.

The Manage Styles task pane provides all of the same features as the Apply Styles task pane, except you can't remove a style from content. You can use the Manage Styles task pane to move a style from an internal CSS to an external CSS, or vice versa, and to move a style in the code of a CSS.

The CSS Properties Task PaneThe CSS Properties task pane shows you the styles that are used by the current selection in your web page and also shows you the styles order of precedence. In the picture to the left the font-size is inherited from another style.

In addition, this task pane is supposed provide you with a comprehensive list of all CSS properties, which enables you to add properties to an existing style, modify properties you've already set, or create new inline styles.

The summary button in this task pane alternates between just the properties that pertain or provides a view of all properties that you could select from.

The Style toolbar enables you to apply or remove class-based or id-based styles, or to create and apply new undefined styles.

The Style Application toolbar provides more control over the styles and for use when authoring CSS in Manual style application mode.

The CSS Reports task pane provides a report of either CSS errors or CSS usage in one or more pages, or an entire site. The Style Sheet Links site report lists the pages that reference an external CSS and lists the referenced CSS files.

When authoring and editing style sheets there is IntelliSense for CSS that helps increase your productivity.

And since I brought up reports, well this sounds good a good place to look at next.