Expression Web help

Join our community

Visit our Expression Web Forum

Part 2 Expression Web tutorial

Styling the text of your Expression Web template.

First of all we need a basic understanding or HTML mark-up. What are all those tag things for? Expression Web will create the HTML tags for you. An example is below.

<p> this is the opening tag of any paragraph text. All opening tags, should have a closing tag </p> this is the closing tag of a paragraph. Failing to ensure that these are both opened and closed will result in your page not being valid HTML code. Fortunately, Expression Web comes with  inbuilt HTML validation. As depicted by the HTML incompatibility icon at the bottom of the screen next to the visual aids indicator. expression web designer help Expression Web will constantly check your code to make sure that what you are producing is valid. Keep an eye on the icon as no pop up prompt is offered. The error here was forced by putting an image on the page but NOT offering an alt text. This is a very common error and one that will instantly invalidate your site and what is worse will render the site inaccessible to screen readers who after all rely on the 'alt'  text to describe the image.

So it is important to get it right from the outset.

So lets go back to our Styling tutorial and add some text styles to our web page template.

We start once again at the top of the page with the masthead <div> click on the <div> and the style properties become visible. Currently we only have the background colour specified as below.

#masthead {
background-color: #7d5f50;
}  

We will use the masthead <div> as our banner. In this instance, we will just use text. In a later tutorial we discuss how to use graphics.

Type into your masthead <div> the word Banner Heading. Highlight the text and select H1 from the drop down style box. At this stage, you will see big black text and additional white space on your page! Note that the HTML produced by Expression Web is for the <h1></h1> and both the opening and closing tags are in place. Without a style being specified, the users computer will display the text at default settings. This is what you currently see. No problem as we are about to change that.

Apply Styles Task Pane in Expression Web

We need to create a new style for the banner text and as we have styled the text as Heading 1 (H1) in the #masthead <div> our style name will reflect this.

Click on New Style in the Apply Styles task pane. A pop up box will appear. Do the following.

In the selector box type : #masthead h1.

Click on Define in and select Existing Style sheet.

Click on the url drop down box and select masterstyles.css

We have now told Expression Web that we want our style to be added to our existing style sheet (masterstyles.css) The new style is called #masthead h1 and it controls the banner text in the masthead. So lets add the style.

In the font size box type: 160 and select % from the drop down box.

Click on Font weight and select: Bold

Click on color and select more colors, then select: white (FF,FF,FF)

Click on Box from the category selections and set the margin to be zero (0px)

Finally check the apply new style to document selection

Click on the OK button to return to your page. Instantly you will see that the style has been applied to the banner text in the masthead of your template. It is 160% in size and set to be white in colour. The background colour was set to be brown in our previous tutorial.

Congratulations, you have taken your first step to creating a valid XHTML / CSS based web site in Expression Web that is valid and accessible.

Here is a Flash tutorial explaining each step of the way.

Now we need to style up the rest of the page using CSS and HTML

Part 3

Microsoft MVP

RSS Icon  RSS

Our forum feed can be found here

Add RSS to Yahoo

Add to Google

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now