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= ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial