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
Styling Inline with <span>
general-style.css
#author { color: blue; }
HTML
<p>Author: Asdrubal</p>
Styling Inline with <span>
general-style.css
#author { color: blue; }
HTML
<p>Author: <span id="author">Asdrubal</span></p>
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>
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>
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/