Arcron-ArchLinux/100-Days-Of-Code
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Font Properties in a website

Browse Source
This commit is contained in:
Muhammad Ibrahim 2024-11-19 10:36:41 +05:30
parent e6630677c4
commit 0af715d5b3
5 changed files with 214 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Web Development Python Projects/6.1 Font Properties/font-family.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Family</title>
<style>
#helvetica {
font-family: Helvetica, sans-serif;
}
#arial {
font-family: Arial, sans-serif;
}
#serif {
font-family: serif;
}
#sans-serif {
font-family: sans-serif;
}
#cursive {
font-family: cursive;
}
#monospace {
font-family: monospace;
}
#fantasy {
font-family: fantasy;
}
</style>
</head>
<body>
<p id="helvetica">Helvetica</p>
<p id="arial">Arial</p>
<p id="serif">Serif</p>
<p id="sans-serif">Sans Serif</p>
<p id="cursive">Cursive</p>
<p id="monospace">Monospace</p>
<p id="fantasy">Fantasy</p>
</body>
</html>

43
Web Development Python Projects/6.1 Font Properties/font-size.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Font-Size</title>
<style>
#pixel {
font-size: 20px;
}
#point {
font-size: 20pt;
}
#em {
font-size: 1em;
}
#rem {
font-size: 1rem;
}
footer {
font-size: 12pt;
}
html {
font-size: xx-large;
}
</style>
</head>
<html lang="en">
<body>
<p id="pixel">1 Pixel is 1/96 of an Inch</p>
<p id="point">1 Point is 1/72 of an Inch</p>
<footer>
<p id="em">1em is 100% the size of the parent element</p>
<p id="rem">1rem is 100% the size of the root element</p>
</footer>
</body>
</html>

BIN
Web Development Python Projects/6.1 Font Properties/goal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 KiB

63
Web Development Python Projects/6.1 Font Properties/index.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Properties</title>
<style>
body {
background-color: cornflowerblue;
color: white;
font-size: 18px;
}
/* Don't change the CSS above, add Your CSS below */
html {
font-size: 30px;
}
#color {
color: coral;
}
#size {
font-size: 2rem;
}
#weight {
font-weight: 900;
}
#family {
font-family: Caveat, cursive;
}
#align {
text-align: right;
}
</style>
<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=Caveat:wght@400..700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Important CSS Properties</h1>
<p id="color">Color</p>
<p id="size">Font Size</p>
<p id="weight">Font Weight</p>
<p id="family">Font Family</p>
<p id="align">Text Align</p>
<!-- TODOs
1. Change the color of <p>Color</p> to "coral" color.
2. Change the font size of <p>Font Size</p> to 2X the size of the root font size.
3. Change the font weight of <p>Font Weight</p> to 900.
4. Change the font family of <p>Font Family</p> to the Google font Caveat with regular (400) font weight.
Link: https://fonts.google.com/specimen/Caveat
5. Change the <p>Text Align</p> to right align.
6. Change the the root (html element) font size to 30px -->
</body>
</html>

59
Web Development Python Projects/6.1 Font Properties/solution.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Properties</title>
<style>
/* 6. Change the the root (html element) font size to 30px --> */
html {
font-size: 30px;
}
body {
background-color: cornflowerblue;
color: white;
font-size: 18px;
}
/* 1. Change the color of <p>Color</p> to "coral" color. */
#color {
color: coral;
}
/* 2. Change the font size of <p>Font Size</p> to to 2X the size of the root (html) element. */
#size {
font-size: 2rem;
}
/* 3. Change the font weight of <p>Font Weight</p> to 900. */
#weight {
font-weight: 900;
}
/* 4. Change the font family of <p>Font Family</p> to the Google font Caveat with regular (400) font weight.
Link: https://fonts.google.com/specimen/Caveat */
#family {
font-family: 'Caveat', cursive;
}
/* 5. Change the <p>Text Align</p> to right align. */
#align {
text-align: right;
}
</style>
<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=Caveat&display=swap" rel="stylesheet">
</head>
<body>
<h1>Important CSS Properties</h1>
<p id="color">Color</p>
<p id="size">Font Size</p>
<p id="weight">Font Weight</p>
<p id="family">Font Family</p>
<p id="align">Text Align</p>
</body>
</html>