stylingLINKS.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo selectors and more designing</title>
    <style>
        .container{
            border: 7px solid hotpink;
            background-color: aqua;
            padding: 34px;
            margin: 34px auto;
            width: 565px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            color: red;
            background-color: blue;
        }
        a.visited{
            color: rgb(128, 0, 75);
            background-color: brown;
        }
        a.active{
            background-color: rgb(212, 131, 10);
        }
        .btn{
            font-style: italic ;
            background-color: greenyellow;
            padding: 6px;
            border: none;
            cursor: pointer;
            font-size: large;
            border-radius: 5px;
        }
        .btn:hover{
            background-color: tomato;
        }

    </style>
</head>
<body>
    <div class="container" id="cont1">
        <h2>This is my world.my name is shivam .hello evreyone.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis architecto, consectetur tenetur quo illo voluptates iusto blanditiis sed voluptatum nam ab harum deserunt similique? Odio, eum quisquam. Quibusdam natus facere quam ducimus, saepe consequuntur voluptatem molestiae eius voluptates numquam amet nobis, quidem rem neque ipsa debitis illum doloremque velit id a sapiente nam eum provident iure. Voluptate debitis sit adipisci!</p>

        <a href="http://google.com"class="btn"> Read more</a>
        <button class="btn">Contact Us</button>
      Gender:  Male<input type="checkbox" name="mymale" >
       Female <input type="checkbox" name="myfemale" >
    </div>
</body>
</html>