Expression Web 4/Formatting using Styles

As I mentioned earlier, the modern web designer uses styles to format their pages. So rather than using a bold tag &lt;b> to bold some text or the &lt;font> tag to change the colour of a heading or paragraph, we create a style which we can apply to a tag on the page.

This activity adds an Expression Web template style sheet to your web site and shows you how you can make some changes to the styles.

Navigation map for Pets Web site with Style Sheet
In this activity you will add an external Style Sheet page to your site and link to the web site's pages. This is shown in the Navigation map following.




 * In Expression Web Click on the drop arrow next to the New Document button, (see the diagram following)
 * Choose
 * Choose and select . (I am using Neon as it really shows the CSS when applied to your pages. You can choose another if you like.
 * Click, this will create a new blank page in the center panel called Untitled_1.css
 * Save this page as neon.css



In the center panel of Expression Web you will have a page resembling the following:

neon.css

Understanding a little of the Cascading Style Sheet
A more extensive discussion is done elsewhere in this wiki ( see Cascading Style Sheets), so for now I'll give a short introduction.


 * A style sheet as shown above contains a list of styles made up of 2 parts: the tag (e.g. h1), then within brackets what you want the style to look like.
 * Within the brackets you can specify different attributes with their format, for example, in neon.css the body tag (which means the whole page) has the background-color set to rgb(0,0,0); (which is black).

You can specify lots of things for each tag (and even create your own tags) such as colour, borders, position, etc..

The real power of the style sheet is that you can create a style for a tag (like the &lt;p> (paragraph) and if you link the css to your page all the &lt;p> tags will inherit the style sheets formatting. So, lets link the style sheet to the pages of our web site.


 * In Expression Web open cats.html page (or select it if it is already open)
 * In the right hand panel you will see the tab "Apply" and the option.
 * Click on this, and using the Button locate neon.css. and double click.
 * Notice that the link radio button is selected.
 * If you choose you will add the CSS to this page.

All going well the page should have been transformed and now have a black background with the headings and paragraphs all with different colours.


 * Attach the neon.css sheet to the other pages.


 * you could be sneaky-er and choose the radio button and the style sheet will be attached to all pages in the web site.


 * Finally, test all is well by previewing your web site in a Web Browser. (Don't forget to start the preview from index.html)

How a css is attached to a web page
Just so we don't lose sight of what is happening from an HTML perspective, we should see how the css is linked to a web page. For one of the pages, click on the view for the page.

If you look at the top of the code you will see the following

.. and amazingly this is all that is required to link your page to a CSS (Simple aye!).

Try to do the following:

Add a third layer to the web site

 * Add a third layer to the web site by
 * Adding two pages FishTrop.html amd FishCold.html,
 * Linking to them from the fish.html page
 * Adding a different style sheet to these two pages.

Change one of the styles
If you are more ambitious lets show you how to change the colour of the heading 2 (h2) style.
 * With neon.css selected
 * Change the tab in the right hand panel from to
 * From the list of styles shown, scroll down to h2, then right click and choose
 * The Font category should be shown. Click on the coloured box next to the colour attribute, and from the More Colors colour picker choose a different colour (remember neon has a black background so choose something light). Then
 * If you look at the Description box, Expression Web displays the current settings for the tag shown in the Selector (at the top of the dialog box) - in this case h2.
 * Finally choose.
 * Now test the site to see that all of the heading 2 tags now display in the new colour.