Web Design with HTML and CSS

176

Building your page layout

Web Design with HTML and CSS Digital Classroom

5 In your text editor, choose File > Open. Navigate to your web08lessons folder, select the

base.css fi le, and then click Open.

Remember that your page is currently using three sources for the styles: the internal

styles, which you have already modifi ed; an external style sheet named reset.css, which

applies margins and a padding of 0 to most of your HTML elements; and the base.css

style sheet, which contains common styles, such as font family and font size.

Style sheet management

Learning to manage multiple style sheets is increasingly important in modern web design.

Placing all your styles in a single style sheet can cause confusion and ineffi ciency, especially as the

number of rules increases. Modern websites often use multiple external style sheets: one for the

reset, one for layout, one for text, one for older browsers, one for mobile devices, and so on.

It is important to know when to use internal and external style sheets. On most completed

websites, internal styles are used to style a unique page; the majority of the styles are in the

external style sheets. However, during development, it is more convenient to experiment and

refi ne the layout using internal styles; all the designer needs to do is scroll up the page and add

or modify a rule. The point at which internal styles are moved over to an external style sheet is a

matter of preference. However, designers often do this when the design is approved and they are

beginning to build new pages.

6 In your base.css fi le, locate the body rule and add the following property

(highlighted in red):

body {

font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;

font-size:100%;

background-color:#B3BBCA;

}

This adds a light-blue background color to the page. Save the fi le and preview it in

your browser. You can see that with no background colors applied, your columns are

transparent and the body background is visible. You’ll fi x that by applying a white

background to the wrap div.