progressive-enhancement-3-01.css

p {
  color: red;
  font-weight: bold;
}

progressive-enhancement-3-02.css

p {
  background-color: rgb(137, 224, 160);
  background-color: rgba(180, 246, 248, .43);
}

progressive-enhancement-3-03.css

html[lang] p {
  /* A bunch of advanced stuff goes here */
}

progressive-enhancement-3-04.css

#intro {
  margin: 0;
  padding: 0;
  width: 660px;
  height: 80px;
  background: transparent url(introkop.gif) no-repeat right top;
}
...
body[id=css-zen-garden] #intro {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  margin: 0;
  width: 100%;
  height: 350px;
  background: none;
}

progressive-enhancement-3-05.css

p,
p:not([title]) {
  color: red;
  font-style: bold;
}

progressive-enhancement-3-06.css

#intro {
  /* Old Layout */
}
...
[foo], #intro {
  /* Advanced Layout */
}

progressive-enhancement-3-07.css

h1 {
  font-size: 2em;
}
h1 {
  font-size: 3em;
}

progressive-enhancement-3-08.html

<article id="lodging">
  <header>
    <h1>Where You&#8217;ll Stay</h1>
  </header>
  <figure class="frame focal">
    <img class="inner" src="i/lodge.jpg" alt="" title="..."/>
  </figure>
  <section class="main">
    <!-- description of accommodations -->
  </section>
  <aside class="extra">
    <ul class="gallery">
      <li>
        <figure class="frame">
          <img class="inner" src="i/room.jpg" alt="" title="..."/>
        </figure>
      </li>
      ...
    </ul>
  </aside>
</article>

progressive-enhancement-3-09.css

.frame {
  margin: 0 auto 40px;
}
.focal {
  margin: 0 20px 25px 30px;
}

progressive-enhancement-3-10.css

/* =Typography */
img {
  display:block;
}

/* =Layout */
@media screen {
  .frame .inner {
    border: 10px solid;
  }
}

/* =Color */
.frame .inner {
  background-color: rgb(227, 222, 215);
  border-color: rgb(227, 222, 215);
}