LESSON 2: Cascading style sheets examples

Understanding CSS Page 1 of 4

Welcome back. In Lesson 1, you learned how to navigate the Microsoft Expression Web interface, set up a simple website and create a web page. In this lesson, you'll learn about Cascading Style Sheets (CSS), a style sheet language for describing how HTML elements are formatted when a web page is viewed in a web browser.

By using CSS in your website, you create much cleaner HTML documents by avoiding tags such as <font>, <color> and <style>. You can also change styles across your website by modifying a style sheet rather than modifying each paragraph individually in every web page. The modified styles automatically ripple through the pages in your website, changing the appearance accordingly—thus the "cascading" part of CSS.

You can define CSS styles in three places:

	External style sheets: If the CSS are stored in separate text files, called external style sheets, they can be used to style any web page that links to them.
	Internal style sheets: If the style sheet is written directly into an HTML document—an internal style sheet—it styles only that page.
	HTML tags: You can also apply CSS styles to a single element directly in the HTML tag using inline styles.

For a consistent website appearance, you want your CSS to apply to the entire site, not just one web page. To make this happen, set up your CSS in a separate file and link each of your HTML documents to that file. The link appears in the head element of HTML documents and looks like this:

<html>
 <head>
  <title>Page Title</title>
   <link rel="stylesheet" type="text/css"
href="filename.css">  
  </head>

An external style sheet is a plain text file with the file extension ".css" and is stored in the same directory with your website. When a page in your website is displayed in a web browser window, the browser reads the .css file to find out how to interpret all tags in the file. If no style is defined for a particular tag, the web browser displays that tag using the browser's default styles.

Here's what an internal style sheet looks like in the head element of an HTML document:

<html>
 <head>
  <title>Page Title</title>
   <style type="text/css">
 h1 {color: blue; font-weight: bold;}
   </style>
  </head>

In this example, the CSS style tells the web browser that all text marked with an h1 tag (text between the <h1> and </h1> tags) in the HTML document should be displayed in blue and bold.

An inline style to make an h1 heading blue and bold looks like this:

<h1 style="font-weight: bold; font-color: FF0000">
Heading Text</h1>

You can override CSS styles by applying inline styles.

Understanding types of CSS styles

You can create several types of CSS styles:

	Class-based: These styles apply to all tags of the same class throughout a web page and are the most common type of style used in CSS. Class-based styles begin with a period (.) in the style name.
	Element-based: These styles apply to particular HTML elements in a web page, such as a uniform margin surrounding all paragraph (<p>) tags. Each element-based style begins with a corresponding HTML element, such as p for paragraph.
	ID-based: These styles apply to only one item or a block of items that's different from all other items in a web page, such as a navigation banner. ID-based styles begin with a pound sign (#) in the style name.

The period, HTML element and pound sign preceding a style name are collectively called selectors.

Inline: This style applies only to the element where you create the style. You use inline styles for one-time formatting and not for re-use across a web page or website.

So far in this lesson, you've explored CSS in general. In the rest of this lesson, you'll look at how Expression Web can help you make CSS styled websites.

Creating style sheets and styles Page 2 of 4

Creating CSS styles in Expression Web is as simple as formatting text in a word document. You don't have to be an HTML expert to make beautifully styled websites. In this section, you'll create a website that has a common banner across the top of each page. When it's done, it'll look like Figure 2-1.

Figure 2-1: Banner running across the top of the finished web page.

First, you need to create an external style sheet file and link it to the first page in your website. Then, as you create styles, you can save them to the style sheet:

Open the MySite website you created in Lesson 1's assignment.
Select File > New > CSS.
Select File > Save.
Type MySite in the File name text box, select CSS Files (*.css) in the Save as type drop-down menu and then click Save. This saves the new .css file as MySite.css in the website folder.

Now that you have a style sheet file in which to save your styles, you need to link to it. Open the default.htm file (or index.htm or home.htm), and then attach the new style sheet by clicking Attach Style Sheet in the Apply Styles or Manage Styles task pane. The Attach Style Sheet dialog box appears, as shown in Figure 2-2.

Figure 2-2: Attach Style Sheet dialog box.

Click Browse, navigate to the MySite.css file, click Open and then click OK. This creates a link to the style sheet in the HTML head element of the web page and makes all the style sheet styles appear in the Manage Styles task pane.

Now it's time to start creating styles. The heart of style creation in Expression Web is in the New Style dialog box, which gives you options for styling everything from the look of text to the placement of layers and images. Take a closer look at what's available in the New Style dialog box as you walk through the process of creating a style for the banner:

Open the default.htm file, if it's not already open.
Select the <div> tag icon in the Toolbox panel (in the Tags category of the HTML submenu), and then drag it onto the page. It automatically stretches across the top of the page.

The <div> tag represents a layer without any default properties attached.

Click the newly created div to select it, and then click New Style in the Manage Styles task pane to open the New Style dialog box.
Click the Selector field and highlight all content, and then type #banner.

The pound sign in the style name indicates you're creating an ID-based style.

Check the Apply new style to document selection checkbox to make the style effective for the div you just created.
Select Existing style sheet in the Define in drop-down list.
Click Browse, select MySite.css and then click Open.
Select Position in the Category list, and then define the width as 800 pixels and the height as 100 pixels, as shown in Figure 2-3.

Figure 2-3: Setting the width and height of the banner.

Select Background in the Category list, and then define a dark blue background color, as shown in Figure 2-4.

Figure 2-4: Setting the background color.

Select Font in the Category list, and then define the font family as Arial, Helvetica, sans-serif, the font size as x-large, the font weight as bold and the color as white, as shown in Figure 2-5.

Figure 2-5: Selecting the font and font attributes.

As you define attributes for a style, you can see what the style will look like in the Preview area at the bottom of the dialog box, as shown in Figure 2-6.

Figure 2-6: The Preview area shows the current style.

Click OK to add the style to the style sheet and close the New Style dialog box.

Attaching the new style to another web page

Now that you've created a style that's saved to an external style sheet, you can apply that style to another web page.

Open the second HTML document in the MySite folder. Just like you did with the default.htm file, attach the new style sheet by clicking Attach Style Sheet in the Apply Styles or Manage Styles task pane. Click Browse, navigate to the MySite.css file, click Open and then click OK. This page now links to the same style sheet as default.htm.

To make a banner on page 2 identical to the one in default.htm, do the following:

Drag the <div> tag icon from the Toolbox task pane into the Editing window.
Click the new div to select it.
In the Apply Styles task pane, click the #banner style.
Save the web page.

Your new div should now look exactly like the one on the default.htm page.

The beauty of CSS is that once you create a style, you can rename it and automatically apply the new name across your web pages. The next section shows you how to rename a style.

Renaming styles Page 3 of 4

As you build styles into your style sheet, you might want to change the layout of your pages later. For example, you initially set up site navigation links to appear as a column on the left side of each page, but months later you decide to change them to a horizontal bar across the top of the page.

Using CSS lets you make these kinds of major changes across your entire website just by updating your CSS instead of making large numbers of HTML edits. That's why it's important to give your styles names that are based on their content and not on their position on the page. You might not want to call that site navigation style #leftnav after all. Consider something like #navbar instead. Likewise, don't use visual cues such as color to name styles. Today's big blue dot could be tomorrow's small green triangle. Think #bullet1 instead of #bluedot.

Even the best planned style sheet might leave you needing to change style names at some point. That's why Expression Web provides an easy way to rename styles. The Rename Style dialog box lets you change the name of a style in the style sheet and in all places where you used the style in your website with one simple operation.

Changing style names

To change a class-based style name:

Right-click the style in the Apply Styles or Manage Styles task pane, and then select Rename class <style name>. The Rename Class dialog box appears, as shown in Figure 2-7.

Figure 2-7: Rename Class dialog box.

Enter the new name you want to use for the style.
If you want the new name to apply where you already used the style in your document, check the Rename class references in this page checkbox.
Click OK.

To change an ID-based style name:

In the Manage Styles task pane, right-click the style and select Modify Style.
Change the style name in the Selector field.
Click OK.
Right-click the newly renamed style in the Manage Styles task pane and select Apply Style.

Using CSS design time preferences

The design time preferences for CSS in Expression Web let you control exactly how styles are captured and applied to your style sheets. While editing a web page, you can set the style application to automatically create styles or enable you to manually create styles.

In Manual mode, you can set the target rule to create class-based or inline styles.

The Style Application toolbar, shown in Figure 2-8, lets you change these settings. To change the style application mode, open the Style Application drop-down list and select Auto or Manual.

Figure 2-8: Style Application toolbar.

The CSS tab in the Page Editor Options dialog box (Tools > Page Editor Options, click CSS) gives you even more control while you create styles. You can also set your style application mode from this dialog box, shown in Figure 2-9.

Figure 2-9: Page Editor Options dialog box, CSS tab.

The option settings in this dialog box determine the types of styles created in Auto mode when you use various toolbar buttons and dialogs to format your web pages. The following table lists the options you can set.

Option	Settings	When they apply
Page properties on the <body> tag	Inline styles Rules	When you set formatting properties in the Page Properties dialog box, Formatting tab
Font and text	Inline styles Classes	When you use text-formatting tools on the Formatting toolbar or in the Font or Symbol dialog box Note: This setting doesn't apply to bullets, numbering, highlighting or borders.
Background	Inline styles Classes	When you select background patterns in the Borders and Shadings dialog box or when using the Highlight button on the Formatting toolbar
Borders	Inline styles Classes	When you set options in the Borders and Shading dialog box; doesn't apply to the padding options
Padding and margins	Inline styles Classes	When you use the Paragraph dialog box, padding options in the Borders and Shading dialog box or the option on the Advanced tab in the Page Properties dialog box Note: This setting also applies when you set margins or padding while in Design view.
Sizing, positioning, and floating	Inline styles Classes	When you use the Position dialog box, Positioning toolbar or the Layers task pane Note: This setting also applies when you resize items while in Design view.
Bullets and numbering	Inline styles Classes	When you use the List Properties dialog box or the Bullets or Numbering toolbar buttons

Table 2-1: CSS options in the Page Editor Options dialog box.

Setting these options lets you customize the website design process so that you get the most benefit out of your CSS styles. Because you control how individual design and formatting tools in Expression Web affect the creation of CSS styles, you can be sure your website will be styled exactly the way you want it.

Because CSS styles apply site-wide, you need a mechanism for easily detecting when something's gone wrong. The next section shows you how to generate CSS reports to check for errors and other CSS details.

Generating CSS reports Page 4 of 4

CSS reporting is a powerful tool that lets you run reports to see how effectively your styles are used by your website and to quickly uncover any CSS errors. Use reports to make sure that unneeded styles in your style sheets don't slow down your website.

To generate CSS reports for any of the pages in your website, do the following:

Open the pages you want to include in the report or highlight them in the folder list. You can skip this step if you want to check all pages, only open pages or only the current page in your website.
Select Tools > CSS Reports. The CSS Reports dialog box appears. This dialog box has two tabs, Usage and Errors, for defining your report criteria.
Use the Errors tab, shown in Figure 2-10, to generate a report of unused styles, undefined classes and mismatched cases.

Figure 2-10: CSS Reports dialog box, Errors tab.

Use the Usage tab, shown in Figure 2-11, to generate a report of class selectors, ID selectors or element selectors.

Figure 2-11: CSS Reports dialog box, Usage tab.

Specify what you want to check for on the appropriate tab and click Check. The report results are shown in the CSS Reports task pane below the Editing window, as shown in Figure 2-12.

Figure 2-12: A CSS report.

If any errors are detected, Expression Web lists them in an Error Summary column and identifies the web pages and line number(s) to which the errors apply. Just go to the listed pages, correct any errors and re-issue the CSS report to ensure all errors are corrected.

Moving on

In this lesson, you learned how Expression Web lets you use visual design tools for creating CSS styles. In Lesson 3, you'll find out about website accessibility issues and how to help your visitors avoid web browser incompatibility issues.