O'Reilly logo

Using Google App Engine by Charles Severance

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

Exerting More Control over Markup

Now that you know how to change the styling of a tag or a tag within another tag, we need to move on to affecting the look of blocks of text. The <div> tag is how we mark blocks of our web page so that we can separately style each area of our document. We will divide the body of our document into two main areas. The top area is the navigation or “header,” and it is the same across different documents. The bottom area is the “content,” which changes completely from document to document:

<body>
  <div id="header">
   <h1><a href="index.htm">AppEngineLearn</a></h1>
   <ul>
    <li><a href="sites.htm">Sites</a></li>
    <li><a href="topics.htm" >Topics</a></li>
   </ul>
  </div>
  <div id="content">
   <h2>Google App Engine: About</h2>
   <p>
   Welcome to the site dedicated to
   learning the Google Application Engine.
   We hope you find www.appenginelearn.com useful.
   </p>
  </div>
</body>

When we add the <div> tag to our document, we add an id attribute so that we can uniquely identify a particular block in the HTML. We have now broken our document into a “header” area and a “content” area and can apply different styling to each area. Although the id attribute can be used on any tag, it is most commonly used on a <div> tag, splitting the document into major “chunks.” You can use an id value (content or header in this example) only once in a particular document.

We can create CSS rules that apply to these newly defined blocks of our document. When we prefix the selector string with a hash ...

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