Style page elements with CSS

CSS styling enables you to add color, adjust positioning, and aspects to HTML elements. Add CSS to finely tune the appearance of different elements, create a more structured layout, and improve the overall visual design of a page.

Need some help understanding margins and padding? Check out the CSS Box Model to the right. This commonly used model illustrates how various CSS layout properties relate to the HTML elements they style.

Before you start

Download and save the project files. Open style_containers_practice.html in Dreamweaver.

Click on style_containers_practice.css at the top left corner of your workspace, and switch to Split View. 

Locate the header selector. You can change the color of this element by adding a background-color property. When you type the colon after the background color property, a context menu will appear. Select Color from the menu. Move the color selector around the palette to find the color you want, or type in a hex code manually.

For the header, #main, and #sidebar sections, set the background color to #FFFFFF. Set the background color of the footer to #2F4666.

CSS

header {
    background-color:#FFFFFF;
    ...
}
#main {
    background-color:#FFFFFF;
    ...
}
#sidebar {
    background-color:#FFFFFF;
    ...
}
footer {
    background-color:#2F4666;
    ...
} 

To make a section a specific height, add a height property. For the #main and #sidebar selectors, set a height of 250px.

CSS

#main {
    ...
    height:250px;
    ...
}
#sidebar {
    ...
    height:250px;
    ...
} 

Adding a padding property creates space around the content within the border of an element. Set the padding of the #main and #sidebar sections to 25px. This will add 25px of padding around all four sides of the content.

CSS

#main {
    ...
    padding:25px;
    ...
}
#sidebar {
    ...
    padding:25px;
    ...
} 

You can also change the top, right, bottom, and left padding values independently. Add 1px 0px 1px 0px to the padding property for the header section. This means that there will be 1px of padding between the content and the top of the element, 0px to the right, 1px to the bottom, and 0px to the left.

For the footer section, set the padding to 15px 0px 15px 0px.

CSS

header {
    ...
    padding:1px 0px 1px 0px;
    ...
}
footer {
    ...
    padding:15px 0px 15px 0px;
    ...
}

Adding a margin property creates transparent space around the border of an element. Set the margin of the #main section to 10px 50px 20px 0px. This adds a margin of 10px around the top of the element, 50px to the right, 20px to the bottom, and 0px to the left.

For the #sidebar section, set the margin to 10px 0px 20px 50px.

CSS

#main {
    ...
    margin:10px 50px 20px 0px;
    ...
}
#sidebar {
    ...
    margin:10px 0px 20px 50px;
    ...
}

Add margin properties to the remaining elements to complete the layout.

For the header section, set the margin to 10px 50px 20px 50px. For the footer section, set the margin to 0px 50px 0px 50px. 

CSS

header {
    ...
    margin:10px 50px 20px 50px;
    ...
}
footer {
    ...
    margin:0px 50px 0px 50px;
    ...
}

Click Preview in Browser and choose your preferred browser to see the styled layout.

You will need to save your files to view the changes.