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

Custom Search