meritt · February 4, 2015 16:49
diff --git a/1.css b/1.css
 p:not(.intro) {
  font-weight: bold;
 }
diff --git a/1.html b/1.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Grid Example</title>
    <style>
      body {
        margin: 40px;
      }

      .wrapper {
        display: grid;
        grid-template-columns: 100px 10px 100px 10px 100px;
        grid-template-rows: auto 10px auto;
        background-color: #fff;
        color: #444;
      }

      .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
      }

      .a {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }

      .b {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
      }

      .c {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
      }

      .d {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
      }

      .e {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
      }

      .f {
        grid-column: 5 / 6;
        grid-row: 3 / 4;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="box a">A</div>
      <div class="box b">B</div>
      <div class="box c">C</div>
      <div class="box d">D</div>
      <div class="box e">E</div>
      <div class="box f">F</div>
    </div>
  </body>
 </html>
diff --git a/10.css b/10.css
 :root {
  --color-main: #333333;
  --color-alert: #ffecef;
 }

 .error {
  color: var(--color-alert);
 }
diff --git a/11.css b/11.css
 .main {
  position: relative;
 }

 .exclusion {
  position: absolute;
  top: 14em;
  left: 14em;
  width: 320px;
  wrap-flow: both;
 }
diff --git a/12.css b/12.css
 .shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
 }
diff --git a/2.css b/2.css
 p:not(.intro, blockquote) {
  font-weight: bold;
 }
diff --git a/3.css b/3.css
 a:has( > img ) {
  border: 1px solid #000;
 }
diff --git a/4.css b/4.css
 li:not(:has(p)) {
  padding-bottom: 1em;
 }
diff --git a/5.css b/5.css
 p:matches(.alert, .error, .warn) {
  color: red;
 }
diff --git a/6.css b/6.css
 .box {
  background-image: url("balloons.jpg");
 }

 .box2 {
  background-color: red;
  background-blend-mode: hue;
 }

 .box3 {
  background-color: blue;
  background-blend-mode: multiply;
 }
diff --git a/7.css b/7.css
 .box {
  background-image: url("balloons-large.jpg");
 }

 .box h1 {
  color: green;
  font-size: 140px;
 }

 .box2 h1 {
  mix-blend-mode: screen;
 }
diff --git a/8.css b/8.css
 .box {
  background-image: url("check.png");
  background-position: 30px 30px;
 }
diff --git a/9.css b/9.css
 .box {
  background-image: url("check.png");
  background-position: calc(100% – 30px) calc(100% – 30px);
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Grid Example</title>
	<style>
	body {
	margin: 40px;
	}

	.wrapper {
	display: grid;
	grid-template-columns: 100px 10px 100px 10px 100px;
	grid-template-rows: auto 10px auto;
	background-color: #fff;
	color: #444;
	}

	.box {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;
	}

	.a {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	}

	.b {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	}

	.c {
	grid-column: 5 / 6;
	grid-row: 1 / 2;
	}

	.d {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	}

	.e {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
	}

	.f {
	grid-column: 5 / 6;
	grid-row: 3 / 4;
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<div class="box a">A</div>
	<div class="box b">B</div>
	<div class="box c">C</div>
	<div class="box d">D</div>
	<div class="box e">E</div>
	<div class="box f">F</div>
	</div>
	</body>
	</html>
	:root {
	--color-main: #333333;
	--color-alert: #ffecef;
	}

	.error {
	color: var(--color-alert);
	}
	.main {
	position: relative;
	}

	.exclusion {
	position: absolute;
	top: 14em;
	left: 14em;
	width: 320px;
	wrap-flow: both;
	}
	.shape {
	width: 300px;
	float: left;
	shape-outside: circle(50%);
	}
	.box {
	background-image: url("balloons.jpg");
	}

	.box2 {
	background-color: red;
	background-blend-mode: hue;
	}

	.box3 {
	background-color: blue;
	background-blend-mode: multiply;
	}
	.box {
	background-image: url("balloons-large.jpg");
	}

	.box h1 {
	color: green;
	font-size: 140px;
	}

	.box2 h1 {
	mix-blend-mode: screen;
	}
	.box {
	background-image: url("check.png");
	background-position: 30px 30px;
	}
	.box {
	background-image: url("check.png");
	background-position: calc(100% – 30px) calc(100% – 30px);
	}