Borders And Backgrounds
<!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>Height, Width, borders and backgrounds</title>
<style>
#firstPara{
background-color: rgb(7, 160, 27);
height: 100px;
width: 455px;
border-width: 4px;
border-color: purple;
border-style: solid;
border-radius: 10px;
}
#secondPara{
background-color: rgb(74, 235, 11);
height: 50px;
width: 355px;
border-top: 2px solid violet;
border-right: 2px solid rgb(243, 161, 8);
border-bottom: 2px solid rgb(58, 1, 1);
border-left: 2px solid rgb(32, 0, 121);
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
#thirdPara{
height: 500px;
width: 455px;
background-image: url(https://www.codewithharry.com/assets/img/logo.png);
border: 2px solid red;
background-repeat: no-repeat;
background-position: 192px 34px;
background-position: center center;
background-position: bottom right;
background-position: top center;
}
</style>
</head>
<body>
<h3>This is Heading</h3>
<p id="firstPara" >This is a Paragraph</p>
<h3>This is second Heading</h3>
<p id="secondPara" >This is the second Paragraph</p>
<h3>This is third Heading</h3>
<p id="thirdPara" >This is the third Paragraph</p>
</body>
</html>
Comments
Post a Comment