Expression Web-help - Styling the body of an expression web template

Part 5

Styling the main content area of your Expression Web template.

The previous tutorial, explained how to style the vertical links using CSS.

Styling the #page-content <div> is very simple.

The first thing we need to do is type in some text, and use some headings and lists, Here is the sample text html that i used. Just copy the the text from the page and paste it into your #page_content <div>

Default Styling

When creating a web site template using CSS, we need to understand that everything we put on the page is in a box and each box has a natural boundary. The boxes and boundaries of these imaginary boxes are completely controllable by you. To make web sites that display the same in all browsers means that you have to tell the browser what to do with the box, boundary and the contents of the box (your text or graphics) That's how CSS works.

The sample text html shows this well. The gaps between the text headings and lists are all separated by the natural boundary. By controlling these boundaries, we can make our page look exactly as we want it to look.

If you have copied and pasted the sample text html into your template page, it should look like this.

Notice how the text is very bland, (times new roman) black, touching the sides and see how those headings and lists look! Its not pretty is it?

We will do some basic styling, just enough to get the page looking a little better than it does now!

If you have copied and pasted the sample text, your page should look like the example above.

Click anywhere inside the #page_content <div> and the style is highlighted in the Manage styles task pane.

Right click on the #page_content style and select modify style from the pop up list

From the category list select box

In the padding box type 5 and select px

I never liked the grey background so click on Background in the Category list

Clicking on the existing background color, will highlight the text

Type in the following

#E1B9B9

Click OK

In the manage styles task pane click New Style

Make sure Define in is set to Existing style sheet and that the URL points to masterstyles.css

From the selector dropdown list, select h2

From the Category list select Box

Set the margin to 0px (zero) and make sure the same for all box is checked

Click OK

That sorts out the display issues in Firefox whilst adding a little colour to the template.

We will now style the rest of the page.

In the Manage Styles task pane click on New style

Click on the Selector dropdown list and select

body

Click on the font-family dropdown and select

Arial, Helvetical, Sans-serif

The <body> tag controls all the text on the page.

Its the easy way to style a page.

Later we will over ride this style using the #left_col <div>
We will change the font only for <p> (paragraphs) in the #left_col <div> all other text will remain as the default.

Click on ok

Notice how all the text has taken on the font we specified in the <body> tag

You might have noticed that we have a space issue between the h2 and first <p> paragraph?

Remember what i said about box's and boundary's - this is a typical example.

Click on new style in the Manage styles task pane

In the selector box, type in the following

#page_content p

In the category list, select Box

De select the same for all tick box

Set the margin top to 0px (zero)

Select Font from the category list

Set the font size to 80%

Click OK

See how the text has moved closer to the heading

The white space to the left of the main text, is a little stark so we will colour it to look like the rest of the site.

In the manage styles task pane, find the #container <div>

Right click it and select modify style

Select background from the Category list and type in the following background color

#E1B9B9

Click OK Your page should look a little more like a web page now

Now we will make the left_col <div> paragraphs look different to the other text on the page.

You will recall that we set all fonts via the <body> tag to be Arial, Helvetica, Sans-serif.

This is how we override the <body> tag font setting.

Select new style from the manage styles task pane.
You probably dont have text in the #left_col <div>
Just click at the end of the text on the last navigation button and then push enter twice. This should start a new paragraph that will take on the styles we apply.(if you only click enter the once, you are effectively continuing the unordered list that we used for the navigation buttons. Clicking enter twice will take you out of the list and create a paragraph ready for your text.)

Delete the default text and replace it with the following

#left_col p

Change the font size to 90%

Set the font weight to be bold

Then set the font to

Courier New, Courier, Monospace using the font family dropdown list

Click OK

There is perhaps on more thing to do.
The left side navigation buttons are a little bright and stand out a lot so we will blend them in

In the manage styles task pane find the left_col a style
right click on it and choose modify style

From the category list, select background

Remove the existing code and replace it with

#E1B9B9

Click OK

Your page should look like the image below in Expression Web .