chai_code_web-dev_cohoort/css.html at master · Waldjoy5/chai_code_web-dev_cohoort · 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css try for first time</title>
    <style>


        button{
            background-color:black;
        }

        p{
            color:aqua;
            font-size:50px;
        }


          .font-change{
            color:gray;
            background-color:pink;
            font-size:30px;
        }

        .button-change{
            border:12px solid gray;
            padding:40px;
            border-radius: 20px;
            font-size:50px;
            font-weight:bold;
            cursor: Pointer;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color:white;
            background-color: brown;

        }
        .change{
            border:12px solid gray;
            padding:40px;
            border-radius: 20px;
            font-size:50px;
            font-weight:bold;
            cursor: Pointer;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color:white;
            background-color: brown;

        }


        #bts-1{
            border:5px solid black;
            padding:20px;
            border-radius:30px;
            font-size:large;
            font-weight:bolder;
            cursor: pointer;
            color:green;
            background-color:transparent;
            ;

        }

        #size-change{
            font-size: 20px;
        }
        .block{
            display:block;
            border:12px solid gray;
            padding:40px;
            border-radius: 20px;
            font-size:50px;
            font-weight:bold;
            cursor: Pointer;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color:white;
            background-color: brown;

        }
        #inline{
            display:inline;
        }
        div{
            border:1px solid black;
            padding:5px;
        }
        .parent{
            display:flex;
        }

    </style>
</head>
<body>
    <p><b>Experimenting</b> with the css.</p>
    <p><i>css stand for cascading style sheet</i></p>
    <button style="background-color:green;color:aqua">Click me Please</button>
    <br>
    <button style="background-color:red;color:blue">Try it</button>
    <button style="color:yellow">Okay</button>
    <br>
    <h1 class="font-change">using class in css</h1>
    <button class="button-change">click IT</button>
    <button class="change">CLick IT V2</button>
    <h2>using ID in css</h2>
    <P id="size-change">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At ducimus voluptate error
     maiores enim voluptates aliquid quos modi. Culpa dicta dolore libero porro est eligendi quam animi quis,
    doloremque commodi illo accusantium laboriosam optio quia cumque provident, magnam deleniti exercitationem?</P>
    <button id="bts-1">ACCEPT</button>
    <br>
     <button id="bts-1">Accept v2</button>
     <br>
     <br>
     <br>
    <button class="block">verse</button>
    <button class="block">verse</button>
    <button class="block">verse</button>
    <p id="inline">i am ther</p>
    <p id="inline">&nbsp;&nbsp;i am ther</p>
    <p id="inline">&nbsp;&nbsp;i am ther</p>
    <br>
    <br>
    <br>
    <br>
   <div class="parent">
    <div class="child">ITEM1</div>
    <div class="child">ITEM2</div>
    <div class="child">ITEM3</div>
    <div class="child">ITEM4</div>
    </div>

</body>
</html>