HTML and CSS Reference
In-Depth Information
To add a white
background
to this section, we're going to wrap all of these ele-
ments in an element with the class of
row
.
Because we'll want the entire teasers section wrapped in a
<section>
element,
we're going to add a new
<section>
element with the class of
row
that sur-
rounds the existing
<section>
element with the class of
grid
.
Having two
<section>
elements wrapping the exact same content diminishes
semantic value. To correct this we'll change the second
<section>
element, the
one with the class of
grid
, to a
<div>
element. After all, at this point this ele-
ment is only adding styles, not semantic meaning, and is appropriate as a
<div>
element.
The structure of our new teasers element should look like this:
1.
<section class="row">
2.
<div class="grid">
3.
4.
<!-- Speakers -->
5.
6.
<section class="teaser col-1-3">
7.
...
8.
</section><!--
9.
10.
Schedule
11.
12.
--><section class="teaser col-1-3">
13.
...
14.
</section><!--
15.
16.
Venue
17.
18.
--><section class="teaser col-1-3">
19.
...
20.
</section>
21.
22.
</div>
23.
</section>
It is amazing how a few background colors can affect the design of a website. Our Styles
Conference website is coming along quite nicely, and our home page, as shown in
Figure
Search WWH ::
Custom Search