CSS TUTORIAL 6 – MARGINS, BACKGROUNDS AND BORDERS
In this example, you will explore elements of the CSSboxmodel, adjust the spacing around objects on a page, add colourful borders to items on a page and control the size and flow of page elements.
Controlling Page Margins
You will be working on a web page from CosmoFarmer.com. You will start by controlling the margin around the edges of the web page.
Using your HTML editor, open the file sidebar.html.
In this case, there is already an external style sheet attached to the page that adds some basic text formatting.
Start by adding an internal style sheet to this file.
Click directly after the closing </link> tag (used to attach the external style sheet), pressEnter (Return), and then type:
<style type="text/css">
You have just created the opening style tag. Next, you will create a style that sets the margin around the edges of the page and adds a colour to the background.
Press the Enter (Return) key, and then type the following style:
body {
margin-top: 15px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
padding: 0;
background-color: #f8faf1;
}
This style makes the page's background a lightgray-green. The margin settings indent the page content 15pixels from the top of the window but remove all space from the left and right edges. In other words, content butts right up against the left and right edges of the browser window. You could have done the same thing with the margin shorthand property like this: margin: 15px 0 0 0;.
Note: The padding property (padding: 0;) in this style accommodates the Opera browser, which uses padding instead of margin to define the space around the edges of the browser window.
Finally you will add the closing <style> tag to complete the style sheet.
PressEnter (Return) to create a new, blank line, and then type </style>.
Save the file and preview the page in a web browser.
The top line of text is placed a little way down from the top of the browser window, while the left edge of each headline and paragraph touches the left side of the browser window. The type looks cramped on the left side like that, but you will fix this later.
Next, adjust the spacing around the headlines and paragraphs.
Adjusting the Space around Tags
Web browsers automatically insert a bit of space above and below headlines, paragraphs, lists, forms and other block-level HTML elements. The exact amount varies from browser to browser, so you get more predictable results by setting this value yourself, as described in the following steps.
Return to your HTML editor and the sidebar.html file. Click at the end of the closing brace of the body tag selector, press Enter (Return) to create a new line, and then add these two styles:
h1 {
margin: 0;
}
h2 {
margin-top: 10px;
margin-bottom: 0;
}
The first style removes all margins from all <h1> tags, and the second removes the bottom margin from all <h2> tags and sets their top margins to 10pixels. If you preview the page now, you will see that it actually doesnot look any different. But you can detect a gap above the <h1> tag at the top of the page, as well as space above and below each <h2> tag. That is because there are still margins above and below the paragraph tags and the <h3> tag ("Ideasfor Better Indoor Agriculture").
Note: The gap between the <h2> and <p> tags didnot change at all because the bottom margin of the <h2> tag and the top margin of the <p> tag were already collapsed. (You should investigate the problems ofcollapsingmargins).
Next, remove the space between the tops of the paragraphs and the bottoms of the <h2> tag.
Click at the end of the closing brace of the h2 tag selector, press Enter (Return) to create a new line, and then add this style:
p {
margin-top: 0;
margin-bottom: 10px;
}
Save the file and preview the page in a web browser.
The gap between the headline and the paragraphs below has gone away, but there is still a 10-pixel space between each paragraph thanks to the margin-bottom setting.
Emphasizing Text with Backgrounds and Borders
Backgrounds can colour a page or highlight a sidebar, but you can use them for plenty of other purposeslike making headlines stand out. Borders, too, are more versatile than they get credit for. They aregood for framing images, adding lines around tables and drawing boxes on a web page, but a single border can draw attention to headlines, separate paragraphs of text and replace the gray, clunky-looking HTML<hr> tag. You will use backgrounds and borders to emphasize the page headings.
Return to your HTML editor and the sidebar.html file.
Add two properties to the h1 style, so that it looks like this:
h1 {
margin: 0;
border-top: solid 2px #fbef99;
border-bottom: solid 2px #fbef99;
}
These two properties add a yellow line above and below the headline. If you preview the page now, you will see the two lines are too close to the text.
There could also stand to be a little more breathing room between the left edge of the page and the text in the headline. You will make those two adjustments next.
Add some padding to the h1 style:
h1 {
margin: 0;
border-top: solid 2px #fbef99;
border-bottom: solid 2px #fbef99;
padding: 5px 0 5px 25px;
}
Padding indents the text of the headline from its borders. This shorthand method of specifying the padding properties indents the text 5 pixels from the top line, 0 from the right edge, and 5 pixels from the bottom line while indenting the left edge 25pixels.
If you preview the page, you will see that the two lines extend the full length of the browser window, touching both the left and right edges, while the headline text is nicely indented. Now you can see the reason for setting the left and right margins of the body to 0. It allows the heading's border lines to extend across the browser window without gaps on the left or right side.
In a moment, you will also indent the h2 and p tags, but first add a bit more impact to that opening headline by adding a background colour.
Add two more properties to the h1 style - a background colour and a text colour:
h1 {
margin: 0;
border-top: 2px solid #FBEF99;
border-bottom: 2px solid #FBEF99;
padding: 5px 0 5px 25px;
background-color: #294e56;
color: #fff;
}
With this adjustment, the white headline text jumps out from a dark stripe across the page. Next, add a bottom underline to each <h2> tag.
Edit the h2 style by adding a margin and bottom border, as follows:
h2 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 25px;
border-bottom: 1px solid #5f9794;
}
The left margin indents the headline, moving it away from the left edge of the browser window and aligning it with the text in the <h1> tag. You need to make the same change to the paragraph tags, in order to line them up as well.
Add a 25px left margin to the p style:
p {
margin-top: 0;
margin-bottom: 10px;
margin-left: 25px;
}
This step indents the paragraphs to match the indent of the other headlines. You can also rewrite these three margin settings using the margin shortcut property: margin: 0 0 10px 25px;.
Save the file and preview the page in a web browser.
The bulleted list of items doesnot look very good yet. This sidebar element needs to look like a real sidebarplaced in its own box and moved to the side of the page. You will do that in the next section.
Building a Sidebar
Sidebars are common elements in most types of print publications like magazines, books and newspapers. They compartmentalise and highlight small chunks of information - like a resource list, contact information or a related anecdote. But to be effective, sidebars shouldnot interrupt the flow of the main story. They should, like the name says, sit unobtrusively off to one side - which you can easily make happen with CSS.
Return to your HTML editor and the sidebar.html file.
First, you must isolate the region of the page that makes up the sidebar. The <div> tag is the perfect tool. You can enclose any amount of HTML into its own self-contained section by wrapping it in a <div> tag.
Click before the opening <h3> tag (the one with the "Ideas for Better IndoorAgriculture" headline). Then type <div class="sidebar">, and press Enter (Return).
This CSS marks the beginning of the sidebar and applies a class to it. You will create the .sidebar class style in the next step, but first you need to indicate the end of the sidebar by closing the <div>.
Click after the closing </ul> tag. Press Enter (Return), and then type </div>.
You have just wrapped a headline and bulleted list inside a <div> tag. Next, you will create a style for it.
In the page's style sheet, add the following style below the <p> style you created earlier:
.sidebar {
width: 200px;
float: right;
margin: 10px;
}
This style sets the width of the content area (where the text appears) to 200pixels, floats it to the right side of the browser window, and adds 10pixels of space around the box.
If you preview the page in a browser, you will see that the basic shape and placement of the sidebar is set, but there is one problem. The <h2> tags appear underneath the box. Even though the floated sidebar moves the text of the headlines out of the way, floats donot displace border or backgrounds. These just appear under the floated sidebar. You can easily adjust for this by editing the <h2> tag style that you created earlier.
Locate the h2 style and add the overflow property:
h2 {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 25px;
border-bottom: 1px solid #5F9794;
overflow: hidden;
}
Setting the overflow property to hidden hides the borders that pass beyond the headline text and under the floating element. Unfortunately, this does not work with Internet Explorer 6 and 5. You will fix that later.
In the meantime, make the sidebar stand out by adding a border and background colour.
Add the following two properties to the .sidebar style:
border: solid 1px #fdd041;
border-top-width: 5px;
The first property, border, is a shorthand method of setting the style, width and colour of all four borders. In this, case, it creates a 1-pixel, solid yellow line around the sidebar. The second property, border-top-width, overrides the 1-pixel width set by the border property - creating a thicker top border for some visual interest.
Finally, you will add a little padding to indent the text from the inside edges of the box, as well as a background colour.
Add two more properties to the sidebar style, like so:
.sidebar {
width: 200px;
float: right;
margin: 10px;
border: solid 1px #fdd041;
border-top-width: 5px;
padding: 10px;
background-color: #fbef99;
}
The background-colour property adds a light yellow colour to the sidebar. To finish the sidebar, you will create a few descendent selectors to control the formatting for the tags inside the sidebar.
First, you will address the <h3> tag, which in some browsers (ie.Firefox) has unnecessary space above it.
Add this style to your style sheet:
.sidebar h3 {
margin: 0;
text-align: center;
}
This descendent selector style affects only <h3> tags that appear inside a tag that has the .sidebar class applied to it. It centres the text and eliminates any margins around the headline. Because web browsers indent lists, you will notice that the bulleted list in the narrow sidebar looks strange with such a large left indent.
Add one more style to the style sheet:
.sidebar ul {
padding: 0;
margin: 10px 0 0 0;
}
Because some browsers use the left padding property and others use the left margin property to indent lists, you need to make sure both are set to 0 in order to reliably eliminate a left margin from lists. In this case, we have added 10 pixels of top margin space above the list to separate it a bit from the headline above.
If you preview the page now, you will notice one big error. The bullets appear either outside of the sidebar box, or not at all (in the case of Internet Explorer). Simply adding a little indent to the list items brings the bullets back into view.
Add the following style to indent each bulleted item:
.sidebar li {
margin-left: 1.5em;
}
This style adds enough space to the left of each list item - moving the bullets back into view.
Save the file and preview the web page in a browser.
Unfortunately, the page doesnot look like this in InternetExplorer6 or 5. A couple of bugs in those browser versions affect the page's appearance for the worse.
Fixing the Browser Bugs
While the sidebar.html file looks fine in Internet Explorer 7, earlier versions donot display the page correctly. If you have access to either of these browsers, check it out. You will see the problems.
The following screen shots show how sidebar.html would be rendered byInternetExplorer 6and 5.5. The free online tool available at was used for this test.
InternetExplorer 6
InternetExplorer 5.5
For one thing, the border under the two <h2> headlines travels underneath the sidebar. Earlier, you used the overflow property to fix this problem in most browsers, but you need something else for IE 5 and 6. In addition, the margin around the sidebar is noticeably larger on the right. Also, in IE 5 the sidebar is much smaller than in other browsers.
Tip: If you donot have access to check for yourself, just trust that problems are there and use this section to learn how to fix them for the sake of your visitors who are still using with IE 5 or 6.
The first bug, the overextended borders, affects both IE 5 and 6. You will tackle this one first:
Return to your HTML editor and the sidebar.html file.
You first need to create a style that only InternetExplorer 6 and earlier can read.
Add this new style to the end of the sidebar.html page's style sheet:
* html h2 {
}
The * html part of the style is in fact an incorrect CSS selector. However, IE 6 and earlier consider it legitimate - so by adding h2to create a descendent selectorInternet Explorer 6 and earlier treats this as a valid style for formatting any <h2> tag.
So far, you have just got an empty style.
Add the following property to the new style:
* html h2 {
zoom: 1;
}
Zoom isnot an official CSS property. It is a Microsoft-only property meant to enlarge an element on a page. That is not why you are using it here. In this case, the zoom property prevents the border from extending under the float in IE 5 and 6. It fixes the border bug - albeit in a completely 'arcane' way.
Next problem: The double-margin bug that is causing that extra space on the right side of the sidebar. Since this bug affects both IE 5 and 6, you will create another *html style for the sidebar. Remember, * html hides the rest of this selector.sidebarfrom all browsers except IE 6and earlier.
Add this style to your style sheet:
* html .sidebar {
display: inline;
}
This use of the display property is another nonsensical bit of CSS. But it does the job: It tricks IE into removing the extra right-hand margin.
In addition,Internet Explorer 5 incorrectly calculates the width of the sidebar, so it looks thinner than in other browsers. Blame it on the old IE 5box model bug.
To fatten up the thin sidebar, add this property to the * html.sidebar style:
width: 222px;
Why 222pixels? The .sidebar style you created earlier has a width of 200pixels. All other browsers dedicate 200pixels to the content only of the headline and bulleted list. IE 5, on the other hand, includes the widths of the borders and padding as part of this 200pixels - making the actual area dedicated to the content much smaller in that browser. For IE 5 to provide the same room as other browsers for the headline and bulleted list, you need to give a width value equal to the combined width of the content, borders and padding. Therefore, 200pixels (the width value for the content) plus 2 pixels (the width of the left and right borders), plus 20pixels (the widths of the left and right padding) equals 222pixels.
At this point, you have successfully tricked IE 5 to display the sidebar at the same width as all other browsers. Because IE 6 also gets this width sent to it, you must tell IE 6 to reset the width property back to 200 pixels.