how to highlight first paragraph

rachelandrew · rachelandrew · commit 3864835b7f2a · 2021-01-22T13:30:30.000Z
diff --git a/howto/highlight_first_para.html b/howto/highlight_first_para.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Solutions: How to highlight the first paragraph</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        
+    </style>
+
+    <style class="editable">
+        .wrapper p:first-child {
+          font-weight: bold;
+          font-size: 130%;
+        }
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="wrapper">
+          <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
+
+          <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 120px;">
+.wrapper p:first-child {
+  font-weight: bold;
+  font-size: 130%;
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 200px;">
+<div class="wrapper">
+  <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
+  
+  <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
+</div>            
+    </textarea>
+
+    <!-- leave everything below here alone -->
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="playable.js"></script>
+
+</html>
