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>
The structure of our new teasers element should look like this:
Click here to view code image
1. <section class="row">
2. <div class="grid">
4. <!-- Speakers -->
6. <section class="teaser col-1-3">
7. ...
8. </section><!--
10. Schedule
12. --><section class="teaser col-1-3">
13. ...
14. </section><!--
16. Venue
18. --><section class="teaser col-1-3">
19. ...
20. </section>
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
7.3 , is proof.
Search WWH ::

Custom Search