HTML and CSS Reference
In-Depth Information
9.
text-transform: uppercase;
10.
}
We'll also clean up some of the alternate button styles by way of the
btn-alt
class rule set. Specifically, let's make the buttons' borders white and add hover
styles including a white
background
and blue text
color
.
With all of the additions, our new
btn-alt
class rule set should look like this:
1.
.btn-alt {
2.
border: 1px solid #fff;
3.
padding: 10px 30px;
4.
}
5.
.btn-alt:hover {
6.
background: #fff;
7.
color: #648880;
8.
}
5.
Now that we have all of the areas with blue backgrounds cleaned up, let's add
styles for the rows that have white backgrounds. Let's create a new section within
our
main.css
file for rows, just below the clearfix section. Within this new rows
section, let's create a new class selector named
row
.
Within our new
row
class rule set, let's add a white
background
, a minimum
width
of
960
pixels (to make sure our
row
elements are always larger than the
width
of our
container
or
grid
elements), and some vertical
padding
. Al-
together our new row section within our
main.css
file should look like this:
1.
/*
2.
========================================
3.
Rows
4.
========================================
5.
*/
6.
7.
.row {
8.
background: #fff;
9.
min-width: 960px;
10.
padding: 66px 0 44px 0;
11.
}
6.
With our
row
class styles in place, let's add a row with a white
background
to
our home page. We'll do this on our teasers section. Currently this area has a
<section>
element with the class of
grid
wrapping three additional
<sec-
tion>
elements with the classes of
teaser
and
col-1-3
.
Search WWH ::
Custom Search