CSS BOX MODEL
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS LEVEL 2</title>
<link rel="stylesheet" href="STLE.CSS">
</head>
<body>
<h1>heading</h1>
<p id="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nam iste repellat nostrum itaque ipsa eveniet, quis, odit reiciendis autem quibusdam recusandae provident repellendus nemo aliquid cumque odio labore ullam?</p>
<p id="one">debadatta parida</p>
<p id="two">second</p>
<button>click me</button>
<div>this is a div</div>
</body>
</html>
CSS
*{
color: rgb(93, 0, 100);
}
div{
height: 120px;
background-color: pink;
width: 800px;
border-width: 50px;
border-style: dotted;
border-color: aqua;
text-align: center;
}
h1{
width: 300px;
height: 100px;
background-color: aquamarine;
text-align: center;
}
#lorem{
background-color: aquamarine;
}
#one{
border: 20px solid rgb(216, 222, 135);
border-radius: 38px;
}
#two{
background-color: red;
border-width: 50px;
height: 250px;
width: 250px;
text-align: center;
border-radius: 20%;
padding: 50px;
margin: 50px;
}
OUTPUT
heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non nam iste repellat nostrum itaque ipsa eveniet, quis, odit reiciendis autem quibusdam recusandae provident repellendus nemo aliquid cumque odio labore ullam?
debadatta parida
second
this is a div
.png)
Comments
Post a Comment