CSS06 - はれあめはれ

【CSS06】

以下の画像と同じように表示させるCSSを記述しなさい
文字の擬似クラスも設定しなさい（色は自由選択）
記述場所はエンベッド

TAG Design
>> About Us
>> Works
>> Access
>> Contact
個人情報の取扱いについて
サイトマップ
Copyright © 2012 WebDesign
Webデザインの勉強｜忘筌

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"
lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>TAG Design</title>
<style type="text/css">
body {
  background-color: #f5f5f5;
}
#container {
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ 角ゴ Pro W3", sans-serif; 
  width: 740px;
  margin: 10px;
}
h1 {
  margin-top: 100px;
  margin-bottom: 0;
}
#globalNav{
  font-size: 1em;
  font-weight: bold;
  list-style-type: none;
  padding-left: 0;
  margin-top: 5px;
  margin-bottom: 0;
}
#globalNav li a {
  text-decoration: none;
  color: #ffffff;
}
#globalNav li a:hover {
  color: #000fff;
}
.nav1 {
  background-image: url(../cs3_img/navi01.gif);
  padding: 5px 30px 70px 1px;
  margin-bottom: 10px;
}
.nav2 {
  background-image: url(../cs3_img/navi02.gif);
  padding: 5px 30px 70px 1px;
  margin-bottom: 10px;
}
.nav3 {
  background-image: url(../cs3_img/navi03.gif);
  padding: 5px 30px 70px 1px;
  margin-bottom: 10px;
}
.nav4 {
  background-image: url(../cs3_img/navi04.gif);
  padding: 5px 30px 70px 1px;
}
#assist {
  text-align: right;
  margin-top: 3px;  
}
#assist li {
  font-size: 0.75em;
  list-style-type: none;
  display: inline;
  padding: 0 1em 0 1em;
}
#assist li a {
  color: #6495ed;
  text-decoration: none;
}
#assist li a:hover {
  color: #000fff;
}
address {
  font-size: 0.75em;
  font-style: normal;
  text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h1><a href="#"><img src="../cs3_img/header.gif" alt="TAG Design" width="740" height="115" /></a></h1>
<ul id="globalNav">
<li class="nav1"><a href="#">>> ABOUT US</a></li>
<li class="nav2"><a href="#">>> WORKS</a></li>
<li class="nav3"><a href="#">>> ACCESS</a></li>
<li class="nav4"><a href="#">>> CONTACT</a></li>
</ul>
<ul id="assist">
<li ><a href="#">個人情報の取扱いについて</a></li>
<li ><a href="#">サイトマップ</a></li>
</ul>
<address>Copyright &copy; 2012 WebDesign</address>
</div>
</body>
</html>

CSSをたくさん書いてるとだんだん混乱してきた。
どこに書けば反映されるのか、きちんと把握しないと…。
もっとまとめて書ける気もする。