styling_and_buttons.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"content="width=device-width,initial-scale">
        <meta http-equiv="X-UA-Compatible"content="ie-edge">
        <title>STYLING AND BUTTONS</title>
    </head>
    <style>
        .container{
            border: 2px dashed black;
            background-color: rgb(171, 241, 224);
            padding: 10px;
            margin: 10px ;
            width: 800px;
        }
        a{
            text-decoration: none;
            color: black;
            /* background-color: rgb(144, 45, 83); */
        }
        a:hover{
            color: rgb(88, 27, 106);
            background-color: rgb(144, 45, 83);
        }
        a:visited{
            color: greenyellow;

        }
        a:active{
            color:blue;
            background-color: pink;
        }
        .btn{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            background-color: bisque;
            padding: 6px;
            border: none;
            cursor: grab;
            font-size: 13px;
            border-radius: 5px;
        }
    </style>
    <body>
        <div class="container">
            <h1>This is my head</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur unde officia sapiente, ratione sed ullam labore maiores blanditiis quasi tempore, cum ipsa harum, quaerat totam architecto tempora? Perferendis eveniet voluptas unde iure repellat. Atque?</p>
            <a href="form.html"class="btn">Read more</a>
            <button class="btn">Contact us</button>

        </div>
    </body>
</html>