Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 87be2cb

Browse files
chapter 1 - 1.7 examples uploaded
chapter 1 - 1.7 examples uploaded
1 parent 37be2bc commit 87be2cb

5 files changed

+98
-2
lines changed

‎_examples-css-variables/1.5.1.2-define-convert-variables-global-blue-theme.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<div class="sub-container">
2020

21-
<h1 class="top-heading-text" id="topHeadingText">Create a Green Theme with CSS variables</h1>
21+
<h1 class="top-heading-text" id="topHeadingText">Convert a Green Theme to Blue Theme with CSS variables</h1>
2222

2323
<h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using CSS Variables</h1>
2424

‎_examples-css-variables/1.5.2.1-define-variables-local.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using
2222

2323
<p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>
2424

25-
<h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables</h2>
25+
<h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a local / locally scoped CSS Variables</h2>
2626

2727
<ul>
2828
<li>List Item 1 - Define variables in any of root elements </li>
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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.7.1-css-variables-javascript-interaction.html</title>
10+
11+
<link rel="stylesheet" href="1.7.1-style-variables-javascript-interaction.css">
12+
13+
</head>
14+
15+
<body>
16+
17+
<div class="container">
18+
19+
<div class="sub-container">
20+
21+
<h1 class="top-heading-text" id="topHeadingText">Get and Set CSS variables values with JavaScript</h1>
22+
23+
<h1 class="heading-text" id="mainHeadingText">1.5 Declaring CSS Variables/Using CSS Variables</h1>
24+
25+
<p class="para-text" id="mainParaText">`Variables` are one of the most fundamental and important concepts in any programming language</p>
26+
27+
<h2 class="subheading-text" id="subHeadingText">1.5 - 1.5.1. Declaring a global / globally scoped CSS Variables</h2>
28+
29+
<ul>
30+
<li>List Item 1 - Define variables in any of root elements </li>
31+
<li>List Item 2 - Call variables for required ids/classes/elements</li>
32+
<li>List Item 3 - Verify variables properties reflect properly</li>
33+
</ul>
34+
35+
</div>
36+
37+
</div>
38+
39+
<script src="./1.7.1-script-variables-javascript-interaction.js"></script>
40+
41+
</body>
42+
43+
</html>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
console.log('in 1.7.1-script-variables-javascript-interaction.js');
2+
3+
// get the root element
4+
var root = document.querySelector(':root');
5+
//console.log('root', root);
6+
7+
// get all the styles/CSSStyleDeclaration for root
8+
var rootStyles = getComputedStyle(root);
9+
console.log('rootStyles', rootStyles);
10+
11+
// get --base-bg-color variable value available inside root styles
12+
// var baseBgColor = rootStyles.getPropertyValue('--base-bg-color');
13+
// console.log('baseBgColor', baseBgColor);
14+
15+
root.style.setProperty('--base-bg-color', '#f66969') // red- #f66969; green - #66f969; blue- #6696f9;
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
:root {
2+
--font-face: Arial;
3+
--base-bg-color: #66f969;
4+
--base-text-color: #327b34;
5+
--base-padding: 30px 10px;
6+
7+
--list-item-margin: 10px;
8+
--list-item-padding: 20px 10px;
9+
--list-item-corner-radius: 5px;
10+
}
11+
12+
body {
13+
font-family: var(--font-face);
14+
}
15+
16+
.top-heading-text {
17+
color: var(--base-text-color);
18+
}
19+
20+
.heading-text {
21+
background-color: var(--base-bg-color);
22+
color: var(--base-text-color);
23+
padding: var(--base-padding);
24+
}
25+
26+
.subheading-text {
27+
background-color: var(--base-bg-color);
28+
color: var(--base-text-color);
29+
padding: var(--base-padding);
30+
}
31+
32+
ul > li {
33+
color: var(--base-text-color);
34+
padding: var(--list-item-padding);
35+
border: 3px solid var(--base-bg-color);
36+
border-radius: var(--list-item-corner-radius);
37+
margin: var(--list-item-margin);
38+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /