• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 1. Using CSS to Position and Sty... > Creating the Structure for the Page

Creating the Structure for the Page

Now that you’ve looked at the XHTML document’s syntax, you’re going to begin to move the <div> tags into place. Remember that a <div> is 100% as wide as its containing element. If a <div> tag is not contained in another <div> tag or element, its parent container is <body> and <html> is the grand-parent. You can use <div>s rather like building blocks or stacked boxes to create your structure.

Open the index.htm document. In the CSS Styles panel, click the New CSS Style icon to open a New CSS Style dialog box. Choose Selector Type: Advanced, Define in: New Style Sheet, and type html, body into the Selector text box. Click the OK button of the New CSS Style dialog. Name the file project1.css, ensure the Relative to field is set to Document and that you are located in the root of your site in the Save Style Sheet File As dialog, and click the Save button.

You’ve now linked your style sheet to your index.htm document.

In the CSS Style definition dialog that now appears, choose the following:

Category: Box

Padding: Check Same for All and enter 0

Margin: Check Same for All and enter 0

Category: Border

Width: Check Same for All and enter 0

Click OK

This is done to force all browsers to begin with zero for the page margins and borders. Browsers have different default settings, and this allows all to start on a level playing field.


Border is declared on the HTML element to get rid of the IE Windows invisible border. You’ll get more consistent results if you zero it out.


If you’d like to see the power of CSS through “instant styling” of your page, click the Attach Style Sheet in the CSS Styles panel and browse to the skater.css file. Click the Preview button, and watch the page jump to life. Obviously, you’ll want to click Cancel before you close.

Click the New CSS Style icon at the bottom of the CSS Styles panel. In the dialog that appears, choose the following, then click OK:

Tag: body

Selector Type: Tag (redefines the look of a specific tag)

Define In: project1.css

In the CSS Style definition dialog, choose the following:

Category: Type

Font: Verdana, Geneva, Arial, Helvetica, sans-serif

Size: 100%

Color: #000

Category: Background

Background Color: #FFF

Background Image: Browse to the skater.gif image in the assets folder. (For simplicity, save your CSS and images relative to the document.)

Repeat: no-repeat

Attachment: fixed

Horizontal Position: 0%

Vertical Position: 0%


The color attributes in step 4 are set using color shorthand. This is a quicker way to write any color that contains hex-pairs (00, 33, 66, 99, CC, FF, and so on). It’s a simple formula, really. Take the first character for each hex-pair and drop the second. For example, #000000 becomes #000, #336699 becomes #369, and #CCFFFF becomes #CFF.

Click the OK button to save the new style definition.

The W3C specs say that Attachment: fixed, on the background image, aligns it to the viewport (not its containing element). You’ll see why this is so important for the effect you’re creating in a little while. Also, you may wonder what the font size set to 100% means. 100% of what? The users’ preferences. The browser will start with whatever they’ve defined in their browser and then scale the sizes from there.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint