Sunday, 7 March 2021

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>

HTML TUT-8 What Is Semantic Tags ?

What Is Semantic Elements?

Semantic Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>segmantic Element</title>
  <!-- <link rel="stylesheet" href="/tut13.css"> -->
</head>
<style>
    p{color: blue;}
p{background: chartreuse;}
a{border-color: crimson;}
</style>
<body>
    <summary>I have keys but no doors. 
        I have space but no room. You can enter but can’t leave. 
        What am I?
    </summary>
    
</body>
</html>

HTML TUT-7 What Is HTML Entities ?

What Is HTML Entities ?

Special Character make with the help of html Entities

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html entities</title>
</head>
<body>
    <div class="container">
        <p>This is a paragraph</p>
    </div>
    <div class="container">
        <p>dollar is written like this &dollar;</p>
        <p>Copywrite is written like this &copy;</p>
        <p>pound is written like this &pound;</p>
        <p>Empty is written like this &#8203;</p>
    </div>
    

</body>
</html>

HTML TUT-6 What Is ID and Classes In HTML ?

What Is IDs and Classes In HTML ?

Id and Classes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ids and classes</title>
</head>
<body>
    <h1>Ids and classes tutorials</h1>
    <span id="mainvlogs"></span>
<strong class="blackborder redBG Background">This is a line</strong>   
<div class="background blackbackground redbg"></div> 
<span class="myclass myclass2 myclass3">frist </span>
<span class="myclass myclass2 myclass3">second</span>
<span class="myclass myclass2 myclass3"></span>
<span class="myclass myclass2 myclass3">fourth</span>
<span class="myclass myclass2 myclass3">fivth</span>
<span class="myclass myclass2 myclass3">sixth</span>
<span class="myclass myclass2 myclass3">seventh</span>

</body>
</html>

HTML TUT-5 How To Identify The Inline And Block Elements In Html(With the help of CSS)

How To Identify The Inline And Block Elements In Html(With the help of CSS)

Block And Inline Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline and Block</title>
</head>
<body>
    <li type="circle" style="border: 2px solid red;">This is a paragraph</li>
    <li  type="square" style="border: 2px solid black;">this is a second paragraph</li>
    <em style="border: 2px solid orange;">This is a Emphasis</em>
    <div style="border: 2px solid blue;">This is a Block Element </div>
    <img style="border: 2px solid black;" src ="" alt="This is a block Element">
</body>
</html>

HTML TUT-4 How To create Forms And inserts Links Tags in it ?

How To Create Forms And Inserts Links Tags In It ?

Forms Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms and tags </title>
</head>
<body>
    <h2>This is Html form</h2>
<form action="backend.php">
    <div>
Name:<input type="text" name="myName">
    </div>
    <br>
    <div>
Role:<input type="text" name="myRole">
    </div>
    <div>
        <br>
Email:<input type="text" name="myEmail" >
    </div>
    <div>
        <br>
Date:<input type="date" name="myDate" >
    </div>
    <div>
        <br>
Are you elegible?:<input type="checkbox" name="myEligibility" >
    </div>
<br>
    <div>
Gender:Male<input type="radio" name="myGender"> 
Female<input type="radio" name="myGender"> 
Other<input type="radio" name="myGender"> 
    </div>
    <br>
    <div>
        Bonus:<input type="Number" name="myBonus"> 
    </div>
    <br>
        <div>
            Write about Yourself:<br><textarea name="text" cols="30" rows="10"></textarea>
        </div>
        <br>
        <div>
           <label for="car">car</label>
           <select name="mycar" id="car">
        <option value="swi"selected>swift</option>    
        <option value="ymh">yamaha</option>    
        <option value="mar">maruti</option>    
        <option value="son">sony</option>    
        
        
        </select>
           
        </div>
        
<br>

        <div>
        Reset:<input type="reset" value="Reset Now">
            </div>
            <br>
            <div>
        submit:<input type="submit" value="submit Now">
            </div>
            <br>
       
</form>
<a href="https://Google.com" target="_blank">Follow Us On Google</a>
<br>
<br>
<a href="https://Facebook.com" target="_blank">Follow Ours Facebook Page</a>
<br>
<br>
<a href="https://Linkedin.com" target="_blank">Follow Ours Linkedin Page</a>
<br>
<br>
<a href="Upendra.html" target="_blank">Visits Ours Next Page</a>

</body>
</html>