A CSS pseudo-element is used to style specific parts of an element.
For example, it can be used to:
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
The descendant combinator matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins. Continue reading CSS Layout – Align
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with
display: inline-blockdisplay: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
left – The element floats to the left of its containerright – The element floats to the right of its containernone – The element does not float (will be displayed just where it occurs in the text). This is defaultinherit – The element inherits the float value of its parentIn its simplest use, the float property can be used to wrap text around images. Continue reading CSS Layout – float and clear
The CSS overflow property controls what happens to content that is too big to fit into an area.
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
visible – Default. The overflow is not clipped. The content renders outside the element’s boxhidden – The overflow is clipped, and the rest of the content will be invisiblescroll – The overflow is clipped, and a scrollbar is added to see the rest of the contentauto – Similar to scroll, but it adds scrollbars only when necessaryThe z-index property specifies the stack order of an element.
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
The position property specifies the type of positioning method used for an element.
There are five different position values:
staticrelativefixedabsolutestickyElements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins:
Note: The problem with the <div> above occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page. Continue reading CSS Layout – Width