Journey to a Web Developer

CSS Learning with Rasel Bhai

Mukibul Minhaz's photo
Mukibul Minhaz
·

2 min read

<!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

https://fonts.google.com/

<!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="fonts.googleapis.com"> <link rel="preconnect" href="fonts.gstatic.com" crossorigin> <link href="fonts.googleapis.com/css2?family=Bricolage+.." 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; }

css basic