Sunday 7 March 2021

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>

Sunday 7 March 2021