HTML and CSS Reference
In-Depth Information
}
</
style
>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
Arranging Colors
</
title
>
</
head
>
<
body
>
<
div
><
nav
>
<
a href
=
”#”
>
&
nbsp
;
Link
1
|
</
a
>
<
a href
=
”#”
>
&
nbsp
;
Link
2
|
</
a
>
<
a href
=
”#”
>
&
nbsp
;
Link
3
&
nbsp
;</
a
>
</
nav
>
</
div
>
<
img src
=
”Sandlightlogo.gif”
alt
=
”Logo”
align
=
”left”
>
<
header
><
h1
>&
nbsp
;
&
nbsp
;&
nbsp
;
Welcome
</
h1
></
header
>
<
br
><
br
>
<
article
>
<
h2
>&
nbsp
;
We are all about
...</
h2
>
Sandlight Productions is an international development company that specializes in
HTML5
/
CSS3
,
streaming video
,
mobile device development
,
online education
,
Action-
Script
3.0
architecture
,
Flash
,
and PHP
.
</
article
>
<
br
>
<
footer
><
div
>
<
nav
>
<
a href
=
”#”
>
&
nbsp
;
Link
1
|
</
a
>
<
a href
=
”#”
>
&
nbsp
;
Link
2
|
</
a
>
<
a href
=
”#”
>
&
nbsp
;
Link
3
 
;</
a
>
</
nav
>
</
div
></
footer
>
</
body
>
</
html
>
80
h e CSS3 script uses the property
a:hover
to change the property when the mouse is over
the link. In the
<a>
tag CSS3 dei nition, the
text-decoration
is set to
none
, which
means that the text link will not be underlined. Without the underline, you want to do
something to alert the user to the presence of a link; you do that using the hover property.
Changing the color of the link text subtly yet ef ectively shows the user that the mouse is over
the link. Both the initial color and the hover color are part of the palette. So, in setting up the
page, remember that more than just the
<body>
and
<h>
tags use the color palette.
h is particular design is focused on mobile devices (see the right side of Figure 4-10), but it
should work with computer and table screen as well (see the let side of Figure 4-10).
Of course, your page is always going to look better if you have a Web designer do the page
design. However, even developers can make it look better by paying attention to the color
combinations.
