02-css-course-2026/baqi.html at main · developer-junaid/02-css-course-2026 · 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
<html>
    <head>
        <title>CSS</title>
        <style>
           h2{
            color:chocolate
           }

           #mera-h2{
            color:blue
           }

           #mera-para{
            font-size: 10px;
           }

        .purple-li{
            color: blueviolet;
        }

        #margin-box{
            background: black;color:white; width: 300px;height:300px; margin-top:100px; padding-left:30px
        }

        </style>
    </head>

    <body>
        <!--
        - tag selector
        - color
        - background-color
        - inline styles
        - internal style
        - id selector
        - inline style override karyga, internal styles ko
        - font size
        - font weight
        - text-align
        - class selector
        - border
        - margin
        - padding
        - table, tr, td, th, thead, tbody
        - Flexbox
        - External CSS
        -->

        <!-- Inline style -->
        <h1 style="background-color:black;color:green">Isko color karna hai</h1>


        <!-- Internal Style -->
        <h2 >h1 se choti heading</h2>
        <h2>Dusra h2</h2>
        <h2 id="mera-h2"> mera h2</h2>

        <!-- Font sizes, text align -->
         <div>
            <p style="font-size:60px">Font size large</p>
            <p id="mera-para">Mera Para chota krdo font size</p>
            <p style="font-weight: 800">Wazan wala font</p>
             <p style="font-weight: 600">Wazan wala font</p>
            <p style="text-align:right">right wala font</p>
            <p style="text-align:center">center wala font</p>
         </div>

         <!-- Class -->
         <div>
            <ol>
                <li class="purple-li">Student 1 </li>
                <li class="purple-li">Student 2</li>
                <li class="purple-li">Student 3</li>
                <li>Not a student</li>
            </ol>
         </div>

         <!-- Border -->
          <div>
            <div style="border: 1px solid black">
                Border wala box
            </div>
            <br>
               <div style="border: 1px dashed black">
                Dashed Border wala box
            </div>
             <br>
               <div style="border: 1px dotted black">
                Dotted Border wala box
            </div>
          </div>

          <!-- Margins, Paddings -->
           <br>
           <br>
           <div id="margin-box">
                Margin wala box
           </div>

           <!-- Table -->
           <table border="1" width="400px">
                <thead>
                    <tr>
                     <th>ID</td>
                     <th>Name</td>
                     <th>Email</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>01</td>
                        <td>Junaid</td>
                        <td>junaid@gmail.com</td>
                    </tr>
                    <tr>
                        <td>02</td>
                        <td>Bilal</td>
                        <td>bilal@gmail.com</td>
                    </tr>
                     <tr>
                        <td>03</td>
                        <td>Shehzor</td>
                        <td>shehzor@gmail.com</td>
                    </tr>
                </tbody>
           </table>

           <!-- Flex Box-->
           <div>

           </div>

    </body>
</html>