chapter 1 - 1.5.2 - examples uploaded

dinanathsj29 · web-flow · commit 741e9d76ad00 · 2020-01-18T19:43:20.000+05:30
diff --git a/_examples-css-variables/1.5.1.1-style-define-variables-global-green-theme.css b/_examples-css-variables/1.5.1.1-style-define-variables-global-green-theme.css
@@ -1,7 +1,7 @@
 /* CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use */
 
 :root {
-  /* global scoped variabed */
+  /* global scoped variables */
   --font-face: Arial;
   --base-bg-color: #66f969;
   --base-text-color: #327b34;
diff --git a/_examples-css-variables/1.5.1.2-style-define-convert-variables-global-blue-theme.css b/_examples-css-variables/1.5.1.2-style-define-convert-variables-global-blue-theme.css
@@ -1,5 +1,5 @@
 :root {
-  /* global scoped variabed */
+  /* global scoped variables */
   --font-face: Arial;
   --base-bg-color: #6696f9;
   --base-text-color: #37327b;
diff --git a/_examples-css-variables/1.5.2.1-define-variables-local.html b/_examples-css-variables/1.5.2.1-define-variables-local.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>1.5.2.1-define-variables-local.html</title>
+
+    <link rel="stylesheet" href="1.5.2.1-style-define-variables-local.css">
+  
+  </head>
+
+  <body>
+    
+    <div class="container">
+
+      <div class="sub-container">
+
+        <h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using CSS Variables</h1>
+
+        <p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>
+
+        <h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables</h2>
+
+        <ul>
+          <li>List Item 1 - Define variables in any of root elements </li>
+          <li>List Item 2 - Call variables for required ids/classes/elements</li>
+          <li>List Item 3 - Verify variables properties reflect properly</li>
+        </ul>
+      
+      </div>
+
+    </div>
+  
+  </body>
+
+</html>
diff --git a/_examples-css-variables/1.5.2.1-style-define-variables-local.css b/_examples-css-variables/1.5.2.1-style-define-variables-local.css
@@ -0,0 +1,45 @@
+:root {
+  /* global scoped variables */
+  --font-face: Arial;
+  --base-bg-color: #f66969;
+  --base-text-color: #ffffff;
+  --base-padding: 30px 10px;
+
+  --list-item-margin: 10px;
+  --list-item-padding: 20px 10px;
+  --list-item-corner-radius: 5px;
+}
+
+body {
+  font-family: var(--font-face);
+}
+
+.heading-text {
+  background-color: var(--base-bg-color);
+  color: var(--base-text-color);
+  padding: var(--base-padding);
+}
+
+.subheading-text {
+  /* local scoped variables */
+  --base-bg-color: #66f969;
+  --base-text-color: #327b34;
+
+  background-color: var(--base-bg-color);
+  color: var(--base-text-color);
+  padding: var(--base-padding);
+}
+
+ul > li {
+  /* local scoped variables */
+  --base-bg-color: #6696f9;
+  --base-text-color: #37327b;
+
+  background-color: var(--base-bg-color);
+  color: var(--base-text-color);
+  padding: var(--list-item-padding);
+
+  border: 3px solid var(--base-bg-color);
+  border-radius: var(--list-item-corner-radius);
+  margin: var(--list-item-margin);
+}
