Working with CSS

I would encourage any of you who are going to use Expression Web to learn at least the basics of working with cascading style sheets or CSS for short. Listed below are just a few of the resources I have found helpful.

Resources

• CSS Basics - written by Ben Partch - an eighteen chapter book you can either download in pdf format or print.
• Working with CSS
• CSSDog Tutorials
• Sitepoint CSS Reference
• Cascading Style Sheets: Separating Content from Presentation  - Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson
• CSS Tutorial from W3Schools
• Introduction to CSS 
  • CSS Tutorial Part 1
  • CSS Tutorial Part 2 
  • CSS Tutorial Part 3 
• CSS and images 
• CSS in webpages 
• CSS Play

CSS Tab

If you followed Tina Clarke's Setting Up Expression Web EBook for your version of Expression Web, your CSS Tab under Page Editor Options will look like the screenshot below. You might want to also go back and read again that section of the Setting Up EBook.

Figure 1: Page Editor Options CSS tab
Click for larger image

If you are used to using the Formatting Toolbar to create your style, DON'T! If you do the nice clean code from your template will not be clean for long. You will need to retrain yourself to a new way of doing things. If you work in Split View, you can observe  how Expression Web writes the styles and, you can learn to make your own styles and transfer them to your external Style Sheet. Working using the Split View Tab, you will be able to see what happens when you are working in Design View and what the effects might be of what you do.

EXAMPLE: I inserted the graphic for the screenshot above along with a hyperlink to a larger image. Expression Web created a style block in the head section with the following style

.style1 { border-width: 0px; }

and added the following to the image tag class="style1" Doesn't tell you much does it? What this does is keep the image, which is a hyperlink from having an ugly blue border around it. So one style rule I include in all of my external style sheet is the following style:

body img { border: 0px; text-decoration: none; }

That style will keep any image from having that blue border if hyperlinked. It would NOT have been created if the style sheet had been attached to the page before I started creating the content.

If you find code littered with style1 style2 etc TURN OFF the Formatting bar and or the Common Toolbar, it's easy to do and easy to TURN BACK ON.

EW 4.0 - View > Toolbars > un-tick the Formatting and/or Common Toolbars or right click on a grey area of the toolbars and un-tick the Formatting and/or Common Toolbars.

Managing Styles

Open the default template you have chosen to work with for your site. Two of the Task Panes/Panels you will need to work with styles are Apply Styles and Manage Styles. I dock them on the left side of my screen but you will need to decide what works for you.

View Screenshot

Manage Styles Task Panel/Pane

With the DWT on the screen, you will see in the Manage Styles Task Pane/Panel, a listing of the styles used with that template and a preview of the one selected at the bottom. Each of the default templates use two separate style sheets, layout.css and styles1.css. The number will depend on which of the style sheets you selected for the site.

The Manage Styles task pane/panel enables you to apply, modify, rename, and delete styles; attach or detach external cascading style sheets (CSS); select all instances of a style; and go to the code that contains a style's rule set. You can also use the Manage Styles task pane/panel to move styles from an external CSS to an internal CSS and vice versa, or to move the location of a style within in a CSS.

View Screenshot of the Manage Style Task Panel

Apply Styles Task Panel/Pane

The Apply Styles task pane/panel enables you to apply, remove, modify, rename, and delete styles; attach or detach external cascading style sheets (CSS); select all instances of a style; and go to the code that contains a style's rule set. The Apply Styles task pane/panel displays each style according to the rules of the style, so you can quickly identify the style you want to work with just by looking at the style's visual appearance.

When you open a web page, the Apply Styles task pane/panel lists styles that are defined in all of the page's cascading style sheets (CSS), including external, inline, and internal CSS. Class and ID selectors appear under either the name of the external .css file that contains the style or Current Page if the style is in an internal CSS. Element selectors are organized the same way but appear under a separate heading named Contextual Selectors below the list of class and ID selectors. You can set the task pane to list all styles or restrict it to list only styles that are used in the current web page or the current selection in the page. No matter which of these options you've selected, element selectors and inline selectors appear in the task pane only when you either place your cursor in content that uses the style or select content that uses the style.

You can sort the list of styles that appear in the Apply Styles task pane/panel and also restrict the list to show only styles that are used in the current web page or on the current selection. If a particular style is difficult to see against the white background of the task pane, you can select a color to appear in the task pane behind styles that don't contain a background property.

View Screenshot of the Apply Styles Task Panel

The styles shown in the screenshots and the rest of this set of tutorials will use the Organization 3 default template that comes with Expression Web.

Copyright © Pat Geary of Expression Web Tutorials and Templates
Written May 2010