Learning-Front-End-Development/styling_text.html at main · tech-sap/Learning-Front-End-Development · 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
<html>
    <head>
        <title>Styling Text</title>
        <link href="styling_text.css" rel="stylesheet" type="text/css">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    </head>
    <body>
        <img id="cover-pic" src="https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd" alt="Image not found in the given image address">
        <h1>Styling Text</h1>
        <h2>text-align:</h2>
        <p>
        justify - all the text are adjusted along the every free space<br>
        center - text are cetered on the screen<br>
        right - text are aligned to right<br>
        left - text are aligned to left
        </p>

            <h2>Text-Color:</h2>
        <p>
            color : give color
        </p>

            <h2>font-size:</h2>
       <p>
            you can specify the size of the text
        </p>

            <h2>font-style:</h2>
        <p>
            italic
        </p>


        <h2>font-weight:</h2>
        <p>
            thickness of the text
        </p>

            <h2>text-decoration:</h2>
        <p>(e.g: to remove the underlines from links)<br>
            underline : under line the text<br>
            overline : line over the text <br>
            line-through : line strike the text<br>
            none : no line
        </p>


            <h2>text-transform:</h2>
        <p>
            to make our text uppercase, lowercase, capitalize<br>

            : uppercase; <br>
            : lowercase;<br>
            : capitalize;<br>
        </p>

            <h2>letter-spacing:</h2>
        <p>
            space between the letters<br>
            : give values in both -ve(decrease) and +ve(increase)
        </p>

            <h2>word-spacing:</h2>
        <p>
            space between the words <br>
            : give values in both -ve(overlapping words) and +ve (words at distant)
        </p>

            <h2>line-height: </h2>
        <p>
            spaces between the lines
            has default value 1
        </p>
            <h2>font-family:</h2>
        <p>
            you can search for online google fonts then you can see lot of awesome fonts <br>

            select the fonts and get the font name and link to the font<br>

            you can customize the fonts too.<br>

            put the link to the font in <b>head</b> tag using <b>link</b> tag and then assign the name of the font to the font-family
        </p>
        <p style="color:black">
        <b style="color: red">Note :</b>Do not rush when you just started learning.Use
        <a href="https://www.w3schools.com/css" target="blank_">W3Schools</a> to hone your CSS skills.
        </p>
        </body>
</html>