Learn how to use CSS to style divs and other containers by applying background color and spacing between elements.
Abstract art featuring different font styles and colors

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.

Illustration of 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. 

CSS opened in Dreamweaver in Split View.
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 using the color selector or by entering a hex code.
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 with color selector or by entering a hex code.
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 with the height property.
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 to create space around the content within the border of an element.
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 independently.
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 to create a transparent space around the border of an element.
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 to complete the layout.
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.

Click Preview in Browser and choose preferred browser to see styled layout.
Preview the styled layout in a browser
09/15/2021
Was this page helpful?