Web Design with HTML and CSS

(National Geographic (Little) Kids) #1
Building your page layout

Lesson 8, Advanced CSS Layout 175

3 Locate the #wrap rule in your CSS, and then add the following commenting code
(highlighted in red) to the background-color property:
#wrap {
/background-color:#E0B3B9; /
width:960px;
border:thin solid black;
margin:0 auto;
}


This code disables the style so the browser ignores it. You can remove these comments at
any time to activate the style. Designers often keep either background-colors or borders
in the code to help them identify layout elements in the future. Save the fi le and preview
it in your browser. The purple background for the wrap is now gone.


4 Return to your text editor and repeat step 3, but this time add the commenting code
for the #sidebar and #maincontent background-color properties. Save the fi le and
preview it in your browser. Your page no longer uses color to defi ne the two columns.


Your page with the background-colors for your columns removed.

Now that you have disabled the background colors of the columns, you’ll add other
colors, starting with the page itself. The CSS body selector allows you to do this; you
need to open your external style sheet to modify it.

Free download pdf