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>

Sunday 7 March 2021