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 cc13a12

Browse files
chapter 2 - 2.4 uploaded
chapter 2 - 2.4 uploaded
1 parent 88955d6 commit cc13a12

File tree

1 file changed

+133
-3
lines changed

1 file changed

+133
-3
lines changed

‎README.md

Lines changed: 133 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,9 @@ Topics included/covered
6767

6868
2. [CSS Variables Practical Demo Examples](#2-css-variables-practical-demo-examples)
6969
- 2.1. [Managing Colors-Theme](#21-managing-colors-theme)
70-
- 2.2. [Hover with Fallback support](#22-hover-with-fallback-support)
70+
- 2.2. [Hover with Fallback support](#22-hover-with-fallback-support)
7171
- 2.3. [Hover with Transform Transition Amimation](#23-hover-with-Transform-transition-amimation)
72+
- 2.4. [CSS variables Cascading](#24-css-variables-cascading)
7273

7374
3. [CSS Variables Resources](#3-css-variables-resources)
7475

@@ -134,7 +135,6 @@ const fullName = firstName + lastName
134135

135136
<body>
136137

137-
138138
<!-- include external JavaScript - body section -->
139139
<script src="./1.1-script.js"></script>
140140

@@ -1289,6 +1289,137 @@ body {
12891289
</figure>
12901290
</p>
12911291

1292+
2.4. CSS variables Cascading
1293+
---------------------
1294+
1295+
> **Syntax & Example**: `2.4-css-var-demo-cascading.html`
1296+
1297+
```html
1298+
<!DOCTYPE html>
1299+
<html lang="en">
1300+
1301+
<head>
1302+
1303+
<meta charset="UTF-8">
1304+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1305+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
1306+
<title>2.4-css-var-demo-cascading.html</title>
1307+
1308+
<link rel="stylesheet" href="2.4-style-css-var-demo-cascading.css">
1309+
1310+
</head>
1311+
1312+
<body>
1313+
1314+
<div class="container">
1315+
1316+
<h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
1317+
1318+
<h2 class="subheading-text" id="subHeadingText">2.4 - CSS Variable Cascading</h2>
1319+
1320+
<div class="red-container">
1321+
red-container -> Hover to enlarge Blue! +++
1322+
1323+
<div class="green-container">
1324+
green-container -> Hover to enlarge Blue! ++
1325+
1326+
<div class="blue-container">
1327+
<span class="heading-text">blue-container -> Hover to enlarge Me! +</span>
1328+
</div>
1329+
1330+
</div>
1331+
1332+
</div>
1333+
1334+
</div>
1335+
1336+
</body>
1337+
1338+
</html>
1339+
```
1340+
1341+
> **Syntax & Example**: `2.4-style-css-var-demo-cascading.css`
1342+
1343+
```css
1344+
:root {
1345+
--main-font-family: Verdana;
1346+
--main-red-color: #dc3545;
1347+
--main-green-color: #28a745;
1348+
--main-blue-color: #007bff;
1349+
--main-padding: 20px 50px 0px 0px;
1350+
--main-line-height: 3;
1351+
--main-text-decoration: underline;
1352+
}
1353+
1354+
body {
1355+
font-family: var(--main-font-family);
1356+
}
1357+
1358+
.red-container {
1359+
background-color: var(--main-red-color);
1360+
padding: var(--main-padding);
1361+
line-height: var(--main-line-height);
1362+
text-align: right;
1363+
cursor: pointer;
1364+
}
1365+
1366+
.green-container {
1367+
background-color: var(--main-green-color);
1368+
padding: var(--main-padding);
1369+
line-height: var(--main-line-height);
1370+
}
1371+
1372+
.blue-container {
1373+
background-color: var(--main-blue-color);
1374+
padding: var(--main-padding);
1375+
line-height: var(--main-line-height);
1376+
color: #ffffff;
1377+
}
1378+
1379+
.red-container div .heading-text {
1380+
transition: all 0.2s ease-in;
1381+
}
1382+
1383+
.heading-text {
1384+
font-size: var(--font-size, 12px);
1385+
font-weight: bold;
1386+
}
1387+
1388+
.blue-container:hover {
1389+
--font-size: 24px;
1390+
}
1391+
1392+
.green-container:hover {
1393+
--font-size: 36px;
1394+
}
1395+
1396+
.red-container:hover {
1397+
--font-size: 48px;
1398+
}
1399+
```
1400+
1401+
<p>
1402+
<figure>
1403+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.4.1-css-var-demo-cascading-default-output.png" alt="CSS Variables Demo - Cascading default output" title="CSS Variables Demo - Cascading default output" width="1000" border="2" />
1404+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.4.1 - CSS Variables Demo - Cascading default output </figcaption>
1405+
</figure>
1406+
</p>
1407+
1408+
<p>
1409+
<figure>
1410+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.4.2-css-var-demo-cascading-green-hover.png" alt="CSS Variables Demo - Cascading Green hover output" title="CSS Variables Demo - Cascading Green hover output" width="1000" border="2" />
1411+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.4.2 - CSS Variables Demo - Cascading Green hover output </figcaption>
1412+
</figure>
1413+
</p>
1414+
1415+
1416+
<p>
1417+
<figure>
1418+
&nbsp;&nbsp;&nbsp; <img src="_images-css-variables/2.4.3-style-css-var-demo-cascading.png" alt="Style CSS Variables Demo - Cascading" title="Style CSS Variables Demo - Cascading" width="1000" border="2" />
1419+
<figcaption>&nbsp;&nbsp;&nbsp; Image 2.4.3 - Style CSS Variables Demo - Cascading </figcaption>
1420+
</figure>
1421+
</p>
1422+
12921423
3 CSS Variables Resources
12931424
=====================
12941425

@@ -1297,4 +1428,3 @@ body {
12971428
> **Reference:** - https://www.w3schools.com/css/css3_variables.asp
12981429
12991430
> **Reference:** - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
1300-

0 commit comments

Comments
(0)

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