HTML and CSS Reference
In-Depth Information
And finally, we want to finish off the styling of the “Yummy Tweets” section. First, we'll add
a line-height declaration to fix the space between lines, in harmony with the original design:
.tweet {
padding-left: 55px;
padding-right: 20px;
position: relative;
line-height: 1.4;
}
And next we'll improve the look of the text in the
.date
element:
.tweet .date {
color: #8f7e6d;
font-faily: Arial, sans-serif;
color: #8f7e6d;
font-size: 12px;
font-style: italic;
}
In addition to the family, color, and size, this declaration block includes a property new to us:
font-style
. The
font-style
property does exactly what its name suggests, accepting
values of
normal
(the default),
italic
, and
oblique
. For all intents and purposes,
it-
alic
and
oblique
arebasically thesame, causing thetext toslant. Thedifference canonly
be seen if the font to which this property is applied has the capability to differentiate between
the two.
Summary
Withallthesenewlinkandtypographicstylesinplace,thelookofRecipeFinder isveryclose
to what we want to achieve. In fact, visually, it could pass for a pretty good-looking web-
site—even in this incomplete form!
However, we're not quite finished. In the next chapter we're going to look at some of the
fancy new effects that have been added to CSS in the last few years, and see how to add some
to our web pages.
