CSS TUT-5 How To Make Box Model CSS in HTML ?

How To Make Box Model CSS in HTML ?

Box Model CSS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>box model margin padding</title>

<style>

*{

        box-sizing: border-box;

        padding: 0px;

        margin: 0px;

}

    body{

        background-color: rgb(187, 218, 218);

}

    .container{

        border: 3px solid blue;

        background-color: #c4deea;

        padding: 14px 21px 14px 5px;

        margin: 27px 36px 47px 2px;

      border-radius: 12px;

      box-sizing: border-box;

}

</style>

</head>

<body>

    <h2>this is box model</h2>

       <div class="container">

           <p id="frist">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime, 

            excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="second">Lorem ipsum dolor sit amet consectetur adipisicing elit.

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo.

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

       <div class="container">

           <p id="fourth">Lorem ipsum dolor sit amet consectetur adipisicing elit. 

            Illum ut sint voluptatum iusto atque vel pariatur officia maxime,

             excepturi illo, veniam explicabo. 

            Rem cum molestiae, maiores fugiat ex voluptatum quaerat.</p>

       </div>

</body>

</html>

CSS TUT-4 How To Give Beautiful Heights, Widths, Border , Border-Radius and Background In HTML Using CSS ?

How To Give Beautiful Heights, Widths,Border,Border-Radius and Background In HTML Using CSS ?

CSS Design

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Height,width,border and backgrounds</title>

    <style>

p{

        background-color: brown;

    height: 400px;

width: 300px;

border-radius: 10px;

border:black;

border-style: solid;

}

        #secondpara{

        background-color:green;

    height: 254px;

width: 300px;

border-radius: 10px;

border-bottom: rgb(141, 15, 231);

border-left: rgb(236, 147, 13);

border-right: rgb(3, 248, 76);

border-bottom: rgb(238, 11, 162);

border-bottom-left-radius: 5px;

border-bottom-right-radius: 15px;

}

#image{color: red;

    border: solid,black;

height: 630px;

width: 630px;

background-color: white;

background-image: url(https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg);

background-repeat: no-repeat;

background-position: center top;

}

#button{

    border: solid;

    height: 25px;

    width: 25px;

    background-color:red;

}

    </style>

</head>

<body>

    <h2>This is backgrounds colors</h2>

    <p >This is my frist ever para written</p>

    <p id="secondpara">This is my second para</p>

<h2>This is third para for img</h2>

<p id="image">This is my image</p>

<h3>This is button to tap to enter in google </h3>

<a id="button" href="https://Google.com" target="_blank">Go To The Google Site Tap On It</a>

</body>

</html>

CSS TUT-3 How To Add Fonts-Family And Make Beauty In Fonts ?

How To Add Fonts-Family And Make Beauty In Fonts ?

Fonts Size And Fonts-Family

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS fonts</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Pacifico&family=Russo+One&display=swap" rel="stylesheet">

    <style>

        p{font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

    font-size: 30px;

}

span{font-weight: bold;

font-style: italic;}

    </style>

</head>

<body>

    <h2>This is tut for Fonts written</h2>

    <p>is this my beauty fonts no </p>

    <p>then which <span>One</span>  is my join family font </p>

</body>

</html>

CSS TUT-2 What Is CSS Selectors?

What Is CSS Selectors?

CSS Types of Selectors

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <link rel="stylesheet" href="tut14.css">
</head>
<body>
    <h2>CSS Selectors</h2>
    <p id="fristpara">This is a simple css selectors 
    </p>
    <p class="secondpara">This is another Simple Free selectors</p>
    <span>This is a span </span>
    <strong>This is bold character keypads</strong>
<i>This is italic line is used in a html</i>
</body>
</html>

CSS Selectors

#fristpara{color: red;
background-color: royalblue;
border-radius: 5px;
color: khaki;}
.secondpara{background: royalblue;}
span{background-color: red;}
/* this is a groupism selector */
i,strong{background-color: green;
color: hotpink;
border: indigo;}
.secondpara{border-bottom: khaki;}

CSS TUT-1 Simple CSS In Para ?

Simple CSS In Para ?

CSS in Para

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS tut13</title>
    <style>

        p{color: silver;
        background-image: -webkit-linear-gradient();}



        </style>
        <link rel="stylesheet" href="tut13.css">
</head>
<body>
    <h1>CSS HTML Tutorials</h1>
    <p >This is a html tutorials for Beginner</p>
    <div style="padding-left: 5px;">This is absolutely free CSS tutorials
        thank for subcribe
    </div>
</body>
</html>

Sunday, 7 March 2021