Bhavitha Cherukuri: Applying all the CSS Properties at once(Static Website)

Applying all the CSS Properties at once(Static Website)

In the last story we have applied the colors to the text and also added the background color to the website but the text is not in the center.

Font-Family:

More ways to style your text:

The different font-families are:

Roboto
Caveat
Lobster
Monoton

Now let us see how the word TOURISM is transformed into different font style:

<!DOCTYPE html>
<html>
    <head>
        <title>font family</title>
        <link rel="stylesheet" href="fontfam.css">
    </head>
    <body>
        <h1 class="heading1">Tourism</h1>
        <h2 class="heading2">Tourism</h2>
        <h3 class="heading3">Tourism</h3>
        <h4 class="heading4">Tourism</h4>

    </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.heading1{
    font-family:Monoton;
}
.heading2{
    font-family:Roboto;
}
.heading3{
    font-family:Caveat;
}
.heading4{
    font-family:Lobster;
}

And here is the output:

FONT-SIZE:

Font-size is the other style to decorate our text.

Changing the font family is not sufficient to decorate the text, it also need the correct size to make the text to look good.

The font-size is measured in “PIXEL” , it is the unit of measurement.

<!DOCTYPE html>
<html>
    <head>
        <title>font family</title>
        <link rel="stylesheet" href="fontfam.css">
    </head>
    <body>
        <h1 class="heading1">Tourism</h1>
        <h2 class="heading2">Tourism</h2>
        <h3 class="heading3">Tourism</h3>
        <h4 class="heading4">Tourism</h4>

    </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.heading1{
    font-family:Monoton;
    font-size:100px;
}
.heading2{
    font-family:Roboto;
    font-size:75px;
}
.heading3{
    font-family:Caveat;
    font-size:50px;
}
.heading4{
    font-family:Lobster;
    font-size:25px;
}

The output is:

Font-Style:

It is the other way of styling your text.

<!DOCTYPE html>
<html>
    <head>
        <title>font family</title>
        <link rel="stylesheet" href="fontfam.css">
    </head>
    <body>
        <h1 class="heading1">Tourism</h1>
        <h2 class="heading2">Tourism</h2>
        <h3 class="heading3">Tourism</h3>
        <h4 class="heading4">Tourism</h4>

    </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.heading1{
    font-family:Monoton;
    font-size:100px;
    font-style:normal;
}
.heading2{
    font-family:Roboto;
    font-size:75px;
    font-style:italic;
}
.heading3{
    font-family:Caveat;
    font-size:50px;
    font-style:normal;
}
.heading4{
    font-family:Lobster;
    font-size:25px;
    font-style:italic;
}

Font-Weight:

Font-weight is the other style.

<!DOCTYPE html>
<html>
    <head>
        <title>font family</title>
        <link rel="stylesheet" href="fontfam.css">
    </head>
    <body>
        <h1 class="heading1">Tourism</h1>
        <h2 class="heading2">Tourism</h2>
        <h3 class="heading3">Tourism</h3>
        <h4 class="heading4">Tourism</h4>

    </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.heading1{
    font-family:Monoton;
    font-size:100px;
    font-style:normal;
    font-weight:normal;
}
.heading2{
    font-family:Roboto;
    font-size:75px;
    font-style:italic;
    font-weight:bold;
}
.heading3{
    font-family:Caveat;
    font-size:50px;
    font-style:normal;
    font-weight:normal;
}
.heading4{
    font-family:Lobster;
    font-size:25px;
    font-style:italic;
    font-weight:bold;
}

So, now let add the multiple css properties at once as shown below:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="back.css">
    </head>
    <body>
        <div class="card">
            <h1 class="main-heading">Tourism</h1>
            <p class="paragraph">Plan your trip wherever you want to go</p>
            <button>Get Started</button>
        </div>
    </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.card{
    background-color:lightblue;
    text-align: center;
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}