This is an expansion to Anna Ullrich’s tutorial Center a page (horizontally) by using CSS which can be found on her blog. I’m picking up where she left off, so if you are confused about where we are when we start, I suggest you read her post first.
In this tutorial I’m going to isolate the CSS styling in Anna’s tutorial and move it to a separate style sheet (.css file). Doing this has two benefits: First off you can apply the same style sheet to multiple pages without having to insert all the code in each one. Seccondly, by leaving all the styling in a separate file, you can make global changes to a whole web site by just changing one file. This is a major benefit if you are working with larger sites that have many pages.
Starting point
At the end of Anna’s tutorial we were left with this block of code:
Untitled 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus.
Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor
bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum,
nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien,
egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam
sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas
consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu,
justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero
diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel
purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a,
consectetuer at, eros.
This code creates a page that looks like this:
Let’s quickly dissect the code to help understand exactly what’s going on. The first important part of code is contained in the <head> area:
Everything within the <style type=”text/css”></style> containers will be interpreted by the browser as styles to be applied to the content further down in the document. What this particular piece of code says is that every time the style of the class “style1” is applied to content, that content should have a background colour of hot pink (#CC0066). You can see the class being called further down in the document:
Lorem ipsum dolor sit …
In addition to the very attractive pink background (sorry Anna, but in spite of my company name, pink really isn't my colour) there is more styling applied to the text, but this is contained in a div within the html code itself:
This line of code says that all content between the two <div></div> containers should be 395px wide and have a left and a right margin set to "auto". It's this line of code that centers the content: By telling the browser that both the left and right margins are automatic, the browser will give them equal values depending on how big the window is and put whatever is in between in the center.
But this is a somewhat messy way of doing it, because most of the styling is inside the html code and is not repeatable. What we want to do is make it a style that can be used again and again. You can avoid this problem by employing a different method when you build the site - I'll post a different tutorial for this technique - but for now, we'll just fix the code to make it more funcional:
Sifting out the styles
Since we already have the style settings, all we need to do is move them to the style area in the <head> by cutting and pasting the definitions like this:
To make this more understandable, we can rewrite it like this:
To make this work properly, you also have to make a small change in the html section replacing this:
with this:
Much simpler, right? Well, we can do even better. Notice how the <body> is also defined within the html code? We should move that to the styles section as well:
Finally we remove the styling from the <body> in the html section. Now the html is "clean" and the styles are all contained in a separate area.
Modifying the styles
This is where Expression Web's excellent CSS tools kick in for real. Now that we have separated all the styles, Expression Web lets us play around with them in any way we want without typing a single line of code.
You'll notice that the Manage Styles panel now has two entries: body and .style1. By right-clicking on either one of them and clicking "Modify Style", you open the Modify Styles panel where you can edit the styles in pretty much any way you wish. If we open the panel for .style1, we see all the information contained in the style: The name of the style, what categories are active (in bold), a preview of the style as a whole and even a complete text sting of the entire style. From this panel you can make all possible changes to the style and see the results in real-time both in the preview window, the code window and also in the visual area of the design page. Likewise you can use the "New Style" button in the Manage Styles panel to create new styles through the same window. And once you have styles in your Manage Styles panel, you can apply them to any portion of the content simply by highlighting the area, right-clicking on the style you want and selecting "Apply Style".
Making a separate style sheet or CSS file
Finally, we are going to port the styles to their own file, also called a Style Sheet or a .css file. Microsoft Expression makes this very easy. First off, you need to make a new .css file: File -> New -> CSS. This opens a fresh CSS document. Save it wherever you want and give it a reasonable name. I tend to name the main .html file and it's corresponding .css file the same, so since my main file is called centeredContent.html, I save my .css file as centeredContent.css in the same folder.
Next, click "Attach Style Sheet" in the Manage Styles panel and select the file you just created. This causes two things to happen: First, a line of code is added to the <head> of the html page:
This is a relative link telling the browser that there is a file that relates to the page called "centeredContent.css", that this file is a stylesheet and that it's content is css code.
NOTE: At this point I renamed the style ".style1" to ".box" to reflect exactly what it does. You can do this in the Manage Styles panel, in the code or in the pop-up window. Just remember to change the name in the html code as well so that where it used to say <div class="style1">, it should now say <div class="box">.
Secondly, the Manage Styles panel now shows the attached style sheet file:
But as you can see, centeredContent.css has no styles in it yet. So next we grab the styles and simply pull them down on top of the name of the .css file and voila, the styles are in the external style sheet. If you look at your <head> you'll see that the styles are gone from the <styles> area, so you can delete the whole <styles> section without anything happening. When you open the centeredContent.css file, you'll see that the styles are now resting there. You might think that this will cause problems, but because of the way Expression Web handles CSS code, nothing really changes. You can still manage the CSS code from the Manage Styles panel the same way you did before, from the html file, without ever opening the .css file, and you still have the same control as before. The main difference is that you can now create multiple html files that get their styles from the same .css file and that changing styles in that one file will impact all the other html files.
The end result looks the same (but appearances can be deceiving)
That's it. The page looks exactly the same as before, but the code is much cleaner and we now have the ability to build many pages using the same style sheet.
Final code for centeredContent.html:
Untitled 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur id lectus.
Vivamus vitae neque. Morbi at sapien. Etiam pharetra velit non dolor tempor
bibendum. Nullam nibh. Aenean quis elit. Cras posuere, sem eu tincidunt dictum,
nisl arcu laoreet ipsum, ac aliquet orci augue sed nulla. Nunc libero sapien,
egestas id, aliquam eget, semper id, nunc. Quisque tempor consequat quam. Nullam
sapien libero, viverra non, varius vitae, pharetra nec, nisi. Cras egestas
consectetuer justo. Nullam ante orci, luctus ut, ullamcorper nec, eleifend eu,
justo. Donec eleifend nibh eu nunc. Nunc porta consequat mauris. Cras libero
diam, ullamcorper id, adipiscing non, tincidunt ac, eros. Ut auctor tortor vel
purus. Nullam dapibus. Mauris pede urna, vestibulum eget, pellentesque a,
consectetuer at, eros.
Final code for centeredContent.css:
body {
background-color: #CCCCFF
}
.box {
background-color: #CC0066;
width: 395px;
margin-left: auto;
margin-right: auto;
}
By Morten Rand-Hendriksen
5 replies on “Center a Page Horizontally Using CSS – An Expansion”
I am in the process of centering a div element in a page. The style I am using is .box{margin:0px auto}. The content is centered pefectly in Firefox 2.0, however it is shifted to the right in IE 7.0. Any ideas?
I left a comment earlier. I actually had to wrap my outermost div in another div and then apply a margin:0px auto to it. I did this to get the div centered in IE.
Hi Alvin. I’m sorry I haven’t responded to your question. I’m completely swamped in a book project and I have no time to spare for anything. But it looks like you found a solution. I’ll try to see if I can find some time this weekend to look into it.
morten
Thank you. I liked your site. You can also have a look at mine
Thank you.
Paul, 14 years ,,,
Excellent beat ! I would like to apprentice whilst you amend your site, how could i subscribe for a weblog website? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast offered vivid clear concept