HTML and CSS Reference
In-Depth Information
By default, browsers render headings with a font-weight of bold. Our head-
ings, however, are currently all set to a font-weight of 300 . Our reset at the
top of our main.css file changed the font-weight to normal , and then our
font-weight of 300 within the <body> element rule set changed all headings
to a font-weight of 300 .
The font-weight of 400 on the <h5> element will actually make it slightly
thicker than the rest of our other headings and text.
1. h5 {
2. color: #a9b2b9;
3. font-size: 14px;
4. font-weight: 400;
5. }
4. Our reset at the beginning of our style sheet also reset the browser default styles
for the <strong> , <cite> , and <em> elements, which we'll want to add back
in. For our <strong> elements we'll want to set a font-weight of 400 ,
which actually equates to normal , not bold , as the typeface we're using is thick-
er than most typefaces. Then, for our <cite> and <em> elements we'll want to
set a font-style of italic .
1. strong {
2. font-weight: 400;
3. }
4. cite,
5. em {
6. font-style: italic;
7. }
5. We're on a roll, so let's keep going by adding some styles to our anchor elements.
Currently they are the browser default blue. Let's make them the same color as
our <h1> through <h4> heading elements. Additionally, let's use the :hover
pseudo-class to change the color to a light gray when a user hovers over an an-
Click here to view code image
1. /*
2. ========================================
3. Links
4. ========================================
5. */
7. a {
8. color: #648880;
Search WWH ::

Custom Search