Online Book Reader

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [338]

Creating page styles

With an XHTML framework in place, you can start working on the CSS. The best way to incorporate CSS is by following these steps:

1. Begin with the page template diagram.

It should have all the information you need.

2. Load your XHTML prototype into Firefox.

Nothing beats Firefox with the Web Developer CSS editor for CSS design because it lets you see your changes in real time. Honestly, you can use any browser you wish, but if you use another browser, you’ll need to create the CSS file in a text editor and check it frequently in the browser. (Check Books II and III to see how Firefox and Web Developer simplify this task.)

3. Implement the CSS from your diagram.

You should be implementing the design you already created, not designing the page. (That already happened in the diagramming process.)

4. Save the design.

If you’re using the Web Developer CSS editor, you can save your CSS directly into a file. If your XHTML template had an external style definition, this is the default save file. If you’re editing CSS in a text editor, save it in the normal way so the browser will be able to read it. (See Book II for information on implementing external style sheets.)

5. Test and tweak.

Things are never quite what they seem with CSS because browsers don’t conform to standards equally. You need to test and tweak on other browsers, and you probably have to write a secondary style for IE exceptions.

6. Repeat for other templates.

Repeat this process for each of the other templates you identified in your site diagram.

The result of this process should be a number of CSS files that you can readily reuse across your site.

Here’s the CSS code for my primary page:

body {

background-color: #000000;

}

#all {

background-color: white;

border: 1px solid black;

width: 800px;

margin-top:2em;

margin-left: auto;

margin-right: auto;

min-height: 600px;

}

#heading {

background-color: #A11204;

color: #FFFFFF;

height: 100px;

font-size: 2em;

padding-left: 1em;

border-bottom: 3px solid black;

margin-top: -1.5em;

}

#menu {

background-color: #A11204;

color: #FFFFFF;

float: left;

width: 100px;

min-height: 500px;

}

#menu li {

list-style-type: none;

margin-left: -2em;

margin-right: .5em;

text-align: center;

}

#menu a {

color: #FFFFFF;

display: block;

border: #A11204 3px outset;

text-decoration: none;

}

#menu a:hover {

border: #A11204 3px inset;

}

.content {

border: 3px double #A11204;

margin: 1em;

margin-left: 110px;

padding-left: 1em;

padding-bottom: 1em;