pageSUMMARY

Create the first two CSS styles - the Body and HTML styles. Set up a text sizing protocol.

Style Page Margins and Background in CSS

Setting up the Body and HTML styles

To match the background color from Photoshop, with your layered Photoshop visual open, click on the Set Foreground Color square at the bottom of the tools palette and click on the gray background colour. Retrieve the web color reference number from the bottom of the Color Picker (in my case, #666666). Make a note of this.

designDOWNLOAD

Crib sheet
Download an actual-size version of my crib sheet here.

Now would also be a good time to make a note of all the other relevant color reference numbers, such as the Header text, Paragraph text and so on. It’d also be useful to make a note of all typeface point sizes. I find is helpful to print out the Photoshop document and mark up (by hand) all the color references, point sizes and margin widths. Just keep this crib sheet in front of you to save a lot of time (figure 1).

Figure 1 - Style guide crib sheet

Find the CSS Styles pane

Once you have your crib sheet in front of you, open the CSS Styles palette:

WINDOW/CSS STYLES

You should see the name of the style sheet at the top (figure 2).

Empty CSS Palette

Figure 2 - Empty CSS Palette

Create a BODY and HTML style (‘selector’)

designTIP

Sizing text for usability
This method for setting up type sizes in a style sheet can be found on pages 81 & 82 of The Essential Guide to CSS and HTML Web Design (Essentials)

Before diving into the construction of the site framework, I want to set up a very handy little style which’ll make text sizing a breeze later on. This is a tip I picked up from Craig Grannell’s Essential Guide to CSS and HTML Web Design. There are various way to size text on a web page - you can assign anything from pixels to point sizes, and all have different effects.

I have two objectives for the text on my website:

For design
I want to be confident that the text will appear at the intended size, and the relationships between headings and paragraph text are correct.
For usability
I want the user to be able to resize the text to suit their requirements

The problem with sizing in pixels or points is that the text will appear at the exact size required, but (with Internet Explorer) users are unable to increase or decrease the size of text presented in this way to suit their vision. I’d like to tick both design and usability boxes. I found a good compromise on page 81 of Grannell’s book.

In essence, if the BODY and HTML ‘selectors’ in the CSS file have the font-size attribute set to 62.5% and 100% respectively, it becomes possible to set typeface sizes which fairly accurately correspond to point sizes used in graphic design by using ‘ems’ instead of points or pixels. For example, if you’d like a font to be set to a 12 point/pixel size, you’d set it as 1.2 ems in the CSS. 10 point becomes 1 em, and so on.

I’ll let the book worry about explaining the whys and wherefores (it’s worth getting hold of), and simply tell you how to set the selectors up.

Create an HTML style

You can either open the CSS Styles window to add these, or simply paste in the following code directly into your CSS document:

html {
font-size: 100%;
}

body {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #666666;
margin: 0px;
font-size: 62.5%;
color: #000;
}

To add styles via the CSS Styles window, click the New CSS Rule button at the bottom of the palette (this looks like a page with a little + on it). A dilogue box will open.

Under Selector Type:, choose the option ‘Tag
(redefines an HTML element)’ from the popup menu.

Under Selector Name: choose ‘html’ from the menu. Click OK.

A new window will open entitled ‘CSS Rule definition for html’. The only element we are changing here is the Font-size which can be found under the Type Category (which is already selected in the left column).

Under Font-size enter 100 and choose % from the little increments menu to the right of the value field.

Click OK.

Once you’ve done this, take a look at the CSS document and you’ll see that the CSS code has been automatically written into the document.

Create a BODY style

Now repeat the process for the ‘body’ selector (make sure you select ‘body’ from the Selector Name menu this time). This time, once you reach the ‘CSS Rule definition for body’ window:

Under the Type Category select ‘Georgia, "Times New Roman", Times, serif’ (or whatever is your preference) from the Font-family menu, enter 62.5% into Font-size and select black (#000) from the Color menu (figure 3).

The Font-family selection will ensure that the default typeface for all text that appears on the site will be Georgia (if available) or Times New Roman (if Georgia is absent) or Times as third choice, or in the absence of all three, any serif typeface installed on the computer. This typeface selection can be overridden by creating class styles or assigning different styles to the content of specific DIV tags.

Now select the Background Category and enter #666666 into the Background-color field. This should be exactly the same color as selected from your original Photoshop document background. If it’s not, the background image won’t blend seamlessly into the background.

Next, select the Box Category. In order to ensure that the background images and website elements butt right up against the edges and top of the browser window, we need to ‘zero’ the margins. Enter 0px into the Top: Margin field and check the ‘Same for all:’ box.

Click OK - we’re done here.

CSS Definitions

Figure 3

Finally, check the CSS document again. You’ll be easily able to associate every action you’ve just taken to a corresponding line of code, which has been automatically written into the style sheet thus:

html {
font-size: 100%;
}

body {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #666666;
margin: 0px;
font-size: 62.5%;
color: #000;
}

This is by far the most effective way to learn how to correctly mark up a CSS document - learn as you create. Now we can move onto the more visible structure of the website itself.