Css Variables
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Demo</title>
<style>
/* GLOBAL VARIABLES */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--spacing: 16px;
}
body {
font-family: Arial, sans-serif;
color: var(--text-color);
padding: var(--spacing);
}
.card {
background: var(--primary-color);
color: white;
padding: var(--spacing);
margin-bottom: var(--spacing);
border-radius: 8px;
}
.card.secondary {
background: var(--secondary-color);
}
/* LOCAL VARIABLE */
.box {
--box-color: orange;
background: var(--box-color);
padding: 20px;
margin-top: 20px;
}
/* THEME SWITCH (dark) */
.dark-theme {
--primary-color: black;
--text-color: white;
}
</style>
</head>
<body>
<h1>CSS Variables</h1>
<div class="card">Primary Card</div>
<div class="card secondary">Secondary Card</div>
<div class="box">This box uses a local variable</div>
<div class="dark-theme" style="margin-top: 20px; padding: 10px;">
<div class="card">Dark Theme Card</div>
</div>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Variables Demo</title>
<style>
/* GLOBAL VARIABLES */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--text-color: #333;
--spacing: 16px;
}
body {
font-family: Arial, sans-serif;
color: var(--text-color);
padding: var(--spacing);
}
.card {
background: var(--primary-color);
color: white;
padding: var(--spacing);
margin-bottom: var(--spacing);
border-radius: 8px;
}
.card.secondary {
background: var(--secondary-color);
}
/* LOCAL VARIABLE */
.box {
--box-color: orange;
background: var(--box-color);
padding: 20px;
margin-top: 20px;
}
/* THEME SWITCH (dark) */
.dark-theme {
--primary-color: black;
--text-color: white;
}
</style>
</head>
<body>
<h1>CSS Variables</h1>
<div class="card">Primary Card</div>
<div class="card secondary">Secondary Card</div>
<div class="box">This box uses a local variable</div>
<div class="dark-theme" style="margin-top: 20px; padding: 10px;">
<div class="card">Dark Theme Card</div>
</div>
</body>
</html>