HTML5 in 24 Hours

Hour 6 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

· 3 min read

Listing 6.1

/\* universal selector \*/ 
\* { 
  font-size: 86%; 
}
/\* element selector \*/
p { 
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; 
}
/\* id selector \*/ 
#main {
  width: 80%;
  margin: 0 auto;
}
/\* class selector \*/
.alignright {
  float: right;
  margin-left: 1em;
}
/\* child selector \*/
div > h1 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
/\* descendant selector \*/
p > .bold {
  font-weight: bold;
}
/\* pseudo-class selectors \*/ 
a:link { color: blue; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: pink; }
/\* attribute selector \*/ 
a\[title\] {
  background-color: #dfdfdf;
}

Listing 6.2

<style>
  /\* universal selector \*/ 
  \* { 
    font-size: 86%; 
  }
  /\* element selector \*/
  p { 
    font-family: Baskerville, "Palatino Linotype", Palatino,
  \[ic:ccc\]"Century Schoolbook L", "Times New Roman", serif; 
  }
  /\* id selector \*/ 
  #main {
    width: 80%;
    margin: 0 auto;
  }
  /\* class selector \*/
  .alignright {
    float: right;
    margin-left: 1em;
  }
  /\* child selector \*/
  div > h1 {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
  \[ic:ccc\]"DejaVu Sans", Verdana, sans-serif;
  }
  /\* descendant selector \*/
  p > .bold {
    font-weight: bold;
  }
  /\* pseudo-class selectors \*/ 
  a:link { color: blue; }
  a:visited { color: gray; }
  a:hover { color: red; }
  a:active { color: pink; }
  /\* attribute selector \*/ 
  a\[title\] {
    background-color: #dfdfdf;
  }
</style>

Listing 6.3

body { font-size: 62.5%; }
p { 
  font-size: 1.4em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
h1, h2, h3 {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
em { font-style: italic; }
strong { font-weight: bold; }
.pronounce { color: #767703; }

Listing 6.4 CSS

body { font-size: 62.5%; }
p { 
  font-size: 1.4em;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  margin: 0px auto 0.25em auto;
}
h1, h2, h3 {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
h1 { font-size: 2.4em; margin: 0px auto 1em 0px; }
h2 { font-size: 2.0em; margin: 0px auto 0.4em 2em; }
h3 { font-size: 1.8em; }
em { font-style: italic; }
strong { font-weight: bold; }
.pronounce { color: #767703; }
header { width: 100%; }
article { 
  width: 65%; 
  float: left; 
}
aside { 
  width: 25%; 
  float: right; 
}
aside img { 
  width: 100%; 
  height: auto; 
}
footer { 
  width: 100%; 
  clear: both; 
}

Listing 6.4 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    </header>
    <article>
      <h2>Not Your Mother's Weed</h2>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>