CSS-Notes-CODES/Level2_1.html at main · ghostware0x00/CSS-Notes-CODES · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning CSS Level 2</title>
    <link rel = "stylesheet" href = "./Level2_1.css">
</head>
<body>
    <!-- during inspect of a webpage  -->
    <!-- orange part => margin -->
    <!-- blue part => content -->
    <h1>Heading</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero illum ratione distinctio reiciendis aspernatur placeat accusamus eos maxime ad tempora!</p>
    <button>Click me!!!</button><br>

    <!-- going to learn about box models using CSS -->
    <!-- height, boder, width, margin -->
    <!-- upon inspecting h1 it will show 120 x 70   -->
    <!-- 120 being width  -->
    <!-- 70 being height  -->
    <!-- so the dimension is calculated by width x height  -->
    <div>
        this is a div.
    </div>

    <!-- now lets checkout what border property does -->
    <!-- there are three elements in border -->
    <!-- border-width, border-style, border-color -->

    <h2>Heading 2</h2>
</body>
</html>