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;
Search WWH ::

Custom Search