Style Text Blocks

Next: eXtensible Markup Language Up: Lecture 8 Previous: Handling Style Data

Style Text Blocks

Style declaration in CSS

div.content {
  position: absolute;
  top: 49em;
  left: 10em
}
div.nav {
  width: 5em;
  padding: 0.3em;
  background-color: #aa4488
}
div.nav hr {
  display: none
}

can be applied to HTML markup

<div class="content">
  <h4>Page layout using divs</h4>
  <p>Here is the body.</p>
</div>
<div class="nav">
  <hr>
  <a href="index.html">Main</a> <br>
  <a href="item1.html">Item 1</a> <br>
  <a href="item2.html">Item 2</a>
</div>

to split page into part for content and part for navigation

Result is following:

Page layout using divs

Here is the body.

Main
Item 1
Item 2

Stylesheets can be validated at http://jigsaw.w3.org/css-validator

Styling div markup is preferrable to using HTML frames, as framesets

focus on layout and not on structure
are composed of frames lacking accessible URL addresses
aren't compatible with browsers that don't support them

Lecture 8

XHTML 1.0

Slide 5