Commit 07de694

authored

chapter 2 - 2.4 examples uploaded

1 parent cc13a12 commit 07de694Copy full SHA for 07de694

File tree

+88

-0

lines changed

+88

-0

lines changed

Lines changed: 41 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,41 @@`
	`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>2.4-css-var-demo-cascading.html</title>`
	`10`	`+`
	`11`	`+ <link rel="stylesheet" href="2.4-style-css-var-demo-cascading.css">`
	`12`	`+`
	`13`	`+ </head>`
	`14`	`+`
	`15`	`+ <body>`
	`16`	`+`
	`17`	`+ <div class="container">`
	`18`	`+`
	`19`	`+ <h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>`
	`20`	`+`
	`21`	`+ <h2 class="subheading-text" id="subHeadingText">2.4 - CSS Variable Cascading</h2>`
	`22`	`+`
	`23`	`+ <div class="red-container">`
	`24`	`+ red-container -> Hover to enlarge Blue! +++`
	`25`	`+`
	`26`	`+ <div class="green-container">`
	`27`	`+ green-container -> Hover to enlarge Blue! ++`
	`28`	`+`
	`29`	`+ <div class="blue-container">`
	`30`	`+ <span class="heading-text">blue-container -> Hover to enlarge Me! +</span>`
	`31`	`+ </div>`
	`32`	`+`
	`33`	`+ </div>`
	`34`	`+`
	`35`	`+ </div>`
	`36`	`+`
	`37`	`+ </div>`
	`38`	`+`
	`39`	`+ </body>`
	`40`	`+`
	`41`	`+</html>`

Lines changed: 47 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,47 @@`
	`1`	`+:root {`
	`2`	`+ --main-font-family: Verdana;`
	`3`	`+ --main-red-color: #dc3545;`
	`4`	`+ --main-green-color: #28a745;`
	`5`	`+ --main-blue-color: #007bff;`
	`6`	`+ --main-padding: 20px 50px 0px 0px;`
	`7`	`+ --main-line-height: 3;`
	`8`	`+ --main-text-decoration: underline;`
	`9`	`+}`
	`10`	`+`
	`11`	`+body {`
	`12`	`+ font-family: var(--main-font-family);`
	`13`	`+}`
	`14`	`+`
	`15`	`+.red-container {`
	`16`	`+ background-color: var(--main-red-color); padding: var(--main-padding); line-height: var(--main-line-height);`
	`17`	`+ text-align: right; cursor: pointer;`
	`18`	`+}`
	`19`	`+`
	`20`	`+.green-container {`
	`21`	`+ background-color: var(--main-green-color); padding: var(--main-padding); line-height: var(--main-line-height);`
	`22`	`+}`
	`23`	`+`
	`24`	`+.blue-container {`
	`25`	`+ background-color: var(--main-blue-color); padding: var(--main-padding);`
	`26`	`+ line-height: var(--main-line-height); color: #ffffff;`
	`27`	`+}`
	`28`	`+`
	`29`	`+.red-container div .heading-text {`
	`30`	`+ transition: all 0.2s ease-in;`
	`31`	`+}`
	`32`	`+`
	`33`	`+.heading-text {`
	`34`	`+ font-size: var(--font-size, 12px); font-weight: bold;`
	`35`	`+}`
	`36`	`+`
	`37`	`+.blue-container:hover {`
	`38`	`+ --font-size: 24px;`
	`39`	`+}`
	`40`	`+`
	`41`	`+.green-container:hover {`
	`42`	`+ --font-size: 36px;`
	`43`	`+}`
	`44`	`+`
	`45`	`+.red-container:hover {`
	`46`	`+ --font-size: 48px;`
	`47`	`+}`

Comments

(0)