Learn how to use CSS to style divs and other containers by applying background color and spacing between elements.
use-css-to-style-divs_1408x792

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.

CSS styling fine-tunes the appearance of a layout
CSS styling fine-tunes the appearance of a layout

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.

CSS Box Model
CSS Box Model

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. 

Download and save project files
Download and save project files at the outset

Add color to page sections

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.

Add color to sections of a page
Add color to sections of a page

CSS

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

Set background colors
Set the background colors

Adjust section heights

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;
    ...

Specify a section's height
Specify a section's height

Add padding

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;
    ...

Add padding
Add padding to create space

Add padding (cont.)

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;
    ...
}

Change the top, right, bottom, and left padding
Change the top, right, bottom, and left padding separately

Add margins

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;
    ...
}

Specify margins
Specify margins

Add margins (cont.)

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;
    ...
}

Add margins for the header and footer sections
Add margins for the header and footer sections

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.

Preview the styled layout in a browser
Preview the styled layout in a browser
02/11/2015
Was this page helpful?