CSS exercises:
Center a page & style some things.

If you have layed out pages using HTML tables or used the old HTML <center> tag or the "align=" attribute, it's time to move on -- and maybe forget those old techniques. When Photoshop creates HTML pages with "save for Web," it still uses them, and they still work in most browsers, but they have been "deprecated." CSS offers new approaches to positioning things, to make HTML the language of "content and structure" with CSS for "visual presentation."

By now you may have used a few "in-line" styles rules or a short style sheet in the head of a document, but the layout possibilities CSS makes possible are almost endless. As a starting point, use it to take control of your visible space on the page.

The contents of any HTML "block-style" tags can be set to your desired widths and centered or floated to either side using CSS. What are "block-style" tags? Most of the ones you have been using: <body>, <div>, <p>, <ul>, <ol>, <li>, <h1>, <h2> -- each draws an invisible box whose contents you can style with CSS. Each block tag automatically starts a new line.

A few HTML tags do not display as "blocks" -- they affect things "in-line," such as adding <strong> or <em> to make words bold or italic. Images, too, display "in-line" unless you style them to display as blocks. For instance, I can add <img src="smiley.jpg"> to put an image like this Small cartoon smile with a mortarboard inside a line. (In-line, get it?) If I want the picture to appear somewhere else on the page, I have to style it to display as a block, style it to float to one side of the text that comes after it, or put it inside a block -- usually a <div> or a <p> paragraph, like this:

Small cartoon smile with a mortarboard

Worth repeating: Most HTML tags create block-style elements. They include body, div, p, h1, ul, li and others. Your page is made up of boxes within the main body box -- the browser window. Often there are boxes in boxes in boxes. (See the Terry Morris textbook pages 108-09, 156-61 and 168-69 for more on "embedded CSS," the CSS "box model" and centering pages, or search other books and Web resources for those keywords.) How wide should your page be? That can vary, depending on the contents. This simple text-like page has a single column of type at a reasonable length. Many newspaper sites use multiple columns and fill more of your browser window. See this line-length discussion.

Why center your pages within the browser window?

One sign of an amateur page is that it hugs the left margin of the screen and may even let its text expand off to the horizon on a big monitor, a long, unreadable line of type.

Being a designer is about controlling the space, even the flexible space of a browser window. The first step I want you to take in doing that with CSS is to define a main container for the content of your page.

The "body" of your page is the full window of a user's browser -- whether on a 10-inch tablet or a 30-inch screen. How much of that do you want your page to fill?

This page is designed to look like a long, scrolling sheet of paper.

You can center all the contents of any box by adding "text-align:center" to its style. Even though the code says text-align, it will center everything inside the box -- text, images or other boxes. But a whole paragaph of centered text, with ragged margins on both sides, is harder to read than left-aligned text.

I centered this ivory-colored box within the body of the page by giving the ivory box a specific width and even (auto) left and right margins. The width I chose is 35 "ems" -- a little bigger than 35 upper-case letter M's, which is where the "em" unit of measurement gets its name:

MMMMM MMMMM MMMMM MMMMM MMMMM MMMMM MMMMM

The gray background is applied to the body (the outer box); the ivory background is appled to the inner box (a div).

To force some older browsers to do the same centering, we combine two techniques: Add "text-align:center" to the outer box (in this case the body), and "auto" margins on the inner box. Using that combination means you have to add "text-align:left" to the inner box to restore normal paragraph alignment.

How-To, step by step.

1. Between the <body> and </body> tags of your HTML, enclose all of the content in a div. Name it with an "id" of your choice. Common names for this kind of main div are "container," "content" or "wrapper." Here's how:

  1. Right after <body> in the HTML, insert this: <div id="wrapper">
  2. Just before the close </body> tag, insert
    </div> <!-- this closes the wrapper div -->
    Because you do not repeat the ID name in a div's close tag, adding a "this closes..." comment to the same line makes your code more readable, especially when you have several divs in a page.

2. In the <head> section of the document, add an internal style sheet:

<style type="text/css">
-- your style rule declarations go here --
</style>

Between those two lines of code, you will type a CSS rule declaration to set the page body to text-align: center; and background:gray; (or whatever color you like). Giving the body and content div different backgrounds will make the outer margins visible. View the source code of this page to see the actual style sheet.

CSS rule declarations look like this -- and the punctuation is important:

body {
text-align: center;
background: gray;
}

3. Since the main content section of the page will be a unique style, you can make it an "ID" rule -- a one-time-only CSS rule indicated by a hashmark # in front of its name in the CSS style sheet and ID= in front of its name in the HTML. (In contrast, a resuseable CSS rule is called a "class." In the style sheet, you precede its name with a period, and in the HTML code, with class=) Since our main div is already identified as an "ID" in the HTML, we'll create its style rule with a hashmark, as #wrapper.

  1. Set the rules for that div to include text-align:left; (Since you've centered everything in the body to create the outer margins in older browser, we need text-align:left to restore normal alignment for the internal box.)
  2. Set a width for the div in pixels, ems or percent (This page uses 35em, as described above.) You must set a width to center something using automatic margins.
  3. Set left and right margins to auto
    (I set the top and bottom margins to zero and left and right to auto in a single line of css: margin: 0 auto;)
  4. Set the background to white or another light color (background: ivory;)
  5. If the div is going to contain text or pictures that would look ugly pushed against the edge of the body background color, add some padding to the div. That is, add a line like padding: 1em 3em; or padding: 5px 20px 5px 20px;
    Like the margin property, the padding property can have from one to four values.
    1. A single number will be applied to all four sides of the block.
    2. If you give two numbers, the first applies to the top and bottom and the second to the sides.
    3. If you give four numbers, they apply to the four sides clockwise from the top. The page you are reading has one em of padding at the top and three at the sides. The best way to get the feel of margins and padding is to experiment.

Result:

#wrapper {
text-align: left;
background: ivory;
width:35em;
margin: 0 auto;
padding: 1em 3em;
}

For more on centering, see w3.org center examples, MaxDesign, W3Schools or SimpleBits | Credits: My little smiley gif is from gifs-paradise

Note: CSS allows you to use shorthand for related properties. See "margin" and "padding" in the example above. A rectangle has four sides and could have four settings for padding or margins. Separate lines in the stylesheet for margin-left:, margin-right:, margin-top: etc., instead of the one-word shorthand entry.
In the examples, "margin: 0 auto;" and "padding: 1em 3em;" the first number is for top and bottom, the second number is for left and right. If you gave four numbers, they would set the margins or padding for each of the four sides of the block, starting with the top and going clockwise.
Similarly, you can combine Font properties into one shorthand "font:" rule instead of separate lines for font-size, font-family, font-weight, etc. More about shortcuts.

DEFAULT STYLES

In addition to letting you create new style rules called IDs and Classes, CSS allows you to restyle the standard HTML tags. If you do not make style rules for those tags, you get their traditional default settings, such as the relative sizes of the H1, H2 and other headline tags and the space beneath each paragraph. To know what you're getting, here's a list of the CSS equivalents of the default attributes of HTML tags. Notice that margin settings, as well as font-size, are part of many tags, including p, h1, h2, etc.

After we get into Dreamweaver CS6, we will talk about some new HTML5 elements, which do not have default attributes, but using them could help with the logical design of a page. Their uses are implied by their names, including these: header, footer, nav, section, article, and aside.

Next: Add images and captions by floating them together.

Also: Styling menus with CSS


Page updated Jan.13, 2013