1 <!DOCTYPE html>
2 <html>
3 <head>
4 <!--
5 CSS Variable Test from:
6 https://www.w3schools.com/css/tryit.asp?filename=trycss3_var2
7 updated by JMH on June 29, 2022 at 8:56 PM
8 -->
9 <style>
10 :root {
11 --blue: #6495ed;
12 --white: #faf0e6;
13 }
14 body {
15 background-color: var(--blue);
16 }
17 h2 {
18 border-bottom: 2px solid var(--blue);
19 }
20 .container {
21 color: var(--blue);
22 background-color: var(--white);
23 padding: 15px;
24 }
25 button {
26 background-color: var(--white);
27 color: var(--blue);
28 border: 1px solid var(--blue);
29 padding: 5px;
30 }
31 </style>
32 </head>
33
34 <body>
35 <h1>Using the var() Function</h1>
36
37 <div class="container">
38 <h2>Lorem Ipsum</h2>
39 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
40 pulvinar, at pulvinar felis blandit.</p>
41 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
42 pulvinar, at pulvinar felis blandit.</p>
43 <p>
44 <button>Yes</button>
45 <button>No</button>
46 </p>
47 </div>
48 </body>
49 </html>