HTML and CSS Reference
In-Depth Information
<section> element on the page, one for our hero section (the section that intro-
duces our conference) and one for our teasers section.
Click here to view code image
1. <section class="container" >...</section>
Additionally, let's wrap all of the <h1> elements on each page with a <sec-
tion> element with the class of container .
Click here to view code image
1. <section class="container">
2.
3. <h1>...</h1>
4.
5. </section>
We'll come back and adjust these elements and classes later, but for now we're
headed in the right direction.
5. Now that all of our content is centered, let's create some vertical spacing between
elements. For starters let's place a 22 -pixel bottom margin on a few of our heading
and paragraph elements. We'll place and comment on these typography styles be-
low our grid styles.
Click here to view code image
1. /*
2. ========================================
3. Typography
4. ========================================
5. */
6.
7. h1, h3, h4, h5, p {
8. margin-bottom: 22px;
9. }
We intentionally skipped <h2> and <h6> elements, as the design does not call for
margins on <h2> elements and as we won't be using any <h6> elements at this
time.
6. Let's also try our hand at creating a border and some rounded corners. We'll start
by placing a button within the top <section> element on our home page, just
below the header.
Previously we added an <a> element within this <section> element. Let's add
the classes of btn and btn-alt to this anchor.
Search WWH ::




Custom Search