Commit 4545542

authored

chapter 2 - 2.1 examples uploaded

1 parent 08c4b02 commit 4545542Copy full SHA for 4545542

File tree

+68

-0

lines changed

+68

-0

lines changed

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`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.1-css-var-demo-managing-colors-themes.html</title>`
	`10`	`+`
	`11`	`+ <link rel="stylesheet" href="2.1-style-css-var-demo-managing-colors-themes.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.1 - Managing Colors Themes</h2>`
	`22`	`+`
	`23`	`+ <article class="info-text">`
	`24`	`+ The benefits of using variables in CSS are not that much different than from those of using variables in any other programming languages (define/initiate once and use when required). <br/> <br/>`
	`25`	`+ The beauty of variables is that they let you store your valuables/properties in one place and update it on the fly for several various purposes. <br/>`
	`26`	`+ </article>`
	`27`	`+`
	`28`	`+ <footer class="footer-text">This is footer Text</footer>`
	`29`	`+`
	`30`	`+ </div>`
	`31`	`+`
	`32`	`+ </body>`
	`33`	`+`
	`34`	`+</html>`

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+:root {`
	`2`	`+ /* define/set variables */`
	`3`	`+ --main-font-family: Verdana;`
	`4`	`+ --main-theme-color: #ff7f50;`
	`5`	`+ --main-line-height: 2;`
	`6`	`+}`
	`7`	`+`
	`8`	`+body {`
	`9`	`+ font-family: var(--main-font-family);`
	`10`	`+ text-align: center;`
	`11`	`+}`
	`12`	`+`
	`13`	`+.top-heading-text {`
	`14`	`+ /* refer/call variables */`
	`15`	`+ background-color: var(--main-theme-color);`
	`16`	`+ line-height: var(--main-line-height);`
	`17`	`+}`
	`18`	`+`
	`19`	`+.subheading-text {`
	`20`	`+ color: var(--main-theme-color);`
	`21`	`+}`
	`22`	`+`
	`23`	`+.info-text {`
	`24`	`+ color: var(--main-theme-color);`
	`25`	`+ margin: 0 auto;`
	`26`	`+ max-width: 70%;`
	`27`	`+ margin-bottom: 2em;`
	`28`	`+}`
	`29`	`+`
	`30`	`+.footer-text {`
	`31`	`+ background-color: var(--main-theme-color);`
	`32`	`+ line-height: var(--main-line-height);`
	`33`	`+ font-size: 0.75em;`
	`34`	`+}`

Comments

(0)