Web-Development/12_variables.html at main · Shubham-py404/Web-Development · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>variables</title>
    <style>
        :root{
            /* like global variable */
            --color:blue;
            --seccolor:rgb(178, 178, 238);
            /* secondary color */
            /* we can use px length as global variable */
            --defop:22px;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .hu{
            /* local variable */
            --color:pink;
            background-color: var(--color, blue);
            /* blue add isliye kra hai kyoki agar variable not found then blue will be used  */
        }
        ul{
            display: flex;
        }
        .container{
            /* ab yeh color multiple times use ho skta hai isliye var and sec clor use kra  */
            background-color:var(--seccolor) ;
        }
        ul li{
            list-style: none;
            margin: 15px;
            padding: var(--defop)
        }
    </style>
</head>
<body>
    <div class="hu">
    <ul>
        <li>home</li>
        <li>about</li>
        <li>contact</li>
    </ul>
    </div>
    <div class="container">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perferendis ut quas expedita ipsam, ab culpa placeat sequi fugit nam accusamus cupiditate exercitationem impedit illo? Eligendi minima quae iste vitae alias reprehenderit repellat, labore, velit veniam modi itaque placeat nostrum aperiam dolores explicabo adipisci possimus?
    </div>
</body>
</html>