CSS/CSS_Level_1.html at main · Muhammad-Sufyan-3051/CSS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Level_1</title>
    <link rel="stylesheet" href="Level_1style.css">
    <!-- <style>
        button{
            background-color: blue;
        }
    </style> -->
</head>
<body>
    <div id="box">
        <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Inventore impedit illo eligendi molestias modi dolorum dolorem
        id ea nostrum recusandae ratione ducimus et expedita perferendis
        accusantium distinctio, voluptas voluptatum magnam.
        </p>
    </div>

    <h1 class="heading">I am learning now CSS</h1>
    <h2 class="heading">I am learning now CSS</h2>
    <h3 class="heading">I am learning now CSS</h3>

    <button>
        Click here!
    </button>

        <h1 id="Heading">Heading</h1>
        <p id="box2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ex magni eligendi doloribus consequatur! Distinctio, dolore vel? Quo, quas exercitationem. Distinctio quidem consectetur illo cumque deserunt in eaque ratione iste.
            Reprehenderit a explicabo modi veritatis mollitia iusto quae qui sit blanditiis tenetur est quo non suscipit quis tempora laudantium corporis repudiandae sint illum facilis reiciendis, corrupti cupiditate in eos! Eius.
            Necessitatibus sequi cumque velit repellat praesentium accusamus exercitationem dolore aut officia nemo voluptatem dolor, aperiam tenetur pariatur facere consequuntur magnam laborum voluptates. Omnis ut voluptatibus culpa nihil, explicabo assumenda! In.
            Sapiente ipsam nesciunt error odit cum ea eum ut dolorum, excepturi quibusdam officia, iste mollitia quo suscipit unde et iusto aspernatur. Obcaecati a ad et rerum debitis sunt dolor nobis!
            Consectetur architecto ullam repudiandae, excepturi ratione blanditiis delectus. Eveniet tenetur excepturi numquam perferendis. Aperiam libero soluta officia? Reiciendis incidunt accusantium quam placeat iusto voluptatibus aut facilis fugiat commodi nemo. Harum!
            Ratione dolore doloremque vitae commodi iste! Similique molestias ex exercitationem delectus iure pariatur libero voluptatibus perferendis natus nesciunt labore tempore id veniam necessitatibus, excepturi dolorem distinctio, praesentium tenetur quaerat? Inventore.
            Dignissimos autem soluta accusantium quo tempore, cumque deserunt unde laborum fuga consequuntur ab, dicta quia, esse saepe? Sunt natus repellendus et! Aspernatur rem perspiciatis sed ex modi illum harum est.
            Nisi dicta animi aperiam accusantium consequuntur eos beatae illum sed inventore cumque, rerum distinctio voluptatibus ad, amet tempora? Dolorem optio fugit doloribus ipsum laboriosam suscipit officia provident molestiae saepe. Aut.
            Reprehenderit porro dolor, veritatis saepe numquam, quae aperiam nobis, officia veniam neque hic dolores ex. Quas reiciendis praesentium perspiciatis quibusdam ullam ipsum, totam sapiente explicabo fuga nihil modi atque aut.
            Amet sint est totam perferendis corrupti eum officiis ipsam suscipit repellendus explicabo cum harum dolor libero rerum ad provident, pariatur ab? Eaque consequatur facilis quibusdam sequi odit blanditiis eligendi ipsa?
        </p>
        <a href="https://www.google.com/">Click here!</a>

        <h1 id="h1">Style Sheet</h1>
        <h1 id="h2">Style Sheet</h1>
        <h1 id="h3">Style Sheet</h>
        <h1 id="h4">Style Sheet</h1>

        <p id="p1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Maiores, quod amet quisquam ipsam quasi repellat hic quia possimus
        dolores nam quae nulla ad laboriosam pariatur debitis ullam cum
        reiciendis repudiandae.
        </p>

        <p id="p2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maiores, quod amet quisquam ipsam quasi repellat hic quia possimus
            dolores nam quae nulla ad laboriosam pariatur debitis ullam cum
            reiciendis repudiandae.
            </p>

            <h1 id="first">Heading</h1>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Vitae, natus ex sit dolor placeat ut facere odio reiciendis
                quasi labore molestias, qui id possimus accusamus! Quidem laudantium
                iure assumenda qui.
            </p>

            <div id="outer">
                outer
                <div id="inner">
                    inner
                </div>
            </div>
</body>
</html>