Black & White Series

Generic Elements

<span> and <div>

<span> and <div>

  • <span> - generic inline element
  • <div> - generic element for flow content
    • everything not inline

External CSS File

Separation Content-Style

Styling Inline with <span>

general-style.css

#author { color: blue; }

HTML

<p>Author: Asdrubal</p>

SPAN Pre-Style

Styling Inline with <span>

general-style.css

#author { color: blue; }

HTML

<p>Author: <span id="author">Asdrubal</span></p>

SPAN Styled

Styling Block with <div>

general-style.css

.story { color: gray; }

HTML

<h1>Dinosaur Story</h1>
<p>The <span class="emphasis">dinosaur jumped</span> into the mud.</p>

DIV Pre-Style

Styling Block with <div>

general-style.css

.story { color: gray; }

HTML

<div class="story">
  <h1>Dinosaur Story</h1>
  <p>The <span class="emphasis">dinosaur jumped</span> into the mud.</p>
</div>

DIV Styled

Replacing Specialized Formats

  • Replacing tags specialized in a format, like <b> (bold) and <i> (italic):
.emphasis { font-weight: bold; }

HTML

<p>The <span class="emphasis">dinosaur jumped</span> into the mud.</p>

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/