CSS-Notes-CODES/Level1_4.html at main · SHROUDSOURAV/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
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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 1</title>
    <link rel = "stylesheet" href = "./Level1_4.css">
</head>
<body>
    <!-- text-properties to learn mentioned below -->
    <!-- font-weight => makes the text lighter or bolder baseed on the range value (100 - 900) -->
    <!-- Minimum = 100(lighest) and Maximum = 900(boldest) -->
    <!-- We are going to apply the font-weight css property on the below headings for visual understanding -->

    <h1>Heading1</h1>
    <h2>Heading2</h2>
    <h3>Heading3</h3>
    <h4>Heading4</h4>
    <h5>Heading5</h5>
    <h6>Heading6</h6>

    <!-- Now we are going to learn about font-family or font styling -->
    <!-- font-family consists of various designs to write a text ...cursive, captial etc... -->
    <!-- below inline css styling done to demonstate the font-family -->

    <!-- some font-family are => arial,roboto etc... -->
    <p style = "font-family: Arial, Helvetica, sans-serif;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque sequi a iste deserunt reprehenderit quibusdam eius id, tempora maxime cum est sapiente nam ipsum, commodi eos dolore debitis quasi nihil!</p>

    <p style = "font-family:roboto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga incidunt sapiente vero quisquam. Impedit natus est saepe dicta vitae incidunt?</p>

    <!-- Units in CSS  -->
    <!-- pixels and inch -->
    <!-- mostly pixels(px) are used in CSS  -->
    <!-- checkout style4.css file which shows font-size changing using css -->
    <p id = "one">para1</p>
    <p id = "two">para1</p>
    <p id = "three">para1</p>
    <p id = "four">para1</p>


    <!-- for keeping distance between lines in paragraph we need to increase distance -->
    <!-- we used line-height property to increase paragraph line distances -->

    <p id = "five">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus perspiciatis repellendus nesciunt accusamus deserunt consequatur ipsum rem minima, possimus consectetur voluptatum explicabo? Aperiam corporis ex quisquam atque, obcaecati cum possimus!</p>
</body>
</html>