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:
Click here to view code image
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:
Click here to view code image
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