HTML and CSS Reference
In-Depth Information
1.
<section id="shay-howe">
2.
3.
<div class="col-2-3">
4.
5.
<h2>Shay Howe</h2>
6.
<h5>Less Is More: How Constraints Cultivate Growth</h5>
7.
8.
<p>By setting constraints, we force ourselves...</p>
9.
10.
<h5>About Shay</h5>
11.
12.
<p>As a designer and front-end developer, Shay...</p>
13.
14.
</div><!--
15.
16.
--><aside class="col-1-3">
17.
<div class="speaker-info">
18.
19.
<ul>
20.
<li><a href=
"https://twitter.com/shayhowe">@shayhowe</a></li>
21.
<li><a href=
"http://learn.shayhowe.com/">learn.shayhowe.com</a></li>
22.
</ul>
23.
24.
</div>
25.
</aside>
26.
27.
</section>
7.
With the
<div>
element with a class attribute value of
speaker-info
ready,
we can add some styles to it.
We'll begin by adding a new section within our
main.css
file for the Speaker
page styles. From there, let's add a
1
-pixel solid gray
border
with a
5
-pixel radi-
us around any element that includes the class attribute value of
speaker-info
.
Next, let's add a top
margin
of
88
pixels to position the element on the same ver-
tical line as the first paragraph of the talk description, and let's also add
22
pixels
of vertical
padding
inside the element to provide room for the nested unordered
list.
Lastly, let's
center
all of the text within the element.
In all, our CSS for the
speaker-info
class rule set looks like this:
Search WWH ::
Custom Search