z-index property is use to create layer like stack in program. It use with positional element. The value of z-index must be integer value. Note: Z-index only works on position elements ( absolute, relative, fixed) and flex items.
Syntax
z-index: integer value
z-index:4Example
<html>
<body>
<h1>z-index property</h1>
<div style = "background-color:blue;
width:200px;
height:100px;
position:relative;
top:120px;
left:80px;
z-index:2">
</div>
<div style = "background-color:brown;
width:200px;
height:100px;
position:relative;
top:50px;
left:35px;
z-index:1;">
</div>
<div style = "background-color:black;
width:200px;
height:100px;
position:relative;
top:-120px;
left:120px;
z-index:3;">
</div>
</body>
</html>
Margin Style
CSS margins are use to create space around the element. It is use negative values to overlap content is knows as Margin Style.
Four margin properties
- Margin-left.
- It is use to set the left margin of an element.
- Margin-right.
- It is use to set the right margin of an element.
- Margin-top.
- It is use to set the top margin of an element.
- Margin-bottom.
- It is use to set the bottom margin of an element.
Syntax
body
{
margin: size;
}
Example
<html>
<head>
<style>
h1.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<h1 class="ex">margin-top, margin-bottom margin-left, margin-right</h1>
</body>
</html>
Padding style
It is use to create space around the element, inside any border is knows as Padding Style.
Four Padding properties
- Padding-left
- It is use to set the left padding of an element.
- Padding-top
- It is use to set the top padding of an element.
- Padding-right
- It is use to set the right padding of an element.
- Padding-bottom
- It is use to set the bottom padding of an element.
<html>
<head>
<style>
h1.ex {
Padding-top: 50px;
Padding-bottom: 100px;
Padding-right: 150px;
Paddingleft: 200px;
border: 5px solid green;
}
</style>
</head>
<body>
<h1 class="ex">Padding-top,Padding-bottom Padding-left, Padding-right</h1>
</body>
</html>
CSS Color
CSS Color property is use to set the color of elements is knows as CSS Color
Six color format
- RGB format
- RGBA format
- HSL
- HSLA
- Hexadecimal notation
- Built-in color
RGB format
- RGB full from Red Green Blue.
- RGB format ranges (0 to 255).
- RGB format property is not supported in all browsers.
Syntax
h1 {
color: rgb(R, G, B);
}Example
<html>
<head>
<style>
h1{
color: rgb(139,0,0);
text-align:center;
}
</style>
</head>
<body>
<h1>
RGB Color
</h1>
</body>
</html>
RGBA Format
- The RGBA format is similar to the RGB, but the difference is A means Alpha.
- Alpha is a determine the transparency of elements.
- Alpha ranges (0.0 to 1.0).
- 0.0 means it is represents fully transparent.
- 1.0 means it is represents not transparent.
Syntax
h1 {
color:rgba(R, G, B, A);
}Example
<html>
<head>
<style>
h1{
color:rgba(0, 153, 0, 0.3);
text-align:center;
}
</style>
</head>
<body>
<h1>
RGBA Color
</h1>
</body>
</html>
HSL
- HSL full form Hue, Saturation, and Lightness.
- Hue means degree of the color.
- Saturation means percentage of the color.
- Lightness means also percentage of the color.
Syntax
h1 {
color:hsl(H, S, L);
}HSLA
- HSLA is similar to the HSL but the difference is A means Alpha.
Syntax
h1 {
color:hsla(H, S, L, A);
}Hexadecimal notation
- The hexadecimal notation start with # symbol.
- hexadecimal notation ranges (0 to f).
Syntax
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}Built-in color
- It is a set of predefined colors.
- define by name.
Syntax
h1 {
color: color-name;
}
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article
To know more about CSS color please check Wikipedia Click here.
Stay Connected Stay Safe. Thank you
0 Comments