Lay out web pages with CSS – Learn how to use CSS to lay out and position content on web pages in Dreamweaver.
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.
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.
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.
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.
<div id=”wrapper”>
CSS
#wrapper {
width:1020px;
}
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.
<div id=”main”>
CSS
#main {
width:72%;
float:left;
}
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;
}
Step 6 of 6 – Format the footer
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.
CSS
footer {
clear:both;
}
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.
Assignment: build your own site
- Prepare a section of the site for your own banner image. Note that there is already a <header> section defined. You can either write some CSS to style this <header> area, or you might want to add a <div> and ID to the sample website that will be used for a banner/header image. Is either approach better that the other?
- Second, create and position a DIV for your menu. This <div> must have an ID of “menu”, please. Where you put the menu is up to you, but it should match the site design from your sketch.