HTML and CSS Reference
In-Depth Information
background may not provide the contrast you need for other midtone colors, so a dark or
light color in the palette may be a better choice. Figure 4-9 shows the color palette developed
around a logo that will be used as the page's palette.
Figure 4-9: A logo-based color palette.
h e hexadecimal integer values for the four colors are pasted right in with the CSS3 at the top
of the HTML5 page for reference. h e following script (
ColorsPhoto.html
in this
chapter's folder at
www.wiley.com/go/smashinghtml5
) employs the colors so that they
work with the logo and rest of the page.
<!
DOCTYPE HTML
>
<
html
>
<
head
>
<
style type
=
”text/css”
>
/* 027333,7FA646,D9B448,F2DFA7 */
body
{
margin
-
left
:
1em
;
background
-
color
:
#F2DFA7;
color
:
#027333;
font
-
family
:
Verdana
,
Geneva
,
sans
-
serif
;
font
-
size
:
11px
;
}
h1
{
font
-
family
:
Tahoma
,
Geneva
,
sans
-
serif
;
color
:
#7FA646;
}
h2
{
font
-
family
:
”Lucida Sans Unicode”
,
“Lucida Grande”
,
sans
-
serif
;
color
:
#7FA646;
background
-
color
:
#D9B448;
}
div
{
text
-
align
:
center
;
}
a
{
font
-
family
:
Arial
,
Helvetica
,
sans
-
serif
;
text
-
align
:
center
;
font
-
size
:
10px
;
text
-
decoration
:
none
;
background
-
color
:
#027333;
color
:
#F2DFA7;
}
a
:
hover
{
color
:
#D9B448;
79