O'Reilly logo

Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Richard York, Ian Pouncey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

13

Create a Complete Layout

WHAT YOU WILL LEARN IN THIS CHAPTER:

  • How to create a complete layout from scratch
  • How to add gradient backgrounds with CSS
  • How to use custom fonts

Throughout this book, you have learned everything you need to create a complete layout for a website. In this chapter, I go through this process from HTML to CSS, and show you a few new tricks.

CREATING THE PAGE WITH HTML

Throughout this chapter, I show you how to build the page you see in Figure 13-1.

Many parts of this layout should be familiar to you from previous chapters, but you may notice that the page has a gradient background from dark gray to white, and the h1 element uses a non-standard font. I'll show you how this is done later in the chapter, but the first thing you will do in the following example is create the markup.

image

FIGURE 13-1

TRY IT OUT Markup Content before Adding CSS

Example 13-1

To create the markup that the complete layout uses, follow these steps.

  1. Enter the following markup:
    <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
        “http://www.w3.org/TR/html4/strict.dtd”>
    <html lang=“en”>
    <head>
        <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
        <title>Example 13-1</title>
    </head>
    <body>
    
    <div class=“header”>
    
        <h1>Recipes for Cheese</h1>
    
        <ul class=“navigation”>
            <li><a href=“#”>Home</a></li>
            <li><a href=“#”>Recipes</a></li>
            <li><a href=“#”>Suggestions</a></li>
        </ul> <p class= ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required