CSS Learning with Rasel Bhai
I am a novice web developer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="CSS/style.css"> <title>My website</title> </head> <body> <p class="my-website">This is my website and i am the owner of this webpage. Please visit my website and subscribe my website.</p>
<p id="lorem1" class="lorem">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime nesciunt porro corrupti voluptatum ullam labore aperiam esse rem quam! Similique veniam commodi ipsam eligendi obcaecati veritatis aliquam temporibus dignissimos omnis.</p>
<style>
.my-website {
color: blue;
font-size: 40px;
font-family: Cambria;
}
.lorem {
color: green;
font-size: 35px;
font-family: Helvetica;
}
#lorem1 {
color: black;
font-size: 45px;
font-family: Times New Roman;
}
</style>
</body> </html>
Google Font Using
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My website</title> <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=Bricolage+Grotesque:opsz,wght@10..48,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="CSS/style.css"> </head> <body> <p class="first-p">This is my website and i am the owner of this webpage. Please visit my website and subscribe my website.</p>
<p class="second-p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime nesciunt porro corrupti voluptatum ullam labore aperiam esse rem quam! Similique veniam commodi ipsam eligendi obcaecati veritatis aliquam temporibus dignissimos omnis.</p>
</body> </html>
In style.css -
body { font-family: 'Bricolage Grotesque', sans-serif; }
Custom font Using
https://www.dafont.com/ using for downloading fonts
https://transfonter.org/ after downloading the fonts, we need to convert it into WOFF/WOFF2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My website</title> <link rel="stylesheet" href="../CSS/style.css"> </head> <body> <p class="first-p">This is my website and i am the owner of this webpage. Please visit my website and subscribe my website.</p>
<p class="second-p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime nesciunt porro corrupti voluptatum ullam labore aperiam esse rem quam! Similique veniam commodi ipsam eligendi obcaecati veritatis aliquam temporibus dignissimos omnis.</p>
</body> </html>
In stylesheet CSS-
@font-face { font-family: 'Spicy Chips'; src: url('../Assets/fonts/SpicyChips.woff2') format('woff2'), url('../Assets/fonts/SpicyChips.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
.first-p { color: green; font-size: 35px; border: 5px solid black;
} .second-p { color: blue; font-size: 35px; }
body { font-family: 'Spicy Chips', cursive; }