Css Display property
Css Display Property The display property specifies the display behavior of an element.This property are as follows:
- Inline:-Displays an element as an inline element (like ). Any height and width properties will have no effect. This is default.
- Block:-Displays an element as a block element (like < p >). It starts on a new line, and takes up the whole width
- Flex:-Displays an element as a block-level flex container
- Grid:-Displays an element as a block-level grid container
- None:-The element is completely removed
Inline
Displays an element as an inline element (like < span>). Any height and width properties will have no effect. And it is default
Example
Box 1
Box 2
Box 3
block
Displays an element as a block element (like < p >). It starts on a new line, and takes up the whole width
Example
Box 1
Box 2
Box 3
flex
Displays an element as a block-level flex container
Example
Box 1
Box 2
Box 3
grid
Displays an element as a block-level grid container
Example
Box 1
Box 2
Box 3
none
The element is completely removed
Example
Box 1
Box 2
Box 3
As you can see the boxes are tatally removed.
Box Shadow
Box Shadow The CSS box-shadow property is used to apply one or more shadows to an element.It allows you to specify horizontal and vertical shadows. The defualt color of shadow is text defualt color.
Example
div {
background-color : green ;
width : 100px ;
height : 100px ;
box-shadow : 10px 10px ;
}
Result
To specify shadow color:
The color parameter defines the color of the shadow.
Example
div {
background-color : green ;
width : 100px ;
height : 100px ;
box-shadow : 10px 10px red;
}
Result
To add blur shadow effect:
The blur parameter defines the blur radius. The higher the number, the more blurred the shadow will be.
Example
div {
background-color : green ;
width : 100px ;
height : 100px ;
box-shadow : 10px 10px 10px red;
}
Result
Css Background
The Background property is a shorthand property for:
- background-color
- background-image
- background-repeat
- background-size
background-color
The background-color property sets the background color of an element.
Example
div {
background-color : purple ;
width : 100px ;
height : 100px ;
}
In the above code we set the background color of the div element to purple color.
Result
background-image
The background-image property sets one or more background images for an element. you can set the background-image using the url css value where you can put the url of the image.
Example
div {
background-color : url(image/bgi.jpeg) ;
height : 500px ;
}
In the above code we set the background image of the div element using the url css value.
Result
background-repeat
The background-repeat property sets if/how a background image will be repeated. If you don't want ypur background to be repeated you can use no-repeat value.
Example
div {
background-color : purple ;
background-repeat : no-repeat ;
height : 500px ;
}
In the above code we set the background repeat to no-repeat property.
Result
background-repeat
The background-size property specifies the size of the background images. The background-size property can contain four values ("auto", "cover" and "contain").
Example
div {
background-color : purple ;
background-repeat : no-repeat ;
background-size : cover ;
height : 500px ;
}
In the above code we set the background size to cover property.
Result
Css-positions
The position property specifies the type of positioning method used for an element.
There are five different position values:
- absolute
- relative
- fixed
- sticky
- static
absolute position
An element with absolute position is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
relative position
An element with relative position is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Example
.relative {
background-color : blue ;
position : relative ;
height : 500px ;
}
.absolute {
background-color : purple ;
position : absolute ;
top : 10px ;
right : 5px ;
width : 200px ;
height : 200px ;
}
Result
In the above result the div container with the blue background color is set to relative positioning and the purple div container is set to absolute positioning
Fixed position
An element with fixed position is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Example
.fixed {
background-color : yellow ;
position : fixed ;
top : 5px ;
width : 200px ;
height : 200px ;
}
Result
In the above result the div container with the content "this is fixed element"is set top position: fixed; as you can see even if you scroll down it remains where it is.
sticky position
An element with sticky position is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Example
.sticky {
background-color : yellow ;
position : sticky ;
top : 5px ;
width : 200px ;
height : 200px ;
}
Result
In the above result the div container with the content "this is sticky element"is set top position: sticky; as you can see even if you scroll down it remains where it is.
static position
All HTML elements are positioned static by default.
An element with static position An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Example
.static {
background-color : red ;
position : sticky ;
width : 200px ;
height : 200px ;
}