<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border wieght and hight and background</title>
<style>
/* in this html page first we study about the back ground color of the any bolck after that we will study the border of the css and its properties then we will study the alignment of the img and also background img of the css next we will study its properties */
.head {
background-color: rgb(229 224 181);
border-style: solid;
border-width: 10px;
border-top-left-radius: 30px;
border-top: 4px solid darkgoldenrod;
border-left: 8px solid lightgoldenrodyellow;
border-right: 8px solid lightgoldenrodyellow;
border-bottom: 4px solid lightgray;
padding-left: 10px;
}
/* backgrond color cab begiven by simple code background color and it will give color according to selection next element is the border
*/
/* border tag is used to give the bordeer to any thing like image para or any other tag it may be off different size and we will take it in different color also and also change the size and color of the left right top bottm and also we can change the corner into to bend type by using the radius tag and this tag is used to circular the corner of the border it also have from left top right top and left right bottom next we will also give padding etc we will discuss pading in next lectures */
.para {
height: 500px;
width: 500px;
border-width: 500px;
background-image: url(KurulusOsmanSeason2Poster.jpg);
background-repeat: no-repeat;
border: 5px solid rgb(90, 213, 235);
background-position: center center;
/* background image tag is usedto put image on the page and this image will be on the background like main page and text or any other thing will be written onit so this tag cna be allighned the images by uing many other tags in htcss like background positioing or alignment and alighnt ment o the the image have many types like top top botmbottom top left top right bottm left or bottem right this alighnment have many others tag for its properties which can be used in different types and at different requirements */
/* image repeat is used to repeat one image at many type and it used only when we write the repeat and other attributes according to requirement */
}
</style>
</head>
<body>
<h4 class="head">
this is head class of this page Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Soluta reprehenderit fuga officiis, corporis rerum
incidunt numquam ad temporibus provident iusto exercitationem ipsum
consequatur magni debitis tempora voluptas dolores. Totam rem ex autem
facere temporibus, blanditiis sint praesentium harum voluptatem
consequuntur!
</h4>
<p class="para">
this is paragraph class of this page Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Temporibus sapiente soluta quo deserunt
illo ut, saepe corporis quas reprehenderit explicabo dolores accusamus
fugiat. Inventore dicta iure dolorum optio sed beatae, quisquam
consectetur vitae quaerat quos blanditiis. Nesciunt tenetur, suscipit
possimus recusandae ratione quam fugit delectus consectetur. Mollitia,
incidunt iusto. Dolorum?
</p>
<p class="seconpara">
this is second paragraph of this page Lorem ipsum dolor sit amet
consectetur adipisicing elit. Eveniet obcaecati, voluptates itaque sed
rerum hic voluptatum dolore, sint delectus dolorum soluta, pariatur labore
reiciendis esse est aut! Rerum odit dolores corrupti corporis error
reprehenderit obcaecati magni dolorem officia qui, exercitationem
perferendis excepturi. Cumque illum voluptatibus recusandae, adipisci, vel
quas tempora natus asperiores unde iste nihil? Iste, rem placeat.
Repudiandae, dicta officiis. Sapiente nobis eos facilis.
</p>
<!-- this is all about the background image and borders and its colrs and sizesand i like to ends there next we will study margin and padding of the box -->
<p><strong>Thank you</strong></p>
</body>
</html>