topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

basic-css-06-Tr-It-Out-example6-5.htm / htm


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html>
      <head>
          <title> Albert Einstein </title>
          <style type='text/css' media='all'>
              * {
                  font-family: sans-serif;
              }
              p::first-letter {
                  font-size: 200%;
                  background-color: lightgray;
                  border: 1px solid black;
              }
              p::first-line {
                  letter-spacing: 5px;
              }
  
              /* :: before and ::after */
  
              h1#top::before, h1#top::after {
                  content: "::";
              }
  
              /* Dynamic pseudo-classes */
  
              li a {
                  padding: 2px;
                  color: black;
                  font-size: 15pt;
                  text-decoration: none;
              }
              li a:link {
                  background-color: white;
                  color: black;
              }
              li a:visited {
                  background-color: black;
                  color: white;
              }
              li a:active {
                  background-color: lightgray;
                  color: black;
              }
              li a:hover, li a:focus {
                  background-color: gray;
                  color: white;
              }
              ul {
                  list-style: none;
              }
              li {
                  border: 1px solid black;
                  padding: 5px;
                  margin: 2px;
                  float: left;
              }
  
              /* Structural pseudo-classes */
  
              :root {
                  border: 35px solid black;
                  -moz-border-radius: 10%;
                  margin: 35px auto;
                  padding: 35px;
                  background-color: lightgray;
                  width: 550px;
              }
              div:empty {
                  height: 30px;
                  background: black;
                  -moz-border-radius: 10%;
              }
              div p:first-child {
                  border: 10px solid black;
                  padding: 40px;
                  -moz-border-radius: 10%;
                  background-color: gray;
                  font-weight: bold;
              }
              div h1:first-child {
                  padding: 0;
                  border-bottom: 1px dashed black;
                  letter-spacing: 2px;
              }
              div h1:last-child {
                  padding: 10px;
                  letter-spacing: -3px;
              }
  
              /* :not pseudo-class */
  
              h1:not(#top) {
                  font-size: 12pt;
              }
  
          </style>
      </head>
      <body>
          <div></div>
          <div>
              <h1>Famous Quotes</h1>
              <h1 id='top'>Albert Einstein</h1>
          </div>
          <div></div>
          <ul>
              <li><a href='http://www.google.com'>Google</a></li>
              <li><a href='http://p2p.wrox.com'>Wrox P2P</a></li>
              <li><a href='http://www.mozilla.org'>Mozilla</a></li>
              <li><a href='http://pear.php.net'>PEAR</a></li>
          </ul>
          <div>
              <p>
                You see, wire telegraph is a kind of a very, very long cat.
                You pull his tail in New York and his head is meowing in Los
                Angeles. Do you understand this? And radio operates exactly
                the same way: you send signals here, they receive them there.
                The only difference is that there is no cat.
              </p>
          </div>
          <div></div>
      </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

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.