How to Add a Style

In the lesson on Removing Formatting, you learned that there can be some pitfalls when you add a lot of extra embedded styles to your pages. So this lesson will cover how to modify a style and then move it into your external style sheet so you can reuse it again and again.

In this case, the paragraph shown below is using bold, red text in italics with the Comic Sans font. This will be the look you will want to apply to other paragraphs on a few other pages.

If you change to Split View, you will see the embedded styles in the head of the page similar to what is shown below.

In the Apply Styles task pane, you can see these three styles showing under "Current Page".

You want to modify .style1. To do this, right-click on .style1 in the Apply Styles task pane and choose Modify Style from the menu that appears. The Modify Style dialog box will appear.

 In this dialog box, you can add several "rules" for your new style. You can choose a font-family, the font size, color, and more. You will see the effects you have chosen in the "Preview" box and also the description of what is being added to the style. Once you are done, click OK. (Hint: You can use this method to modify any style that appears in the task pane.)

Now you will want to move this new style into your external CSS file.

In the Manage Styles task pane, highlight the .style and drag it into the panel below that is your external style sheet. Once your style is in your external style sheet, you can rename it to something more appropriate like .boldred.

To remove any extra styles (.style2 and .style3), highlight your text and go to Format > Remove Formatting. Once this formatting is gone, you highlight your paragraph, go to the Styles toolbar, and select .boldred from the drop down list of classes.

The style will be applied to the paragraph and it will look as it should. Your CSS coding will stay easy to manage because the new class is in the external CSS file.

Easy! You'll be cooking with CSS in no time.

Quick Menu Links

Expression Web Basics:

Choose a Topic Downloading Your New Template Unzipping Your Template Files Opening Your New Web Template Tour - What's Inside FrontPage vs. Expression Web Tables vs. CSS Positioning

Expression Web Tutorials:

Choose a Topic Setting Up Expression Web Inside Expression Web Web Site Settings The Formatting Toolbar Editing Dynamic Web Templates Editing Include Pages Changing Page Title and File Names Adding and Deleting Pages Meta Tags Hyperlinks and Bookmarks Preview in Browser Before You Publish - A Checklist Publishing Your Web

Learning More:

Choose a Topic Let Expression Web Teach You Expression Web .Style1, .Style2, etc. Removing Unwanted Formatting How to Add or Modify Styles Keeping XHTML Error Free Information on Validation Ecommerce and Shopping Carts From Web-Bots to Better Navigation Search Engines Build a Better Web Site

Solving Problems:

Choose a Topic Receiving Form Results by Email Form Errors - Troubleshooting Cleaning Up Old Files and Folders Page Display and Image Issues SWF Object Detection Script Design View Quirks

ProStores Tutorials:

Choose a Topic Your ProStores Template Package Adding a New Store Version Restore The Basic Editor Installing New Template Files Store Logo File Uploading Your Design Images Activating Your New Store Version Editing the Header Image Editing ProStores "Pages" Editing/Tweaking Template Files Your ProStores Product Images Images and Security Warnings ProStores - Learning More

About CSS:

Choose a Topic Preface CSS Rules Background Rules Font Rules Text Controls The Box Model Margin, Border,  and Padding Lists About Hyperlinks Styling Forms with CSS About Divs The DocType Resources