Join our community
- Expression Web Forum
- Expression web resources
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
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>
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.
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
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
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
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
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%
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
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
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
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
right click on it and choose modify style
From the category list, select background
Remove the existing code and replace it with
Your page should look like the image below in Expression Web .
This is the page in Firefox
And this is the Expression Web template displayed in Internet Explorer.