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:
Click here to view code image
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:
Click here to view code image
1. /*
2. ========================================
3. Rows
4. ========================================
5. */
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