-
Notifications
You must be signed in to change notification settings - Fork 0
/
CSS-typography.html
71 lines (71 loc) · 2.41 KB
/
CSS-typography.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Typography</title>
<style>
html {
color: blue;
}
body {
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 15px;
}
.demo1 {
font-style: italic;
font-variant: small-caps;
font-weight: 800;
line-height: 150%; /* Line height, the distance between two lines */
/* this value is equivalent to 150%*/
}
.demo2 {
/* Shorthand Font Properties */
font: italic small-caps bold 18px/22px sans-serif, arial;
color: black;
}
.btn {
border: 1px solid green;
line-height: 122px;
height: 122px;
/*
single line text can be vertically centered with 'height' and 'line-height' property with same value;
*/
}
a {
color: blueviolet;
}
a:hover {
color: brown;
}
</style>
</head>
<body>
<div>
<h1>CSS Typography Introduction</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
pariatur alias delectus animi veniam perspiciatis, laboriosam quisquam
nemo voluptatem recusandae velit consequuntur dolorum vero doloribus
consequatur similique incidunt nihil tenetur.
</p>
<p class="demo1">
Lorem IS DEAD sit amet consectetur adipisicing elit. Sapiente pariatur
alias delectus animi veniam perspiciatis, laboriosam quisquam nemo
voluptatem recusandae velit consequuntur dolorum vero doloribus
consequatur similique incidunt nihil tenetur.
</p>
<p class="demo2">
Lorem THIS WORLD SHALL KNOW PAIN sit amet consectetur adipisicing elit.
Sapiente pariatur alias delectus animi veniam perspiciatis, laboriosam
quisquam nemo voluptatem recusandae velit consequuntur dolorum vero
doloribus consequatur similique incidunt nihil tenetur. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Voluptatibus beatae harum
omnis numquam possimus voluptatem quia veritatis repellat eius? Tenetur
animi unde est dignissimos tempora? Explicabo, sint quo? Libero,
quibusdam!
</p>
<div class="btn"><a href="htpps://google">Search</a></div>
</div>
</body>
</html>