Graphics Programs Reference
In-Depth Information
Take, for example, this simple set of styles and markup to present a quotation, the result of
which is shown in Figure 7-25:
body
{
background
:
#C0FFEE
;
font
:
1em
Georgia,
serif
;
padding
:
1em
5%
;}
.quotebox
{
font-size
:
195%
;
padding
:
80px
80px
40px
;
width
:
16em
;
margin
:
2em
auto
;
border
:
2px
solid
#8D7961
;
background
:
#FFF
;}
.quotebox
span
{
font-style
:
italic
;
font-size
:
smaller
;
display
:
block
;
margin-top
:
0.5em
;
text-align
:
right
;}
<
div
class="quotebox">
One’s
mind
has
a
way
of
making
itself
up
in
the
background
,
and
it
suddenly
becomes
clear
what
one
means
to
do.
<
span>
&
#8212;Arthur
Christopher
Benson<
/
span>
</
div>
252
Figure 7-25: Setting up the quotation's box.
Now, adding a single background image (as in Figure 7-26) is no big deal. Everyone has done
it about a zillion times.
.quotebox
{
background
:
url(bg01.png)
top
left
no-repeat
;
background-color
:
#FFF
;}
Figure 7-26: Adding a single background.
Search WWH ::
Custom Search