Practical Lab 5: CSS Box Model
h4{
#1: Create a CSS border border : 1px solid red;
}
<!DOCTYPE html>
h4{
<html>
border-style : solid;
<head> border-style : dotted;
border-style : double;
<title>CSS Box Model Lab</title> }
<link rel="stylesheet" href="[Link]"> h4{
border-width : 7px;
</head>
}
<body>
h4{
<h4> CSS Boxmodel Practical lab </h4> border-color : red;
}
<div class="box">
h4{
Welcome to CSS Box Model Lab border-top : 1px solid red;
}
</div>
</body>
</html>
#1: Create a CSS Padding 1
h4{
<!DOCTYPE html> padding : 10px;
}
<html>
<head> h4{
padding-top : 10px;
<title>CSS Box padding Lab</title> padding-right : 20px;
padding-bottom : 30 px;
<link rel="stylesheet" href="[Link]"> padding-left : 40 px;
}
</head> h4{
padding : 10px 20px 30px 40px;
<body>
}
<h4> CSS Boxmodel Practical lab </h4>
<div class="box">
Welcome to CSS Box Model Lab
</div>
</body>
</html>
#1: Create a Simple Margin Model 1
h4{
<!DOCTYPE html> margin: 10px;
}
<html>
h4{
<head> margin -top : 10px;
margin -right : 20px;
<title>CSS Box Model Lab</title> margin -bottom : 30 px;
margin -left : 40 px;
<link rel="stylesheet" href="[Link]"> }
</head> h4{
margin : 10px 20px 30px 40px;
<body>
}
<h4> CSS Boxmodel Practical lab </h4>
<div class="box">
Welcome to CSS Box Model Lab
</div>
</body>
</html>
#1: Create a Simple box Model
<!DOCTYPE html>
<html> [Link]
<head> .box {
width: 300px;
<title>CSS Box Model Lab</title> padding: 20px;
border: 5px solid
<link rel="stylesheet" href="[Link]"> blue;
margin: 30px;
</head> background-color:
lightblue;
<body> }
<div class="box">
Welcome to CSS Box Model Lab
</div>
</body>
</html>
# 2: Compare Different Padding Values
<!DOCTYPE html>
<html> [Link]
<head> .box1 {
background-color: lightgreen;
<title>CSS Box Model Lab</title> padding: 10px;
border: 2px solid black;
<link rel="stylesheet" href="[Link]"> }
</head>
.box2 {
<body> background-color: lightcoral;
padding: 30px;
<div class="box1">Box One</div> border: 2px solid black;
<div class="box2">Box Two</div> }
</body> </html>
#4: CSS outline values
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 4px solid black;
outline: #4CAF50 solid 20px;
margin: auto;
padding: 40px;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of
10px.</p>
</body>
</html>