meritt/1.css

## 1.css
p:not(.intro) {
  font-weight: bold;
}

## 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>

## 10.css
:root {
  --color-main: #333333;
  --color-alert: #ffecef;
}

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

## 11.css
.main {
  position: relative;
}

.exclusion {
  position: absolute;
  top: 14em;
  left: 14em;
  width: 320px;
  wrap-flow: both;
}

## 12.css
.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

## 2.css
p:not(.intro, blockquote) {
  font-weight: bold;
}

## 3.css
a:has( > img ) {
  border: 1px solid #000;
}

## 4.css
li:not(:has(p)) {
  padding-bottom: 1em;
}

## 5.css
p:matches(.alert, .error, .warn) {
  color: red;
}

## 6.css
.box {
  background-image: url("balloons.jpg");
}

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

.box3 {
  background-color: blue;
  background-blend-mode: multiply;
}

## 7.css
.box {
  background-image: url("balloons-large.jpg");
}

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

.box2 h1 {
  mix-blend-mode: screen;
}

## 8.css
.box {
  background-image: url("check.png");
  background-position: 30px 30px;
}

## 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);
	}