Sunday, November 12, 2023

Introduction to CSS Box Model(static website)

 Introduction to CSS Box Model(static website)

In the last story we have learnt about how to style our text to our static website and today we will be learning about the CSS BOX MODEL.

AS we can see every html element on a webpage is a rectangular box.

Today we will be learning about the box properties and also how to fit the backgroung image to our webpage. Now let us start learning the box properties.

CSS BOX PROPERTIES:

The css box properties are height, width, margin, border and padding and today we will be learning about the width and height.

Applying height to our webpage:

As we know the pixels is the unit of measurement and the height and width are measured using pixels(px).

<!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;
    height:250px;
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}

Applying width to our webpage:

Width is also measured using pixels.

<!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;
    height:250px;
    width:350px;
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}

Applying the Background Image to our website

As our website is for tourism let us fit the background image that apts.

<!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-image:url("images/beaa.jfif");
    text-align: center;
    height:250px;
    width:350px;
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}

Above we can see that the background image is set only to the some part of the screen.

Now let us learn

HOW TO FIT THE BACKGROUND IMAGE TO THE ENTIRE SCREEN?

we can fit the image to the entire screen by using the viewport.

Viewport

viewport is nothing but the area of the window in which the web content can be seen.

viewport height and width can be set as vh and vw.

viewport width:

<!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-image:url("images/beaa.jfif");
    text-align: center;
    width:50vw;
    
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}

Viewport Height:

<!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-image:url("images/beaa.jfif");
    text-align: center;
    height:250vh;
    
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}

As we can see the image is repeating. So, we have a solution to stop repeating the background image.

Addresing the issue of image repetition

So, inorder to cover the backgroung image to the entire screen without repetition we use background-size that is cover.

cover fits the background image to the entire screen.

<!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-image:url("images/beaa.jfif");
    background-size:cover;
    text-align: center;
    height:100vh;
    
}
.main-heading{
    color:red;
    font-family:monoton;
    font-size:30px;
    font-weight:bold;
    font-style:normal;
}
.paragraph{
    color:black;
}
at No comments:

Saturday, November 11, 2023

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:

  1. Roboto
  2. Caveat
  3. Lobster
  4. 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;
}

And below is the output:

at No comments:
Subscribe to: Posts (Atom)

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...

  • Advantages and disadvantages of MySQL
                 MySQL Advantages and                     Disadvantages Advantages: L ike other relational database system, MySQL database serve...
  • HTML Text Formatting
                               HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Ele...
  • HTML Table Colspan & Rowspan
      HTML Table Colspan & Rowspan HTML tables can have cells that span over multiple rows and/or columns. HTML Table — Colspan To make a ce...