PracticeFolder/14-7-20121.html at main · SwifSys/PracticeFolder · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Css Text</h1>

    <h1>css color</h1>
    <p style="color: red">types of css color</p>

    <p style="color: #000">its a hexa way defined color</p>
    red green blue
    <p style="color: #fff">its a hexa way defined color</p>
    <p style="color: rgb(0, 60, 180)">its a hexa way defined color</p>
    <p style="color: #235">its a hexa way defined color</p>
    <p style="color: rgb(156, 139, 139)">its a hexa way defined color</p>

    <h1>text-alingnment</h1>
    <p style="text-align: left">text text-alingnment</p>
    <p style="text-align: right">text text-alingnment</p>
    <p style="text-align: center">text text-alingnment</p>
    <p
      style="
        text-align: justify;
        height: 200px;
        width: 500px;
        border: 1px solid;
      "
    >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi ullam
      illum quaerat vero nesciunt nam sunt hic, natus tenetur, rem dolor.
      Debitis veritatis inventore voluptatem accusamus iure quae sunt corrupti.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus,
      temporibus maxime error excepturi delectus ipsam impedit quis ipsa
      blanditiis molestiae, quam veritatis cupiditate voluptate aliquam harum
      corrupti, quaerat similique in.
    </p>

    <h1>text decoration</h1>

    <p style="text-decoration: overline">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, mollitia
      vel. Iusto alias sit voluptate aperiam amet atque voluptas culpa doloribus
      mollitia, ad asperiores Repudiandae quaerat molestiae quod officiis
      necessitatibus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>

    <p style="text-decoration: line-through">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ratione
      saepe nisi rem, libero ab eveniet quaerat incidunt, animi porro
      repellendus voluptatem velit debitis nobis minima dolorum aut commodi
      quasi. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    <p style="text-decoration: underline">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore minus eum,
      exercitationem, beatae praesentium possimus illo natus ab vitae velit
      excepturi architecto. Similique enim eos nostrum aliquid. Excepturi,
      numquam corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>

    <h1>text transformation</h1>

    <p style="text-transform: uppercase">Text Transform</p>

    <p style="text-transform: lowercase">lowercase text</p>
    <p style="text-transform: capitalize">text will be in camelcase</p>

    <h1>Text spacing</h1>

    <p style="letter-spacing: 2px">Spacing between two character or text</p>

    <h1>Text indent</h1>
    <p style="text-indent: 20px">Spacing between two character or text</p>

    <h1>line height</h1>
    <p style="line-height: 50px">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, natus
      placeat cumque exercitationem labore ipsum explicabo. Incidunt, error
      cumque perferendis odit, dolorem, recusandae id ullam nam alias
      consectetur repellat magni.
    </p>

    <h1>text shadow</h1>
    <p style="text-shadow: 5px 4px 3px black">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <br />

    <hr />

    <div style="margin-left: 30%; font-size: 40px">NIT</div>
  </body>
</html>