Managing Your Style Sheet

Buy Microsoft Expression Web Professional Design Tool | Get Microsoft Expression Web Upgrade | Microsoft Expression Web Upgrade from FrontPage [Any Version]

Managing Your Style Sheet

Thursday, March 06, 2008

Managing Your Syle Sheet with Expression Web

Once you created your style sheet, whether or not you relied on Expression Web, you will need to manage the style sheet. Managing your style sheet with Expression Web can be pretty easy once you get the hang of it.

By now, you probably already have your Manage Styles Task Pane. If not, go to Task Pane - Manage Styles. Now you should see this Task Pane probably in the lower right hand corner of Expression Web.

Once this is done, you will see the elements in your style sheet. The style sheet can be is now ready to be updated from the Manage Styles Task Pane.

Add a Property to an HTML Element

Reviewing your Manage Styles Task Pane, locate the HTML element that you would like to possibly change. Right Click on that element and choose Modify Style. The Modify Style dialog box will appear and here you can change the font style or color, change the background, or add a border if application.

Expression Web will help create the proper syntax for you in the style sheet without you knowing anythig about styles.

Moving Styles

You can also (left) click on the HTML element in the Manage Styles Task Pane and move the style from the top to the bottom or to the middle.

Add a New Style to an HTML Element

You can add a new style to the HTML element if needed. Right click on one of the HTML elements, and choose New Style.

In the New Style dialog box, the first option you should see is Selector. Here you should be able to see all the HTML elements that are found in an HTML page. You can choose an HTML element, let's say h1 (to define all your <h1> elements.

Now in the option below you should see define in. Here your options are Existing Style Sheet, Current Page, or New Style Sheet. You should always keep your styles in one page (unless of course there is a reason to have them in other pages). In this example (since we came in from an HTML page), we will choose Existing Style Sheet. If we had a CSS page open, we would choose Current Page.

To the right, you should see URL. In the text box, you should see the name of your style sheet.

Now look at the Category. You will see a few things like Font, Block, Background, Border, Position, Layout, List, Table. In here, you can set the Font Family of your <h1> element if you do not want it to be the same as your other text. You can also set the font size, and color.

Make sure to keep an eye on the bottom of the New Style dialog box. You will see a Preview and and Description. The Preview will show you how the text, background, border (if applicable), etc will look. The Description will show you what is going to be added to your style sheet. By taking a look at the Description, this might help you learn CSS some.

And as usual, take a look at the video tutorial in managing your style sheet with Expression Web.