-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-text-formatting.html
131 lines (113 loc) · 5.62 KB
/
css-text-formatting.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Css text formatting</title>
<style type="text/css">
div{
font-family: "Comic Sans MS", sans-serif;
background-color: lightsalmon;
padding: 10px;
margin: 20px;
font-size: 20px;
border-radius: 15px;
}
.color{
border: 1px solid;
padding: 10px;
color: purple;
}
h1{
/* text alignment
default left , center , right
*/
text-align: right;
}
h2{
/*text-decoration: line-through;*/
/*text-decoration: overline;*/
text-decoration: underline;
}
a{
color: red;
text-decoration: none;
}
.textTrans{
/*first lettr capital*/
text-transform: capitalize;
/*text-transform:lowercase; */
/*text-transform: uppercase;*/
}
.letterSpace{
letter-spacing: 50px;
}
.letterHeigt{
line-height: 100px;
}
h3{
direction: rtl;
}
.wordSpace{
word-spacing: 50px;
}
.justifyText{
text-align: justify;
}
h5{
font-size: 50px;
text-shadow: 10px 0 0 red;
}
.verticleSh{
text-shadow: 0 10px 0 red;
}
.blur{
text-shadow: 10px 10px 20px green;
}
</style>
</head>
<body>
<div>
<h5>Hello I am Jahid</h5>
<h5 class="verticleSh">Hello I am Jahid</h5>
<h5 class="blur">Hello I am Jahid</h5>
</div>
<div>
<p class="justifyText">Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Eaque aliquam maxime accusantium amet quod molestiae delectus quam temporibus ipsa dignissimos. Repudiandae dolor voluptatibus dolorem eaque voluptate magni a aliquid illo corrupti itaque quidem quo harum necessitatibus libero architecto sint, magnam aut vero quasi aperiam. Fugit enim ipsum, nesciunt eum consectetur quod possimus amet quia quo ut sint voluptatem minus sed repellendus doloremque sequi? Expedita modi enim saepe, veniam quam corporis ratione soluta perspiciatis repellat vero laudantium ex provident quidem perferendis officiis doloribus ab fuga a quo aperiam iusto quaerat, alias molestias. Cum architecto quidem velit at sequi quae voluptatum, doloremque, eveniet iste tempore harum, iure consequuntur ipsum soluta? Aut, iste! Eaque repellat error veritatis repellendus dolores eius rerum omnis quos minus, dignissimos, deleniti placeat architecto velit sint officiis, perspiciatis provident doloribus quibusdam nobis nostrum libero. Unde sit, necessitatibus ipsa deleniti laborum quo, doloremque exercitationem numquam inventore consectetur provident dolorem quis?</p>
</div>
<div>
<p class="color">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
</p>
</div>
<div>
<h1>HEllo World</h1>
</div>
<div>
<h2>HEllo World</h2>
<a href="#">I am Anchor Tag</a>
</div>
<div>
<p class="textTrans">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia omnis facilis, ipsa quo libero, asperiores.</p>
</div>
<div>
<p class="letterSpace">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia omnis facilis, ipsa quo libero, asperiores.</p>
</div>
<div>
<p class="letterHeigt" style="text-align: justify;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia omnis facilis, ipsa quo libero, asperiores Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.50.</p>
</div>
<div>
<h3>Hello Jahid asddsahidsaidisaudisaidhsadsahsiauddhsadhsa </h3>
</div>
<div>
<p class="wordSpace">Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Fuga rem similique dolorum ipsa consequuntur asperiores praesentium consectetur, ratione quos beatae vero! Nesciunt perspiciatis quo suscipit officiis, quos obcaecati perferendis quibusdam dolor, eaque vitae hic, consequatur provident atque? Illum minus maxime quam eum doloribus quod quibusdam, ratione eos voluptates explicabo et culpa autem rerum quas architecto nulla suscipit, quidem. Ipsa veniam quae, sit, nobis sint deleniti, exercitationem enim dolorum incidunt possimus iusto hic ab vitae sed reprehenderit quas atque quaerat, consectetur mollitia est repellat distinctio. Sed, veritatis dolore iusto quibusdam, placeat culpa dolorum deserunt fuga perferendis assumenda, quis asperiores, et aperiam in quisquam! Perferendis tempora molestias deleniti magnam provident molestiae veniam modi exercitationem beatae, repellendus unde eligendi labore consequuntur at sequi obcaecati, odit quae nulla, rerum illo numquam voluptatem! Doloribus veritatis, voluptatum porro, dolorum esse, minus, doloremque ratione illo rem enim assumenda perferendis? Debitis nulla consequuntur sed architecto minima magni ipsum.</p>
</div>
</body>
</html>