Join Laurie Burruss for an in-depth discussion in this video Using the div tag to create a content container, part of Creating a CSS Style Guide: Hands-On Training.
- View Offline
Although we are starting to see how styles can improve the page, and we have…attached an external style sheet, a best practice, the page when viewed in the…browser is all over the place. In this section, we'll use the div tag or a…division tag or what I like to call the box tag to create a layout.…First, let's just simply put our I- beam anywhere inside the page. Get your…I-beam to show up. Using your Command key, select everything on the page by…doing Command+A or Ctrl+A. Take a moment to see what we have actually selected…by going to Code view. As you can see we've selected all of the content but not…the body tag. The body tag is what the browser displays. Just a reminder, head,…instructions; body, what we see in the browser. This is the way we want it to be.…
Let's go back to Design view.…We're going to use our Common tools up here, right between the table and the…image that's an icon that says Insert Div Tag. Click on this button. We want to…wrap this tag, the Division tag or what I like to call the box tag around the…
Download the exercise files from the Exercise Files tab.
- Planning a site from a blank file
- Creating and editing a style guide with just HTML
- Using the Property Inspector for text markup
- Inserting images, tables, and footers for a custom look
- Creating and editing an external CSS style sheet
- Building a custom color palette for a site
- Testing web pages in various browsers
- Styling tips for professional sites