-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss_function_var.html
120 lines (104 loc) · 3.35 KB
/
css_function_var.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
:root {
--country: 'USA';
--source: 'Google';
--font-color-black: black;
--theme-color-white: #ffffff;
--theme-color-aqua: aqua;
}
* {
margin: 10px;
padding: 10px;
}
body {
width: 60%;
margin: auto;
font-family: 'Courier New', Courier, monospace;
text-transform: uppercase;
background-color: #f0f0f0;
}
h1 {
text-align: center;
}
.theme {
box-shadow: 0 0 2px black;
border-radius: 5px;
color: var(--font-color-black);
background-color: var(--theme-color-white, lightgreen);
}
.theme__heading::after {
content: ' [' var(--country, 'BANGLADESH') '] ';
}
.theme__content {
background-color: var(--theme-color-white, lightgreen);
}
.theme__content--green {
--theme-color-white: var(--theme-color-aqua, green);
background-color: var(--theme-color-white, green);
}
.theme__foot-note {
background-color: var(--theme-color-white, lightgreen);
}
.theme__foot-note::after {
content: ' (' var(--source, 'ChatGPT') ') ';
}
</style>
</head>
<body>
<h1>CSS Function : Variable</h1>
<div class="theme theme--lightgreen">
<h3 class="theme__heading">Morning Routine</h3>
<p class="theme__description">Author: Jane Doe</p>
<div class="theme__date">Published: July 10, 2024</div>
<p class="theme__content theme__content--green">
Today, I started my day with a refreshing jog in the park. The
cool morning breeze and chirping birds were a perfect start to
my day.
</p>
<p class="theme__foot-note">
Note: Consistency is key to maintaining a healthy lifestyle.
</p>
</div>
<div class="theme theme--lightgreen">
<h3 class="theme__heading">Work Accomplishments</h3>
<p class="theme__description">Author: Jane Doe</p>
<div class="theme__date">Published: July 10, 2024</div>
<p class="theme__content theme__content--green">
At work, I successfully completed the project I've been working
on for weeks. The client was thrilled with the results.
</p>
<p class="theme__foot-note">Note: Hard work always pays off.</p>
</div>
<div class="theme theme--lightgreen">
<h3 class="theme__heading">Evening Relaxation</h3>
<p class="theme__description">Author: Jane Doe</p>
<div class="theme__date">Published: July 10, 2024</div>
<p class="theme__content theme__content--green">
I ended my day by reading a few chapters of my favorite book and
unwinding with a cup of herbal tea.
</p>
<p class="theme__foot-note">
Note: Taking time for yourself is important for mental health.
</p>
</div>
</body>
</html>
<!--
# NOTE 01 :
variable is a CSS custom property.
variable must be defined inside a selector.
# NOTE 02 :
local scope means that the variable is only available to the selector where it is declared.
useful if we want to reuse a value in multiple places within the same selector.
or if we want to avoid polluting the global namespace with custom properties.
# NOTE 03 :
global scope means that the variable is available to all selectors in the style sheet.
useful if we want to reuse a value in multiple selectors.
or if you want to make it easy to change the value of the variable.
-->