Styling sites and CSS

In Expression Web, you can select a specific item by highlighting it, and then apply formatting to it by clicking on one of the toolbars, or by clicking on “style” in tag properties pane on the left. When you apply a style, Expression Web will mark that item with a specific class, and then use CSS in the top of the page’s code to apply the look you selected. This area of CSS is known as an Internal Style Sheet.

If you want to edit the style of multiple items, such as every “h2″ element, you can click on “New Style” in the Apply Styles pane on the right. This will diplay a dialog box with many different options. You first need to select what item the style will be applied to by choosing the “selector”. In this case, you would choose “h2″, though you could choose from any of them, or make your own to apply it more specifically. You can leave the “Define In” as “Current page” for now so the styles will be defined in the Internal style sheet. You can then try out the different options to see all the different ways you can edit something with CSS.

If you want to make things more efficient and apply consistent styles across all the pages of your website, you won’t want to keep all the CSS on the page itself, but on an External style sheet. You can use one of Expression Web’s default style sheets by clicking on File>New>Page>Style Sheet and selecting one of the CSS pages. You can then attach it to your HTML page by clicking on “Attach style sheet” on the right side. This can be done on any page that you want to have that look, and will automatically apply all the relevant styles to the page. Now, when you add new styles through the “New Style” box, you can select “Define In”>”External style sheet” to have Expression Web put the changes in your general CSS page.