HTML and CSS Reference
In-Depth Information
2.
Once we have added the new
<link>
element to all of our pages, we are ready to
begin using the Lato font. We'll do so by adding it to our primary font stack within
the
font
property inside our
<body>
element styles.
Let's add Lato to the beginning of our font stack to make it
"Lato"
,
"Open
Sans"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
.
Although
Lato
is a single word, because it is an embedded web font we'll want to
surround it with quotation marks within any CSS reference. Our new
<body>
ele-
ment styles will look like this:
1.
body {
2.
color: #888;
3.
font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue",
Helvetica, Arial, sans-serif;
4.
}
3.
Lato should now be up and running, visible in all of our text across the Styles Con-
ference website. Let's take a closer look at our logo and update it a bit.
Within our
logo
class selector rule set, we'll begin by adding the
font-weight
property with a value of
100
to make the text fairly thin. We'll also use the
text-transform
property with a value of
uppercase
to make all of the let-
ters uppercase, as well as the
letter-spacing
property with a value of
.5
pixels to add a tiny bit of space between each letter within the logo.
Altogether the styles for our logo will look like this:
1.
.logo {
2.
border-top: 4px solid #648880;
3.
float: left;
4.
font-size: 48px;
5.
font-weight: 100;
6.
letter-spacing: .5px;
7.
line-height: 44px;
8.
padding: 40px 0 22px 0;
9.
text-transform: uppercase;
10.
}
4.
Because we have a
font-weight
property value of
100
available, let's also set
the paragraph element within our hero section to that weight. We can use the exist-
ing selector to do so, and the new rule set will look like this:
1.
.hero p {
Search WWH ::
Custom Search