My problem as that change the background-color for h3 in the footer.
fills up the section as well as the footer.
footer h3 {background-color:red;}
I do not understand why. footer h3 should tell it that I only want the h3
background color to red.
What am I missing?
<html>
<head>
<title>test</title>
<style>
body,ul,li,h1,h2,h3,h4,h5,h6,a {margin:0;padding:0;font-family:georgia;}
body {text-align:center;font-size:11px;}
#container {width:800px;text-align:left;margin:0 auto;}
header {height:200px;text-transform:uppercase;font-size:25px;font-family:arial narrow;} /* line-height:25px; */
header h1 {font-size:60px;}
header span {color:white;background-color:black;}
section ul {list-style:none;}
section li {width: 380px;font-family:arial;font-size:15px;float:left;margin:30px 0 0 ;}
section h2 {text-transform:uppercase;font-size:25px;}
footer {}
h3 {background-color:red;}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Global gathering</h1>
<span>wings for life world run</span> a starter's gun on six continents. the first worldwid running race in
sports history gets under way in may 2014. anyone who wants to race against the rest of the world can take part.
here are the details:
</header>
<section>
<ul>
<li><h2>1. the way it works</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>2. the chaser</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>3. the courses</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>4. the results</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>5. the participants</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>6. the mission </h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
</section>
<footer>
<h3>Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</h3>
</a>
</footer>
</div>
</body>
</html>
Howard
fills up the section as well as the footer.
footer h3 {background-color:red;}
I do not understand why. footer h3 should tell it that I only want the h3
background color to red.
What am I missing?
<html>
<head>
<title>test</title>
<style>
body,ul,li,h1,h2,h3,h4,h5,h6,a {margin:0;padding:0;font-family:georgia;}
body {text-align:center;font-size:11px;}
#container {width:800px;text-align:left;margin:0 auto;}
header {height:200px;text-transform:uppercase;font-size:25px;font-family:arial narrow;} /* line-height:25px; */
header h1 {font-size:60px;}
header span {color:white;background-color:black;}
section ul {list-style:none;}
section li {width: 380px;font-family:arial;font-size:15px;float:left;margin:30px 0 0 ;}
section h2 {text-transform:uppercase;font-size:25px;}
footer {}
h3 {background-color:red;}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Global gathering</h1>
<span>wings for life world run</span> a starter's gun on six continents. the first worldwid running race in
sports history gets under way in may 2014. anyone who wants to race against the rest of the world can take part.
here are the details:
</header>
<section>
<ul>
<li><h2>1. the way it works</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>2. the chaser</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>3. the courses</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>4. the results</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>5. the participants</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
<li><h2>6. the mission </h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</li>
</section>
<footer>
<h3>Compete against the rest of the world in the Wings For Life World Run.
You can register online until April 20, 2014, at <a href="#">wingsforelifeworldrun.com</h3>
</a>
</footer>
</div>
</body>
</html>
Howard