Anyone who is serious about web development depends heavily
on cascading style sheets (CSS). This Expression Web tutorial will explain in
detail how we can use style sheets in our websites. Microsoft Expression Web
does a great job handling CSS. Style sheets allow you to specify how any object
on a page should be displayed. They allow you to do simple things such as
setting all your heading (h1) tags to a certain size and color. They also allow
you to do more complex things such as positioning a layer in a certain spot on
the page.
Microsoft Expression Web does not limit you in the way you
can use CSS. Any webpage can include styles either in the heading portion of
the HTML, directly in the HTML element, or in an external .css file which the
other html files link to. This last method is the best one for most
circumstances, because it allows you to specify styles in one location and have
them cascade down to every page on your website.
So lets get on to the meat of this Expression Web tutorial.
First create a new site that is empty. Then create a new page in this site and
save it as default.htm. In this page create a heading like "This is the best
site ever". Highlight this text it set its paragraph style to heading 1
<H1>.
Now lets say we want this heading to be Navy Blue and
underlined. We could just go set the text properties to be colored blue and
underlined, but then when we create another page that has a heading on it we
will have to do that all again. So instead lets use CSS in an external file to
do our styling.
In the lower right hand corner of the screen you will see
the Apply Styles pane. If you don't have this pane select it from the Task
Panes menu in the top menu bar of Expression Web. Click the New Style button in
the Apply Styles pane. This will bring up the New Style dialog box. Now we want
to change the style of our Heading1 (H1) tag so select h1 in the selector drop
down. In the Define In drop down select New style sheet. Then select the color
you want your H1 to have (I've chosen a dark blue), also check the underline
text-decoration box. Look at this screen for what all to set:
After you have set all these settings click the OK button. A
message box will appear asking if you want to attach the style sheet you just
created. Click Yes.
Now if you look in the upper part of the screen you will see
a new tab labeled Untitled_1.css*. This is the new style sheet you just
created. Click on that tab and chose File -> Save As from the menu bar. Save
this style sheet as style.css.
Now go back to your default.htm page. You will notice that
your heading is now dark blue and underlined. Now if that's all we used this
style sheet for it would be "the proper" way to apply styles to a webpage, but
it wouldn't be extremely useful, but lets continue on with our tutorial to see
the real power of CSS in Expression Web.
Go to File -> New and add a new HTML page called
second.htm. At the top of second.htm type a title like "This is my second page!".
Highlight your title text and set its paragraph property to Heading 1 (H1) like
we did in the first page. Everything should be very familiar up to this point
as its all stuff we did earlier in the tutorial. Now go to the bottom right
corner of the window again, where the Apply Styles Pane is, and click the
Attach Style Sheet... button. Click the Browser button and select our style.css
we created earlier. Then click OK to exit out of the dialog and look at that
our heading is automatically made dark blue and underlined.
This Expression Web tutorial just gives an introduction in
how we can use external style sheets in our website. To really get the full
benefit of CSS you need to begin learning all that style sheets allow you to
do. I suggest you look for CSS tutorials
on the web to further your study.