The CSS background property is utilized to characterize the background impacts on the component. Numerous CSS background properties influences the HTML components:
- background-color
The background-color property is utilized to determine the foundation shade of the component. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
Output:
- background-image
The background-image property is utilized to set a picture as a foundation of a component. As a matter of course the picture covers the whole component. You can set the foundation picture for a page like this. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
margin-left:100px;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
Output:
- background-repeat
As a matter of course, the background-image property repeats the background-image evenly and in an upward direction. A few pictures are rehashed just evenly or in an upward direction. The background looks better if the picture repeated evenly as it were. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
Output:
Or
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
- background-position
The background-position property is utilized to characterize the underlying situation of the background-image. As a matter of course, the background-image is set on the upper left of the website page. You can set the accompanying positions: center, top, bottom, left, right. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<h1>
This is CSS
</h1>
<div>
Hello Everyone!
</div>
</body>
</html>
Output:
CSS - Fonts
- The font-family property is utilized to change the substance of a text style.
- The text style property is utilized to make a textual style italic or diagonal.
- The textual style variation property is utilized to make the impact of a little cover.
- The text style weight property is utilized to increment or decline how strong or light a text style shows up.
- The text dimension property is utilized to increment or decline the size of a textual style.
- The textual style property is utilized as shorthand to determine various other text style properties.
Set the Font Family
Following is the model, which shows how to set the textual style group of a component. Conceivable worth could be any font-family name. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
</p>
</body>
</html>
Output:
Set the Font Style
Following is the model, which shows how to set the text style of a component. Potential qualities are typical, italic and slanted. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-style: italic;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
</p>
</body>
</html>
Output:
Set the Font Variant
The accompanying model shows how to set the text style variation of a component. Potential qualities are typical and little covers. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-variant: small-caps;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
</p>
</body>
</html>
Output:
Set the Font Weight
The accompanying model shows how to set the textual style weight of a component. The textual style weight property gives the usefulness to determine how striking a text style is. Potential qualities could be typical, striking, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-weight: bold;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
</p>
<br>
<p style="font-weight: bolder;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quae assumenda nisi deserunt repellendus accusantium dolore expedita, numquam, ut enim tempore sunt dolorem optio odit doloribus, molestiae at obcaecati nemo!
</p>
<br>
<p style="font-weight: lighter;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, enim repellat nobis quisquam aspernatur eos libero ducimus laboriosam repellendus ipsam consectetur. Quaerat libero obcaecati non ex ad laboriosam quisquam cumque.
</p>
</body>
</html>
Output:
Set the Font Size
The accompanying model shows how to set the text dimension of a component. The text dimension property is utilized to control the size of textual styles. Potential qualities could be xx-little, x-little, little, medium, huge, x-enormous, xx-huge, more modest, bigger, size in pixels, or %. For example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p style="font-size: larger;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
</p>
<br>
<p style="font-size: smaller;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quae assumenda nisi deserunt repellendus accusantium dolore expedita, numquam, ut enim tempore sunt dolorem optio odit doloribus, molestiae at obcaecati nemo!
</p>
<br>
<p style="font-size: medium;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, enim repellat nobis quisquam aspernatur eos libero ducimus laboriosam repellendus ipsam consectetur. Quaerat libero obcaecati non ex ad laboriosam quisquam cumque.
</p>
</body>
</html>
Output:
