Expression Web:CSS

Objectives
In this tutorial I will go through the basics of how expression web works with CSS.



Start by creating a web page containing
one.htm 

and choose the split tab (bottom of screen) to show both the code and the WYSIWYG (What you see is what you get) view.

Internal or embedded style sheet (current page)
In the Manage Styles Pane (on the right), select the Manage Styles Tab
 * If it is not showing you may need to turn it on (Task Panes>Manage Styles)


 * 1) Click New Style
 * 2) In the Selector drop box choose h1, leave define in as Current page
 * 3) Change color to red
 * 4) Click [Apply] - You should see heading 1 change to a red colour.
 * 5) Click [Ok] to return to the document
 * 6) Check the code and you should see the following internal style has been added into the head area, and in the Manage styles pane h1 will appear in the current page area.

You can modify the style by right clicking on the h1 in the current page area and choosing modify style

External style sheet
Next to the new page button (on the toolbar top left) is a small drop arrow, click on it and choose CSS, and untitled_1.css tab will be shown. Save the page to the disk (It is just a text file that you could edit in notepad with nothing in it - yet!), lets call it one.css

So we should now have one.htm and one.css open in Expression Web

In one.css

 Now select one.htm, notice that Heading 2 is still black - thats because we have not told one.htm to link to one.css. So lets do that...
 * 1) Click on New Style in the Manage styles pane
 * 2) In the selector drop box choose h2 (leave the define in as current page)
 * 3) Change color to blue, then click [Ok], the following code will appear in one.css
 * 1) In the Manage styles pane click attach Style Sheet ...
 * 2) We want one.css to appear in the URL box so probably best to use the browse button to find it (avoids you misspelling it!)
 * 3) Check that Attach as: has Link selected, and Attach to: is the current page
 * 4) Click [Ok]

In one.htm heading 2 should change to blue,and in the head part of html code will be added  Notice that in the Manage styles pane are two css style areas: Current page and one.css. Expression web is pretty clever and you can drag a style from one area to another, or you can modify a style by right clicking and choosing Modify style.

Inline style
In one.htm


 * 1) Click on the line paragraph one
 * 2) Click on New style in the Manage styles area
 * 3) In the Selector area choose (inline style) - should be the first one in the list
 * 4) Change the color to lime green
 * 5) Click [Ok]

In one.htm the paragraph one line will change to lime green and in the html code you will see the inline style added to the p tag as 

That's all for the basics, obviously there is heaps more you can do but this should get you started!