Handling Style Data

Next: Styling Text Blocks Up: Lecture 8 Previous: Adding Style Data

Handling Style Data

Selecting Content

All HTML elements can be given a single

class attribute to handle them in common way
id attribute to handle it uniquely

They provide flexible ways to select HTML elements for styling.

Style declaration in CSS

  p.blue { color: blue; font-style: normal }
  p.emph { color: red; font-style: italic }
  h4#garish { color: fuchsia; font-family: cursive; margin-left: 5% }

can be applied to HTML markup

  <p class="emph"> Some stuff </p>
  <p class="blue"> Other content </p>
  <p class="emph"> More of same stuff </p>
  <h4 id="garish"> Looming Recession </h4>

to apply shared styles to some elements and unique style to another.

Result is following:

Some stuff

Looming Recession

CSS class declarations need not be specific to a tag type

.title { display: block; font-size: 18pt; margin-left: 20pt }

Text Blocks

HTML provides two tags for grouping text into blocks

<div> ... </div>	displayed with line break before and after
<span> ... </span>	displayed inline

They can be used to confer style on all of that block.

Lecture 8

XHTML 1.0

Slide 4