HTML and CSS Reference
In-Depth Information
Next we'll correct the look of the
<h2>
headings that appear inside the
.media
blocks that
we defined in our CSS earlier in the topic. Here's the code, targeting all
<h2>
elements in-
side
.media
blocks:
.media h2 {
color: #49301a;
font-family: LatoBold, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 26px;
margin-bottom: 5px;
}
There's something that might seem a bit paradoxical here. After defining the font as
LatoBold
(along with the fallback fonts), the next declaration defines the
font-weight
property as
normal
(as opposed to
bold
), which removes bolding from the font. So why
would we remove the bolding from a font that's naturally bold?
Well, the font itself has a certain level of bolding already built in. That's why it's called Lato
Bold.Aswe'vealreadynoted,headingelements aresetasboldbybrowsers,asadefault.This
default setting makes the font bolder than we want, so, in this case, we're better off removing
it. In addition to this, we've defined the correct font size for these headings.
Next we'll fix the styles for the text that appears under each of the
<h2>
headings inside
the
.media
elements. This text appears inside paragraph tags. And while we're at it, we'll
correct the margin spacing between the
<h2>
and the paragraph so it's more in line with the
original design:
.media p {
margin: 0;
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #7b6047;
text-transform: uppercase;
}
.media p span {
font-size: 25px;
}
