Skip to content

Commit fdfe725

Browse files
albin-josephalbin-joseph
committed
updste day 44 program
1 parent f919981 commit fdfe725

File tree

4 files changed

+151
-0
lines changed

4 files changed

+151
-0
lines changed

‎044-day/6.1 Font Properties/font-family.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Font Family</title>
7+
<style>
8+
#helvetica {
9+
font-family: Helvetica, sans-serif;
10+
}
11+
12+
#arial {
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
#serif {
17+
font-family: serif;
18+
}
19+
20+
#sans-serif {
21+
font-family: sans-serif;
22+
}
23+
24+
#cursive {
25+
font-family: cursive;
26+
}
27+
28+
#monospace {
29+
font-family: monospace;
30+
}
31+
32+
#fantasy {
33+
font-family: fantasy;
34+
}
35+
</style>
36+
</head>
37+
38+
<body>
39+
<p id="helvetica">Helvetica</p>
40+
<p id="arial">Arial</p>
41+
<p id="serif">Serif</p>
42+
<p id="sans-serif">Sans Serif</p>
43+
<p id="cursive">Cursive</p>
44+
<p id="monospace">Monospace</p>
45+
<p id="fantasy">Fantasy</p>
46+
47+
</body>
48+
49+
</html>

‎044-day/6.1 Font Properties/font-size.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Font-Size</title>
6+
<style>
7+
#pixel {
8+
font-size: 20px;
9+
}
10+
11+
#point {
12+
font-size: 20pt;
13+
}
14+
15+
#em {
16+
font-size: 1em;
17+
}
18+
19+
#rem {
20+
font-size: 1rem;
21+
}
22+
23+
footer {
24+
font-size: 12pt;
25+
}
26+
27+
html {
28+
font-size: xx-large;
29+
}
30+
</style>
31+
</head>
32+
<html lang="en">
33+
34+
<body>
35+
<p id="pixel">1 Pixel is 1/96 of an Inch</p>
36+
<p id="point">1 Point is 1/72 of an Inch</p>
37+
<footer>
38+
<p id="em">1em is 100% the size of the parent element</p>
39+
<p id="rem">1rem is 100% the size of the root element</p>
40+
</footer>
41+
</body>
42+
43+
</html>

‎044-day/6.1 Font Properties/goal.png

376 KB
Loading

‎044-day/6.1 Font Properties/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>CSS Properties</title>
7+
<style>
8+
/* 6. Change the the root (html element) font size to 30px --> */
9+
html {
10+
font-size: 30px;
11+
}
12+
13+
body {
14+
background-color: cornflowerblue;
15+
color: white;
16+
font-size: 18px;
17+
}
18+
19+
/* 1. Change the color of <p>Color</p> to "coral" color. */
20+
#color {
21+
color: coral;
22+
}
23+
24+
/* 2. Change the font size of <p>Font Size</p> to to 2X the size of the root (html) element. */
25+
#size {
26+
font-size: 2rem;
27+
}
28+
29+
/* 3. Change the font weight of <p>Font Weight</p> to 900. */
30+
#weight {
31+
font-weight: 900;
32+
}
33+
34+
/* 4. Change the font family of <p>Font Family</p> to the Google font Caveat with regular (400) font weight.
35+
Link: https://fonts.google.com/specimen/Caveat */
36+
#family {
37+
font-family: 'Caveat', cursive;
38+
}
39+
40+
/* 5. Change the <p>Text Align</p> to right align. */
41+
#align {
42+
text-align: right;
43+
}
44+
</style>
45+
<link rel="preconnect" href="https://fonts.googleapis.com">
46+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
47+
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
48+
</head>
49+
50+
<body>
51+
<h1>Important CSS Properties</h1>
52+
<p id="color">Color</p>
53+
<p id="size">Font Size</p>
54+
<p id="weight">Font Weight</p>
55+
<p id="family">Font Family</p>
56+
<p id="align">Text Align</p>
57+
</body>
58+
59+
</html>

0 commit comments

Comments
 (0)