CSS BORDERS ACTIVITY
CSS BORDER ACTIVITY
WRITE HTML CODE TO DESING DIFFERENT TYPE OF BORDER OF BELOW IMAGE
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<style type="text/css">
/*Section 1*/
.one{
width: 932px;
height: 300px;
margin-left: 150px;
margin-top: 50px;
border: 10px solid rgb(174,174,174);
border-radius: 15px;
background-color: rgb(255,255,255);
margin-bottom: 200px;
}
.solid{
border:5px solid rgb(196,25,68);
margin-top: 4px;
width: 280px;
height: 50px;
text-align: center;
margin-left: 4px;
}
.groove{
border:5px groove rgb(196,25,68);
width: 280px;
height: 50px;
margin-left: 320px;
text-align: center;
margin-top: -60.5px;
}
.dashed{
border:5px dashed rgb(196,25,68);
width: 280px;
height: 50px;
margin-left: 637px;
margin-top: -60px;
text-align: center;
}
.ridge{
border:5px ridge rgb(196,25,68);
margin-top: 40px;
width: 280px;
height: 50px;
text-align: center;
margin-left: 4px;
}
.double{
border:5px double rgb(196,25,68);
width: 280px;
height: 50px;
margin-left: 320px;
text-align: center;
margin-top: -60px;
}
.inset{
border:5px inset rgb(196,25,68);
width: 280px;
height: 50px;
margin-left: 637px;
margin-top: -60px;
text-align: center;
}
.dotted{
border:5px dotted rgb(196,25,68);
margin-top: 40px;
width: 280px;
height: 50px;
text-align: center;
margin-left: 4px;
}
.outset{
border:5px outset rgb(196,25,68);
width: 280px;
height: 50px;
margin-left: 320px;
text-align: center;
margin-top: -60px;
}
.text1{
margin-top: 30px;
color: gray;
}
/*Section 2*/
.two{
margin-bottom: 200px;
}
.ridge1{
border:5px ridge rgb(4,73,74);
margin-top: 40px;
width: 150px;
height: 60px;
text-align: center;
margin-left: 100px;
}
.dotted1{
border:5px dotted rgb(221,1,3);
width: 150px;
height: 60px;
margin-left: 350px;
text-align: center;
margin-top: -70.5px;
}
.inset1{
border:5px inset rgb(110,4,107);
margin-top: 40px;
width: 150px;
height: 60px;
text-align: center;
margin-left: 100px;
}
.double1{
border:5px double rgb(237,215,132);
width: 150px;
height: 60px;
margin-left: 350px;
text-align: center;
margin-top: -70.5px;
}
.outset1{
border:5px outset rgb(54,57,6);
margin-top: 40px;
width: 150px;
height: 60px;
text-align: center;
margin-left: 100px;
}
.groove1{
border:5px groove rgb(113,13,13);
width: 150px;
height: 60px;
margin-left: 350px;
text-align: center;
margin-top: -70.5px;
}
.dashed1{
border:5px dashed rgb(0,2,254);
margin-top: 40px;
width: 150px;
height: 60px;
text-align: center;
margin-left: 100px;
}
.solid1{
border:5px solid rgb(0,126,0);
width: 150px;
height: 60px;
margin-left: 350px;
text-align: center;
margin-top: -70.5px;
}
.text2{
margin-top: 65px;
}
</style>
</head>
<body>
<!-- First Div -->
<div class="one">
<div class="solid">
<div class="text1">SOLID BORDER</div>
</div>
<div class="groove">
<div class="text1">GROOVE BORDER</div>
</div>
<div class="dashed">
<div class="text1">DASHED BORDER</div>
</div>
<div class="ridge">
<div class="text1">RIDGE BORDER</div>
</div>
<div class="double">
<div class="text1">DOUBLE BORDER</div>
</div>
<div class="inset">
<div class="text1">INSET BORDER</div>
</div>
<div class="dotted">
<div class="text1">DOTTED BORDER</div>
</div>
<div class="outset">
<div class="text1">OUTSET BORDER</div>
</div>
</div>
<!-- Second Div -->
<div class="two">
<div class="ridge1">
<div class="text2">Ridge</div>
</div>
<div class="dotted1">
<div class="text2">Dotted</div>
</div>
<div class="two">
<div class="inset1">
<div class="text2">Inset</div>
</div>
<div class="double1">
<div class="text2">Double</div>
</div>
<div class="two">
<div class="outset1">
<div class="text2">Outset</div>
</div>
<div class="groove1">
<div class="text2">Groove</div>
</div>
<div class="two">
<div class="dashed1">
<div class="text2">Dashed</div>
</div>
<div class="solid1">
<div class="text2">Solid</div>
</div>
</div>
</body>
</html>
WRITE HTML AND CSS CODE TO DESING DIFFERENT TYPE OF LAYOUT OF BELOW IMAGES
Stylesheet 1
<!DOCTYPE html>
<html>
<head>
<title>Stylesheet 1</title>
<style type="text/css">
/*Main Page*/
.main{
background-color: none;
width: 1000px;
margin-left: 165px;
}
/*Header*/
.a1{
background-color: rgb(76,175,80);
color: white;
border-radius: 6px;
}
.text1{
margin-left: 15px;
padding-top: 8px;
padding-bottom: -100px;
}
.text2{
margin-left: 18px;
margin-top: -25px;
padding-bottom: 20px;
}
/* left side bar*/
.abc{
background-color: none;
width: 155px;
height: 900px;
font-size: 20px;
margin-top: -10px;
}
.abc1{
background-color: rgb(76,175,80);
width: 155px;
height: 28px;
padding-top: 2px;
padding-left: 2px;
display: block;
border-radius: 5px;
}
.abc2{
background-color: rgb(241,241,241);
margin-top: 3px;
width: 155px;
height: 28px;
padding-left: 2px;
padding-top: 2px;
display: block;
border-radius: 5px;
text-decoration-line: none;
color: black;
}
.abc2:hover{
background-color: rgb(76,175,80);
width: 155px;
height: 28px;
color: white;
}
/*middle portion*/
.cde{
background-color: none;
width: 600px;
height: 210px;
margin-top: -922px;
margin-left: 170px;
}
.text3{
padding-top: 25px;
padding-left: 15px;
}
.text4{
margin-top: -25px;
padding-left: 15px;
}
.text5{
margin-top: -8px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
.cde2{
margin-top: -20px;
margin-left: 20px;
}
.def{
background-color: white;
width: 600px;
height: 140px;
margin-top: 22px;
margin-left: 0px;
}
.text6{
margin-left: 0px;
padding-left: 20px;
}
.text7{
margin-left: 0px;
padding-left: 20px;
margin-top: -8px;
font-size: 20px;
padding-right: 18px;
}
.link1{
margin-left: 20px;
margin-top: -10px;
}
/*Right Side Bar*/
.efg{
background-color: rgb(50,164,231);
width: 226px;
height: 358px;
margin-left: 774px;
margin-top: -210px;
}
.text9{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 20px;
padding-right: 20px;
margin-left: 0px;
color: white;
}
.text10{
padding-left: 10px;
font-size: 16px;
padding-right: 20px;
margin-left: 0px;
color: white;
}
.hij{
background-color: rgb(241,241,241);
font-size: 15px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 5px;
margin-top: 2px;
height: 80px;
}
</style>
</head>
<body>
<div class="main">
<!-- Heading -->
<div class="a1">
<h1 class="text1">Welcome to My Homepage</h1>
<p class="text2">Use the menu to select different Stylesheets</p>
</div>
<!-- Side Bar -->
<div class="abc">
<div><a class="abc1" style="color: white; text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet 1</a></div>
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet 2</a></div>
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet 3</a></div>
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet 4</a></div>
<div><a class="abc2" href="">No Stylesheet</a></div>
</div>
<!-- Middle portion -->
<div class="cde">
<div>
<h2 class="text3">Same Page Different</h2>
<h2 class="text4">Stylesheets</h2>
<p class="text5">
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
</p>
<div class="cde2">
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet1,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet2,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet3,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet4,</a>
</div>
</div>
<div class="def">
<h2 class="text6">No Styles</h2>
<p class="text7">This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:</p>
<div class="link1">
<a style="color: black;" href="">No Stylesheet.</a>
</div>
</div>
</div>
<!-- Right Side bar -->
<div class="efg">
<div class="text9">Side-Bar</div>
<div class="text10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="hij"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</center></div>
</div>
</body>
</html>
Stylesheet 2
<!DOCTYPE html>
<html>
<head>
<title>Stylesheet 2</title>
<style type="text/css">
/*Main Page*/
.main{
background-color: rgb(209,72,54);
width: 1000px;
height: 560px;
margin-top: -39px;
margin-left: 165px;
}
/*Header*/
.a1{
background-color: rgb(209,72,54);
font-size: 32px;
color: white;
border-radius: 6px;
}
.text1{
margin-left: 15px;
padding-top: 5px;
padding-bottom: -70px;
}
.text2{
margin-left: 25px;
margin-top: -40px;
padding-bottom: 3px;
}
/* left side bar*/
.abc{
margin-left: 830px;
background-color: white;
width: 150px;
height: 165px;
font-size: 20px;
margin-top: -110px;
margin-bottom: 200px;
}
.abc1{
text-align: center;
background-color: rgb(241,241,241);
width: 150px;
height: 25px;
border: 1px solid rgb(209,72,54);
padding-top: 4px;
padding-left: 2px;
display: block;
border-radius: 45px;
}
.abc2{
text-align: center;
background-color: rgb(209,72,54);
margin-top: 4px;
margin-bottom: 2px;
width: 150px;
height: 28px;
padding-left: 2px;
padding-top: 2px;
display: block;
border-radius: 45px;
text-decoration-line: none;
color: white;
}
.abc2:hover{
background-color: rgb(241,241,241);
border: 1px solid rgb(209,72,54);
border-radius: 45px;
width: 150px;
height: 28px;
color: rgb(209,72,54);
}
/*middle portion*/
.cde{
background-color: white;
width: 980px;
height: 110px;
margin-top: -5px;
margin-left: 10px;
padding-bottom: 10px;
}
.text3{
color: rgb(209,72,54);
font-size: 30px;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 5px;
}
.text5{
margin-top: -18px;
padding-left: 20px;
padding-right: 180px;
font-size: 16px;
}
.cde2{
margin-top: -18px;
margin-left: 20px;
padding-bottom: -10px;
}
.def{
background-color: white;
width: 980px;
height: 130px;
padding-top: 4px;
margin-top: -10px;
margin-left: 0px;
margin-bottom: -10px;
}
.text6{
margin-left: 0px;
padding-left: 20px;
color: rgb(209,72,54);
}
.text7{
margin-left: 0px;
padding-left: 20px;
margin-top: -8px;
font-size: 16px;
padding-right: 180px;
}
.link1{
margin-left: 20px;
margin-top: -18px;
}
/*Right Side Bar*/
.efg{
background-color: rgb(246,218,215);
width: 980px;
height: 100px;
margin-left: 10px;
margin-right: 10px;
margin-top: -152px;
}
.text9{
padding-top: 15px;
padding-bottom: 10px;
padding-left: 20px;
font-size: 20px;
padding-right: 20px;
margin-left: 0px;
color: rgb(209,72,54);
}
.text10{
padding-left: 20px;
font-size: 17px;
padding-right: 20px;
padding-top: -15px;
padding-bottom: -20px;
margin-left: 0px;
margin-right: 0px;
color: rgb(209,72,54);
}
.hij{
background-color: none;
font-size: 12px;
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 5px;
margin-top: 0px;
height: 45px;
}
</style>
</head>
<body>
<div class="main">
<!-- Heading -->
<div class="a1">
<h1 class="text1">Welcome to My Homepage</h1>
<p class="text2">Use the menu to select different Stylesheets</p>
</div>
<!-- Middle portion -->
<div class="cde">
<div>
<h2 class="text3">Same Page Different Stylesheets</h2>
<p class="text5">
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
</p>
<div class="cde2">
<a style="color: rgb(209,72,54);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet1,</a>
<a style="color: rgb(209,72,54);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet2,</a>
<a style="color: rgb(209,72,54);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet3,</a>
<a style="color: rgb(209,72,54);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet4,</a>
</div>
</div>
<div class="def">
<h2 class="text6">No Styles</h2>
<p class="text7">This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:</p>
<div class="link1">
<a style="color: rgb(209,72,54);" href="">No Stylesheet.</a>
</div>
</div>
</div>
<!-- Side Bar -->
<div class="abc">
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet 1</a></div>
<div><a class="abc1" style="color: rgb(209,72,54); text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet 2</a></div>
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet 3</a></div>
<div><a class="abc2" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet 4</a></div>
<div><a class="abc2" href="">No Stylesheet</a></div>
</div>
<!-- Right Side bar -->
<div class="efg">
<b><div class="text9">Side-Bar</div></b>
<div class="text10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="hij"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</center></div>
</div>
</body>
</html>
Stylesheet 3
<!DOCTYPE html>
<html>
<head>
<title>Stylesheet 3</title>
<style type="text/css">
/*Main Page*/
.main{
background-color: none;
width: 970px;
height: 560px;
margin-top: 2px;
margin-left: 165px;
border-top: 2px solid lightgray;
border-right: 2px solid lightgray;
}
/*Header*/
.a1{
background-color: none;
font-size: 16px;
color: black;
border-radius: 6px;
}
.text1{
margin-left: 15px;
padding-top: 5px;
padding-bottom: -70px;
color: rgb(76,175,80);
}
.text2{
margin-left: 18px;
margin-top: -20px;
padding-top: 10px;
padding-bottom: 3px;
}
/* left side bar*/
.abc{
margin-left: 0px;
padding-left: 30px;
background-color: none;
width: 980px;
height: 28px;
font-size: 18px;
margin-top: 30px;
margin-bottom: 200px;
}
.abc1{
text-align: center;
background-color: rgb(85,85,85);
color: white;
margin-top: 4px;
margin-bottom: 2px;
width: 160px;
height: 20px;
padding-left: 2px;
padding-top: 4px;
padding-bottom: 4px;
display: block;
border-radius: 0px;
text-decoration-line: none;
}
.abc1:hover{
background-color: rgb(76,175,80);
color: white;
border: 1px solid rgb(76,175,80);
border-radius: 0px;
width: 160px;
height: 20px;
}
.abc2{
text-align: center;
background-color: rgb(85,85,85);
color: white;
margin-top: -30px;
margin-bottom: 2px;
margin-left: 170px;
width: 160px;
height: 20px;
padding-left: 2px;
padding-top: 4px;
padding-bottom: 4px;
display: block;
border-radius: 0px;
text-decoration-line: none;
}
.abc2:hover{
background-color: rgb(76,175,80);
color: white;
border: 1px solid rgb(76,175,80);
border-radius: 0px;
width: 160px;
height: 20px;
}
.abc3{
text-align: center;
background-color: rgb(76,175,80);
color: white;
border: 1px solid rgb(76,175,80);
width: 160px;
height: 20px;
margin-left: 340px;
margin-top: -31px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 2px;
display: block;
border-radius: 0px;
}
.abc4{
text-align: center;
background-color: rgb(85,85,85);
color: white;
margin-top: -29px;
margin-bottom: 2px;
margin-left: 512px;
width: 160px;
height: 20px;
padding-left: 2px;
padding-top: 4px;
padding-bottom: 4px;
display: block;
border-radius: 0px;
text-decoration-line: none;
}
.abc4:hover{
background-color: rgb(76,175,80);
color: white;
width: 160px;
height: 20px;
}
.abc5{
text-align: center;
background-color: rgb(85,85,85);
color: white;
margin-top: -30px;
margin-bottom: 2px;
margin-left: 682px;
width: 160px;
height: 20px;
padding-left: 2px;
padding-top: 4px;
padding-bottom: 4px;
display: block;
border-radius: 0px;
text-decoration-line: none;
}
.abc5:hover{
background-color: rgb(76,175,80);
color: white;
border: 1px solid rgb(76,175,80);
border-radius: 0px;
width: 160px;
height: 20px;
}
/*middle portion*/
.cde{
background-color: white;
width: 920px;
height: 110px;
margin-top: -180px;
margin-bottom: 500px;
margin-left: 10px;
padding-bottom: 10px;
}
.text3{
color: rgb(76,175,80);
font-size: 30px;
padding-top: -85px;
padding-left: 20px;
padding-bottom: 5px;
}
.text5{
margin-top: -18px;
padding-left: 20px;
padding-right: 180px;
font-size: 16px;
}
.cde2{
margin-top: -18px;
margin-left: 20px;
padding-bottom: -10px;
}
.def{
background-color: white;
width: 940px;
height: 130px;
padding-top: 4px;
margin-top: -10px;
margin-left: 0px;
margin-bottom: -10px;
}
.text6{
margin-left: 0px;
padding-left: 20px;
color: rgb(76,175,80);
}
.text7{
margin-left: 0px;
padding-left: 20px;
margin-top: -8px;
font-size: 16px;
padding-right: 180px;
}
.link1{
margin-left: 20px;
margin-top: -18px;
}
/*Right Side Bar*/
.efg{
background-color: rgb(241,241,241);
width: 920px;
height: 100px;
margin-left: 28px;
margin-right: 10px;
margin-top: -412px;
}
.text9{
padding-top: 15px;
padding-bottom: 10px;
padding-left: 20px;
font-size: 20px;
padding-right: 20px;
margin-left: -10px;
color: rgb(76,175,80);
}
.text10{
padding-left: 20px;
font-size: 17px;
padding-right: 20px;
padding-top: -15px;
padding-bottom: -20px;
margin-left: -10px;
margin-right: 0px;
color: black;
}
.hij{
background-color: none;
font-size: 14px;
color: black;
padding-left: 40px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 5px;
margin-top: -2px;
height: 45px;
}
</style>
</head>
<body>
<div class="main">
<!-- Heading -->
<div class="a1">
<h1 class="text1">Welcome to My Homepage</h1>
<p class="text2">Use the menu to select different Stylesheets</p>
</div>
<!-- Side Bar -->
<div class="abc">
<div class="abc1"><a style="color: white; text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet 1</a></div>
<div class="abc2"><a style="color: white; text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet 2</a></div>
<div class="abc3"><a style="color: white; text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet 3</a></div>
<div class="abc4"><a style="color: white; text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet 4</a></div>
<div class="abc5"><a style="color: white; text-decoration-line: none;" href="">No Stylesheet</a></div>
</div>
<!-- Middle portion -->
<div class="cde">
<div>
<h2 class="text3">Same Page Different Stylesheets</h2>
<p class="text5">
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
</p>
<div class="cde2">
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet1,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet2,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet3,</a>
<a style="color: black;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet4,</a>
</div>
</div>
<div class="def">
<h2 class="text6">No Styles</h2>
<p class="text7">This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:</p>
<div class="link1">
<a style="color: black;" href="">No Stylesheet.</a>
</div>
</div>
</div>
<!-- Right Side bar -->
<div class="efg">
<b><div class="text9">Side-Bar</div></b>
<div class="text10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="hij"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</center></div>
</div>
</body>
</html>
Stylesheet 4
<!DOCTYPE html>
<html>
<head>
<title>Stylesheet 4</title>
<style type="text/css">
/*Main Page*/
.main{
background-color: black;
width: 1000px;
height: 600px;
margin-left: 165px;
}
/*Header*/
.a1{
background-color: none;
border-radius: 0px;
}
.text1{
margin-left: 30px;
color: rgb(132,199,84);
padding-top: 8px;
padding-bottom: -100px;
}
.text2{
margin-left: 30px;
color: rgb(79,151,72);
margin-top: -25px;
padding-bottom: 20px;
}
/* left side bar*/
.abc{
background-color: none;
width: 155px;
height: 900px;
font-size: 17px;
margin-top: -10px;
}
.abc1{
background-color: none;
width: 155px;
height: 5px;
padding-top: 2px;
padding-left: 2px;
display: block;
border-radius: 5px;
}
.abc2{
background-color: none;
margin-top: 0px;
width: 155px;
height: 5px;
padding-left: 2px;
padding-top: 2px;
display: block;
border-radius: 5px;
text-decoration-line: none;
color: rgb(79,151,72);
}
.abc2:hover{
background-color: none;
width: 155px;
height: 5px;
color: rgb(153,193,218);
}
ul{
color: rgb(79,151,72);
}
ul:hover{
color: rgb(153,193,218);
}
/*middle portion*/
.cde{
background-color: none;
width: 940px;
height: 160px;
margin-top: -792px;
margin-left: 20px;
}
.text3{
padding-top: 25px;
padding-left: 15px;
color: rgb(132,199,84);
}
.text5{
margin-top: -8px;
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
color: rgb(79,151,72);
}
.cde2{
margin-top: -10px;
margin-left: 20px;
}
.def{
background-color: none;
width: 940px;
height: 140px;
margin-top: 22px;
margin-left: 0px;
}
.text6{
margin-left: 0px;
padding-left: 20px;
color: rgb(132,199,84);
}
.text7{
margin-left: 0px;
padding-left: 20px;
margin-top: -8px;
font-size: 20px;
padding-right: 18px;
color: rgb(79,151,72);
}
.link1{
margin-left: 20px;
margin-top: -10px;
}
/*Right Side Bar*/
.efg{
background-color: none;
border: 1px solid rgb(153,193,218);
border-radius: 10px;
width: 400px;
height: 160px;
margin-left: 574px;
margin-top: -325px;
}
.text9{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 20px;
padding-right: 20px;
margin-left: 0px;
color: rgb(153,193,218);
}
.text10{
padding-left: 10px;
font-size: 16px;
padding-right: 20px;
margin-left: 0px;
color: rgb(153,193,218);
}
.hij{
width: 940px;
height: 40px;
background-color: none;
border: 1px solid rgb(153,193,218);
border-radius: 10px;
color: white;
font-size: 15px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: -10px;
margin-top: 290px;
margin-left: 20px;
height: 80px;
}
</style>
</head>
<body>
<div class="main">
<!-- Heading -->
<div class="a1">
<h1 class="text1">Welcome to My Homepage</h1>
<p class="text2">Use the menu to select different Stylesheets</p>
</div>
<!-- Side Bar -->
<div class="abc">
<div>
<ul>
<li><a class="abc2" style="text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet 1</a></li>
<ul>
</div>
<div>
<ul>
<li><a class="abc2" style="text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet 2</a></li>
<ul>
</div>
<div>
<ul>
<li><a class="abc2" style="text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet 3</a></li>
<ul>
</div>
<div>
<ul style="color: rgb(153,193,218);">
<li><a class="abc1" style="color: rgb(153,193,218); text-decoration-line: none;" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet 4</a></li>
<ul>
</div>
<div>
<ul>
<li><a class="abc2" style="text-decoration-line: none;" href="">No Stylesheet</a></li>
<ul>
</div>
</div>
<!-- Middle portion -->
<div class="cde">
<div>
<h2 class="text3">Same Page Different Stylesheets</h2>
<p class="text5">
This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links:
</p>
<div class="cde2">
<a style="color: rgb(153,193,218);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index1.html">Stylesheet1,</a>
<a style="color: rgb(153,193,218);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index2.html">Stylesheet2,</a>
<a style="color: rgb(153,193,218);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index3.html">Stylesheet3,</a>
<a style="color: rgb(153,193,218);" href="file:///D:/E-Rozgar%20(Course%20Training%20Lectures)/13.%208-1-2021/index4.html">Stylesheet4,</a>
</div>
</div>
<div class="def">
<h2 class="text6">No Styles</h2>
<p class="text7">This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet:</p>
<div class="link1">
<a style="color: rgb(153,193,218);" href="">No Stylesheet.</a>
</div>
</div>
</div>
<!-- Right Side bar -->
<div class="efg">
<div class="text9">Side-Bar</div>
<div class="text10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="hij"><center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</center></div>
</div>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment