topical media & game development

talk show tell print

basic-css-06-Exercises-exercise6-2.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
       <head>
        <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
        <meta http-equiv="content-language" content="en-us" />
          <style type="text/css">
              * {
                  font-family: sans-serif;
                  color: white;
              }
              h1, h2 {
                  margin: 0;
                  background: gray;
              }
              h1 {
                  font-size: 18pt;
                  padding: 5px;
                  border-bottom: 5px solid black;
                  letter-spacing: -2px;
                  width: 510px;
                  -moz-border-radius-topleft: 10px;
                  -moz-border-radius-topright: 10px;
              }
              div {
                  background: lightgrey;
                  padding: 10px;
                  width: 500px;
                  -moz-border-radius-bottomleft: 10px;
                  -moz-border-radius-bottomright: 10px;
                  clear: left;
              }
              h2 {
                  font-size: 11pt;
                  -moz-border-radius: 10px;
                  padding: 3px;
              }
              ul#navigation {
                  list-style: none;
                  background: gray;
                  margin: 2px;
                  padding: 0;
              }
              ul#navigation li {
                  float: left;
                  margin: 5px;
              }
              ul#navigation li a {
                  padding: 5px;
              }
              ul#navigation li a:link {
                  background: gray;
              }
              ul#navigation li a:active {
                  background: orange;
              }
              ul#navigation li a:visited {
                  background: black;
              }
              ul#navigation li a:hover, li a:focus {
                  background: white;
                  color: black;
              }
              
              ul#top {
                  color: black;
              }
              
              h3, p {
                  color: black;
              }
              
              p {
                  border: 1px solid black;
                  padding: 10px;
              }
              h3:target {
                  color: yellow;
                  background: red;
              }
  
              ul#top li a {
                  color: black;   
              }
  
          </style>
          <title>FAQ - Widgets and What's-its</title>
      </head>
      <body>
          <h1>Widgets and What's-its</h1>
          <ul id='navigation'>
              <li><a href=''>home</a></li>
              <li><a href=''>contact us</a></li>
              <li><a href=''>products</a></li>
              <li><a href=''>services</a></li>
              <li><a href=''>faq</a></li>
          </ul>
          <div>
              <h2>faq</h2>
              <ul id='top'>
                  <li><a href='#widgets'>Q. What are widgets?</a></li>
                  <li><a href='#why'>Q. Why should I buy a widget?</a></li>
                  <li><a href='#where'>Q. Where do widgets come from?</a></li>
                  <li><a href='#what'>Q. What are widgets made of?</a></li>
                  <li><a href='#how'>Q. How do I use my widget?</a></li>
                  <li><a href='#who'>Q. Who uses widgets?</a></li>
              </ul>
              <h3 id='widgets'>Q. What are widgets? <a href='#top'>top</a></h3>
              <p>
                  A. Widgets are a smaller, more compact version of what's its.
              </p>
              <h3 id='why'>Q. Why should I buy a widget? <a href='#top'>top</a></h3>
              <p>
                  A. Because widgets will solve all of you problems.
              </p>
              <h3 id='where'>Q. Where do widgets come from? <a href='#top'>top</a></h3>
              <p>
                  A. Widgets are harvested from the Amazon rain forest by 
                  little green gnomes.
              </p>
              <h3 id='what'>Q. What are widgets made of? <a href='#top'>top</a></h3>
              <p>
                  A. Widgets are made of primordial, esoteric matter, and as 
                  such could cause your head to explode into one of seven 
                  fun-filled colors.
              </p>
              <h3 id='how'>Q. How do I use my widget? <a href='#top'>top</a></h3>
              <p>
                  A. You must summon a troll using our proprietary magic wand and 
                  book of spells who will teach you everything you need to know 
                  about your widget.
              </p>
              <h3 id='who'>Q. Who uses widgets? <a href='#top'>top</a></h3>
              <p>
                  A. Day traders and postal workers, primarily.
              </p>
          </div>
      </body>
  </html>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.