Commit 741e9d7

authored

chapter 1 - 1.5.2 - examples uploaded

1 parent f641912 commit 741e9d7Copy full SHA for 741e9d7

File tree

+86

-2

lines changed

+86

-2

lines changed

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	/* CSS selectors must set/defined/declared inside any root selector like `:root` or `body`, so that these variables exists globally/entire document to use */
`2`	`2`
`3`	`3`	`:root {`
`4`		`- /* global scoped variabed */`
	`4`	`+ /* global scoped variables */`
`5`	`5`	`--font-face: Arial;`
`6`	`6`	`--base-bg-color: #66f969;`
`7`	`7`	`--base-text-color: #327b34;`

Lines changed: 1 addition & 1 deletion

Lines changed: 39 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,39 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+ <head>`
	`5`	`+`
	`6`	`+ <meta charset="UTF-8">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <meta http-equiv="X-UA-Compatible" content="ie=edge">`
	`9`	`+ <title>1.5.2.1-define-variables-local.html</title>`
	`10`	`+`
	`11`	`+ <link rel="stylesheet" href="1.5.2.1-style-define-variables-local.css">`
	`12`	`+`
	`13`	`+ </head>`
	`14`	`+`
	`15`	`+ <body>`
	`16`	`+`
	`17`	`+ <div class="container">`
	`18`	`+`
	`19`	`+ <div class="sub-container">`
	`20`	`+`
	`21`	`+ <h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using CSS Variables</h1>`
	`22`	`+`
	`23`	+ <p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>
	`24`	`+`
	`25`	`+ <h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables</h2>`
	`26`	`+`
	`27`	`+ <ul>`
	`28`	`+ <li>List Item 1 - Define variables in any of root elements </li>`
	`29`	`+ <li>List Item 2 - Call variables for required ids/classes/elements</li>`
	`30`	`+ <li>List Item 3 - Verify variables properties reflect properly</li>`
	`31`	`+ </ul>`
	`32`	`+`
	`33`	`+ </div>`
	`34`	`+`
	`35`	`+ </div>`
	`36`	`+`
	`37`	`+ </body>`
	`38`	`+`
	`39`	`+</html>`

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+:root {`
	`2`	`+ /* global scoped variables */`
	`3`	`+ --font-face: Arial;`
	`4`	`+ --base-bg-color: #f66969;`
	`5`	`+ --base-text-color: #ffffff;`
	`6`	`+ --base-padding: 30px 10px;`
	`7`	`+`
	`8`	`+ --list-item-margin: 10px;`
	`9`	`+ --list-item-padding: 20px 10px;`
	`10`	`+ --list-item-corner-radius: 5px;`
	`11`	`+}`
	`12`	`+`
	`13`	`+body {`
	`14`	`+ font-family: var(--font-face);`
	`15`	`+}`
	`16`	`+`
	`17`	`+.heading-text {`
	`18`	`+ background-color: var(--base-bg-color);`
	`19`	`+ color: var(--base-text-color);`
	`20`	`+ padding: var(--base-padding);`
	`21`	`+}`
	`22`	`+`
	`23`	`+.subheading-text {`
	`24`	`+ /* local scoped variables */`
	`25`	`+ --base-bg-color: #66f969;`
	`26`	`+ --base-text-color: #327b34;`
	`27`	`+`
	`28`	`+ background-color: var(--base-bg-color);`
	`29`	`+ color: var(--base-text-color);`
	`30`	`+ padding: var(--base-padding);`
	`31`	`+}`
	`32`	`+`
	`33`	`+ul > li {`
	`34`	`+ /* local scoped variables */`
	`35`	`+ --base-bg-color: #6696f9;`
	`36`	`+ --base-text-color: #37327b;`
	`37`	`+`
	`38`	`+ background-color: var(--base-bg-color);`
	`39`	`+ color: var(--base-text-color);`
	`40`	`+ padding: var(--list-item-padding);`
	`41`	`+`
	`42`	`+ border: 3px solid var(--base-bg-color);`
	`43`	`+ border-radius: var(--list-item-corner-radius);`
	`44`	`+ margin: var(--list-item-margin);`
	`45`	`+}`

Comments

(0)