CSS課題（超初心者用課題A）について

【S01】

<!DOCTYPE html>
<html lang="ja>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-type"content="text/css">
<title>CSS課題【S01】</title>
<style type="text/css">
<!--
h1{
    color: #000080;
    font-size: 35px;
    font-weight: bolder;
    padding: 15px 0;
}
h2{
    width: 300px;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: bold;
    background-color: #66CDAA;
}
p{
    color: #FF8C00;
    padding: 10px 0
}
-->
</style>
</head>
<body>
<h1>style要素</h1>
<h2>style element</h2>
<p>HTML文書内にまとめて設定します。</p>
</body>
</html>

【S02】

CSS課題【S02】

<?xml version="1.0" enconding="UTF-8"?>
<!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>CSS課題【S02】</title>
<style type="text/css">
<!--
*{
    margin: 0;
    paddign: 0;
}
#container{
    width: 450px;
    height: auto;
    margin: 20px auto ;
    border: 10px solid #8FBC8F;
}
h1{
    color: #FFFFFF;
    font-size: 50px;
    font-weight: bold; 
    height: 70px;
    padding: 0;
    background-color: #8FBC8F;
}
h2{
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 0 5px 15px;
    background-color: #BC8F8F;
    border-bottom: 20px solid #8FBC8F;
}
p{
    color: #696969;
    font-size: 14px;
    line-height: 2.0;
    padding: 15px 15px 15px 10px;
    background-color: #FFEBCD;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>About wine</h1>
<h2>DULCAMURA</h2>
<p>こちらは、名門マッツェイとは対照的に、建築の仕事に従事していたジュスティさんとザンザさんが、ワインに対する情熱から1995年にワイン造りを始めた新しいワイナリーです。<br>
この「DULCAMARA（ドゥルカマーラ）」の名は、ドニゼッティ作のオペラ「愛の妙薬」に登場する“いかさま薬売り”の名にちなんでいます。ドゥルカマーラは、金持ちで気ままな農場主の娘（ラベルのイラストの女性）に恋する純情な若い農夫に、“惚れ薬”と偽って安物のワインを高い値段で売り付ける男。ともすれば、安物ワインの代名詞にもなりかねないドゥルカマーラの名前を、ワイナリーの最も誇りとするワインにつけるなんて、自信にあふれて粋ではありませんか。</p>
</div>
</body>
</html>

【S03】

CSS課題【S03】

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS課題【S03】</title>
<style type="text/css">
<!--
p{
    width: 280px;
    line-height: 1.7;
    padding: 30px;
    background-color: #F0E68C;
    border: 10px solid #000080;
}
-->
</style>
</head>
<body>
<p>パディングと幅の関係における標準準拠モードと過去互換モードによる表示の違い</p>
</body>
</html>

【S04】

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS課題【S04】</title>
<style type="text/css">
<!--
*{
    margin: 0;
    padding: 0;
}
h1{
    width: 500px;
    height: 150px;
    font-size: 30px;
    font-weight: bold;
    padding: 30px 0 0 0;
    background: #FFFFFF url(images/css04.jpg);
}
-->
</style>
</head>
<body>
<h1>Web Design</h1>
</body>
</html>

【S05】

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS課題【S05】</title>
<style type="text/css">
<!--
*{
    margin: 0;
    padding: 0;
}
h1{
    width: 250px;
    height: 400px;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    padding: 30px 0 0 0;
    background: #FFFFFF url(images/css05.jpg);
}
-->
</style>
</head>
<body>
<h1>Web Design</h1>
</body>
</html>

【S06】
CSS課題【S06】

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS課題【S06】</title>
<style type="text/css">
<!--
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 500px;
    height: auto;
    background-color: #EEE8AA;
    margin: 10px auto;
    padding: 20px 20px;
}    
h1{
    height: 80px;
    color: #008080;
    font-size: 30px;
    margin: 0 auto 20px auto;
    padding 20px 0 0 0;
    background-color: #FFFFFF;
    border: 3px solid #000080;
}
p{
    color: #008080;
    line-height: 1.5;
    padding: 20px 0 40px 0;
    background-color: #FFFFFF;
    border: 3px solid #000080;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>BOX and PADDING</h1>
<p>この領域はボックスといいます。<br>テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</div>
</body>
</html>

◎色々設定してみましたが、『BOX and PADDING』のボックス内の上に余白ができません。。

【S07】
CSS課題【S07】

<?xml version="1.0" encoding="UTF-8"?>
<!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>CSS課題【S07】</title>
<style type="text/css">
<!--
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 450px;
    line-height: 1.5;
    height: auto;
    margin: 20px auto;
    background-color: #FFFFFF;
}
h1{
    color: #FFFFFF;
    font-size: 30px;
    margin: 20px 0,;
    padding: 10px 10px;
    background-color: #FF8C00;
}
h2{
    color: #00008B;
    font-size: 20px;
    margin: 20px 0;
    padding: 12px 10px;
    background-color: #6B8E23;
}
p{
    color: #556B2F;
    padding: 12px 10px;
    background-color: #9ACD32;
}
.lead{
    margin: 20px 0;
    padding: 10px 10px;
    background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>Title_A</h1>
<p class="lead">クラス指定された要素には繰り返し適用されます。<br>見出しと段落の色を指定します。</p>
<h2>Title_B</h2>
<p>クラス指定された要素の背景色が変わります。<br>見出しと段落とspan要素の色を指定します。</p>
<h2>Title_B</h2>
<p>クラス指定された要素の背景色が変わります。<br>文字の色と背景色をセットで指定することができます。</p>
<p class="lead">クラス指定された<span style="color:#FFFFFF;background-color:#FF8C00">要素の背景色</span>が変わります。</p>
</div>
</body>
</html>