Variables function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Variables function</title>
<style>
/* Global variables (:root selector) */
:root {
--color1: green;
--color2: orange;
}
div {
float:left;
text-align: center;
padding: 10px;
width: 23%;
height: auto;
}
.colorfirst {
background-color: var(--color1);
color:var(--color2);
}
.colorsecond {
background-color: var(--color2);
color:var(--color1);
}
/* Local Varible inside the element selector */
p {
--color1: blue;
color: var(--color1);
clear: both;
}
</style>
</head>
<body>
<!--
var() function is used to insert the value of a CSS variable.
SYNTAX: var(--name, value).
name - Required. The variable name (must start with two dashes).
value - Optional. The fallback value (used if the variable is not found).
Global variables : can be accessed/used through the entire document.
- To create a variable with global scope, declare it inside the
:root selector
:root selector matches the document's root element
Local variables : can be used only inside the selector where it is declared.
-->
<h1>Demo: Variables function</h1>
<section class="color1color2">
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
<div class="colorsecond">COLOR1</div>
<div class="colorfirst">COLOR2</div>
</section>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum alias sint recusandae, itaque distinctio, aut adipisci minus deleniti qui, ratione consequuntur sapiente beatae a optio nihil maiores vero placeat reprehenderit at accusamus cupiditate asperiores illum error exercitationem? Expedita amet magni suscipit deserunt nulla officia reprehenderit, explicabo, exercitationem illo, veritatis eius veniam facilis dolore? Quia dolorem earum tempore possimus illum, ratione est odit delectus laborum! Dolore ad ratione deserunt nisi deleniti consequuntur laborum delectus modi porro distinctio dolor nostrum recusandae cum necessitatibus quae esse reiciendis quis, sunt praesentium doloribus impedit. Rerum alias consequuntur cupiditate libero veniam atque voluptate iusto, totam corrupti reiciendis distinctio illum minus molestias voluptatibus recusandae doloribus, deleniti explicabo culpa excepturi exercitationem sapiente mollitia eius quam! Vero mollitia amet sapiente, repudiandae corporis quidem consectetur ullam laboriosam soluta ipsum fuga unde nam consequatur porro facere quod voluptatum ut quam numquam a, suscipit commodi nobis. Consectetur quibusdam, repellendus facere consequatur minus praesentium asperiores ad voluptate eaque, dolorum veniam dicta cupiditate modi necessitatibus porro maxime doloremque, dignissimos impedit tempora odio ratione est ipsam. Praesentium possimus, doloribus veritatis ducimus necessitatibus hic quod impedit! Sed tempore numquam eligendi dolor voluptates dolorum officiis debitis magnam maxime neque, libero recusandae, esse quis? Quas delectus sit magni.</p>
</body>
</html>