Adobe Dreamweaver CC

Layout web pages with CSS

Learn how to use CSS to lay out and position content on web pages in Dreamweaver. (Try it, 15 min)

HTML creates the content and structure of a web page, but the content is stacked in the order you defined the elements. CSS enables you to refine the layout and positioning of the elements on the page.

What do I need?

Get files Sample files to practice with (ZIP, 8 KB)

Before you start

Open css-layout.html in Dreamweaver and work in Split View. 

Open css-layout.html

Step 1 of 6

Attach a CSS style sheet

You can define CSS directly in an HTML file. But, it is better practice to create a separate CSS file so you can associate it with multiple html files that make up a website. That way, you can define and edit styles and layout in one location and the changes are pushed out to all of the pages associated with the CSS file.

Select Window > CSS Designer. Then, click Add a new CSS Source and Create A New CSS File. Name it styles.css and click OK. It will save to the same folder as your HTML file. Close the CSS Designer for now. Notice that the <link> tag has been added to the HTML and references the CSS file you just created.

Attach a CSS style sheet

Step 2 of 6

Edit the style sheet

Even though it is separate, you can modify the CSS file within Dreamweaver while working with an HTML file. Click styles.css above the document toolbar to show the CSS file in Code View. When you enable Split View, you can see any styling changes you make in CSS immediately in Live View.

As you work in Dreamweaver, you can switch between editing HTML and CSS at any point by clicking Source Code, for HTML, and the name of the css file to view the CSS for your page.

 

Edit the style sheet

Step 3 of 6

Set the page width

The ideal page width varies depending on your site design. For this site, 1020 pixels works well for display on most desktops. The first <div> tag surrounds, or "wraps" around, all of the page content. Let's use an ID selector as a way for the CSS to find the part of the HTML to style. ID selectors can only be used once on a page and must be unique.

Give the <div> an id of wrapper. Then, create the ID selector in the CSS and set the width to 1020px. ID selectors in CSS start with a hashtag (#). You can name the ID anything you want, the name just needs to be unique and match between the HTML and the CSS so the CSS knows what part of the page to style.

HTML

<div id="wrapper"> 

CSS

#wrapper {
    width:1020px;
}

Set the page width

Step 4 of 6

Format the main content area

Let's create a 2-column layout for the main content area. The <article> tag contains a <div> tag which will be the larger column on the left. Set the ID of this <div> to main in the HTML. Then, create an ID selector of #main in the CSS. Use the CSS width property to set the width of the <div> to be a percentage (72%) of the space within the <article> container. Then, use the CSS float property to position the column to the left.

HTML

<div id="main"> 

CSS

#main {
    width:72%;
    float:left;
}

 

Format the main content area

Step 5 of 6

Format the sidebar

The <article> tag also contains the <aside> tag which includes the content for the sidebar and will be the smaller column on the right. Set the ID of the <aside> tag to sidebar. Then, create an ID selector of #sidebar in the CSS. Set the width to be a percentage (22%). The total percentage within a container can not be more than 100%. The <div> and the <aside> now take up a total of 94% of the <article> container which gives us some room to create spacing later. Finally, use the float property to position the sidebar column to the right.

HTML

<aside id="sidebar"> 

CSS

#sidebar {
    width:22%;
    float:right;
}
 

Format the sidebar

Step 6 of 6

Since we set the 2 columns to float, any content that follows fills in the remaining space. This is why the footer content fills in the empty space – which is not what we want. Let's use an element selector to format the footer. An element selector matches the name of the HTML element and applies the style and formatting in the CSS rule to all HTML elements on your page that match the name.

The clear property indicates if and when floating properties (such as the 2 columns) are allowed on either side of an element. In this case, we want the footer on the bottom row by itself with no elements on either side. So, set the value to both to clear each side of the footer.

HTML

footer {
    clear:both;
}

Format the footer

Done!

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

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

Preview in browser

This series covers some of the CSS properties you can use. Visit this website (http://w3schools.com/cssref/) to see a list and description of all the CSS properties you can use when designing web pages. Now that you have laid out the web page with CSS, check out the next tutorial in the Getting Started series, Style page elements with CSS, to see how to set background colors and style the layout further.

Let us know what you think