Display properties are some of the most widely used CSS features in web design and development.
Let's check them out.
The all CSS property resets an element's properties to its default values, and it looks like this:
all: initial;
The only properties that are not reset are the
direction and unicode-bidi properties, which control text direction. This is important because text direction is required to understand the content. If these properties were reset by the all property, then text would run the opposite way it's supposed to, disrupting the message completely.
This property supports three keyword values: initial, inherit, and unset.
initial: This changes all the properties of the element or the element's parent to their initial values.inherit: This changes all the properties of the element or the element's parent to their parent values.unset: This changes all the properties of the element or the element's parent to their parent values if those properties are inheritable, otherwise it will change them to their initial value.
CSS:
/*Change an element's properties to their initial value*/
.element { all: initial; }
/*Inherit all the initial properties of the parent container*/
.element { all: inherit; }
/*Change the parent's properties to its parent values if inheritable*/
.parent-container { all: unset; }The clear CSS property specifies which side of an element, or both, should not float, and it looks like this:
clear: both;
When the clear property is used, it clears the specific box in question, not its child elements. If we wanted to clear its child elements, we'd have to declare the clear property on them.
When dealing with float-based grids, this property is crucial to the layout. That is because floated elements are taken out of the document flow. Thus, their parent container will not take them into account and its height isn't determined by those floated elements anymore.
So, adding a clearing declaration (with the display and content properties) to the parent's :after pseudo element "tells" the parent element to consider the floated elements and thus the parent container's height is now determined by the tallest floating child element. Let's take a look at the following image:
Here is a demo in CodePen: http://tiny.cc/clearing-floats
The clear CSS property supports four values: left, right, both, and none.
left: It means that floated elements to the left are not allowed.right: It means that floated elements to the right are not allowed.both: It means that floated elements, both left and right, are not allowed.none: This is the default value. No clearing is performed and floating elements to both sides are allowed.
CSS:
/*Float an element to the left*/
.element-a { float: left; }
/*Float an element to the right*/
.element-b { float: right; }
/*Clear the floats on the parent container*/
.parent-container:after {
content: '';
display: table;
clear: both;
}The display CSS property defines how an element (box) should be or should not be displayed on a page. It looks like this:
display: block;
This property accepts about 25 keyword values; some of them are very obscure and rarely used. Let's focus on the 15 most relevant ones:
blockflexgridinlineinline-blockinline-flexnonetabletable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-groupblock: Makes an element be displayed as a block-level element, like a<div>tag or an<h1>element.flex: Makes an element be displayed as a block-level element and lays out its content based on theFlexboxmodel.grid: Makes an element be displayed as a block-level element and lays out its content based on theGridmodel.inline: Makes an element be displayed as an inline-level element, like a link<a>element.inline-block: Makes an element be displayed as aninline-blockelement, like a list<li>element.inline-flex: Makes an element be displayed as an inline element and lays out its content based on theFlexboxmodel.none: Hides the element from rendering in the browser. The element still exists in the markup though. When this value is applied to an element, the browser does not render the element and all its children.
In the following list, all the table-related values are mapped to an HTML element. So when any of those values are applied to an element, they make that element behave as a table-related element. Let's take a look at the attributes:
- table =
<table> - table-cell =
<td> - table-column =
<col> - table-column-group =
<colgroup> - table-footer-group =
<tfoot> - table-header-group =
<thead> - table-row =
<tr> - table-row-group =
<tbody>
Visit MDN for a list of all the display values: http://tiny.cc/mdn-display
CSS:
/*Make an element display like a block level element*/
.element { display: block; }
/*Make an element display like a <table> element*/
.element { display: table; }
/*Make an element display like an inline-block element - <li>*/
.element { display: inline-block; }
/*Hide an element an its children*/
.element { display: none; }The
opacity CSS property defines the transparency (opacity) of an element, and it looks like this:
opacity: .55;
When the opacity property is applied to an element, the element itself and its children are affected.
This property supports a numeric value ranging from 0.0 (zero) to 1.0, which is the default value. A value of 0 is completely transparent, as in 0 percent opaque, and 1 is 100 percent opaque, no transparency whatsoever. Decimal numbers are allowed.
This property behaves the same as the alpha channel value used in the RGBa and HSLa color modes.
CSS:
/*Make an element 55% opaque. This affects its children as well*/
.element { opacity: .55; }
/*Makes shadow 20% opaque. Same effect as in RGBa and HSLa color modes.*/
.element { box-shadow: 0 0 5px rgba(0, 0, 0, .2); }The filter CSS property allows us to apply visual effects to an img element or to the background or border properties, and it looks like this:
filter: blur(10px);
A few examples of CSS filters are blur, turning a color image into grayscale or sepia, or changing its opacity.
This property supports 11 values. These values are called CSS functions. Multiple functions can be declared in the same selector, separated by a space.
Let's see the list:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
This gives a smudge effect. Values are declared as length values (px, em, in, mm, cm, vw and so on). The higher the value, the more intense the blur effect is (and vice versa).
Percentage and negative values are not allowed, but decimal values are allowed.
This modifies the illumination of an image. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
A value of 100% leaves the element unchanged, and a value of 0% makes the element completely black. Values over 100% are allowed and create a more intense effect. There is no limit to the value.
Then, a value of 1 leaves the element unchanged; a value of 0 makes the element completely black. Values over 1 are allowed and create a more intense effect. There is no limit to the value. Negative values are not valid.
This modifies the contrast of an element. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
A value of 100% leaves the element unchanged, and a value of 0% makes the element completely black. Values over 100% are allowed and create a more intense effect. There is no limit to the value.
Then, a value of 1 leaves the element unchanged; a value of 0 makes the element completely black. Values over 1 are allowed and create a more intense effect. There is no limit to the value. Negative values are not valid, and decimal values are allowed.
This adds a shadow under the element.
This function works almost exactly the same way as the box-shadow property with two differences: the drop-shadow() function doesn't support the spread-radius attribute or the inset values.
Please refer to the box-shadow property for a detailed description of all the values.
Additionally, some browsers actually provide hardware acceleration when using this function, which eventually improves performance. You know how it goes, anything we can do to improve performance is always a+1.
This converts an element to grayscale. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
A value of 0% leaves the element unchanged; a value of 100% makes the element grayscale. Values over 100% are not allowed.
A value of 0 leaves the element unchanged, and a value of 1 makes the element grayscale. Values over 1 are not allowed. Negative values are not valid, and decimal values are allowed.
This applies a hue rotation to the element. It accepts an angle value.
The angle value defines the degrees around the color wheel the element sample will be modified to. There isn't a maximum value, however, if the value is larger than 360deg, the rotation will just go around. For example, if we declare 380deg, that would the same as 20deg.
The invert() function inverts the color of the element. If used in an image, it makes the image look like a film negative.
A value of 100% completely inverts the element's color; a value of 0% leaves the element unchanged. Values over 100% are not allowed.
A value of 1 completely inverts the element's color, and a value of 0 leaves the element unchanged. Values over 1 are not allowed.
Negative values are not valid, and decimal values are allowed.
It defines the transparency (opacity) of an element. When this function is applied to an element, the element itself and its children are affected.
This function supports a numeric value ranging from 0 (zero) to 1, which is the default value. A value of 0 is completely transparent, as in 0% opaque, and 1 is 100% opaque, no transparency whatsoever.
Negative values are not valid, and decimal values are allowed.
It affects the saturation levels of an element. Values are declared as either a percentage or a number without a unit, for example, 10% and 0.5%.
The default saturation value of an element is 100%, or 1 if using a unitless number.
A value of 0% completely desaturates the element (it removes all color leaving the element in grayscale); a value of 100% leaves the element unchanged. Values over 100% are allowed, creating a more intense effect.
A value of 0 completely desaturates the element (it removes all color leaving the element in grayscale), and a value of 1 leaves the element unchanged. Values over 1 are allowed, creating a more intense effect.
This converts an element to sepia—think of a grayscale image but in shades of brown.
A value of 100% completely turns the element to sepia; a value of 0% leaves the element unchanged. Values over 100% are not allowed.
A value of 1 completely turns the element to sepia; a value of 0 leaves the element unchanged. Values over 1 are not allowed. Negative values are not valid.
It takes the location of an XML file with an SVG filter to be applied to the element. The URL may include an anchor to a specific filter element in the SVG.
CSS:
/*Blur*/
.element { filter: blur(10px); }
/*Brightness*/
.element { filter: brightness(20%); }
/*Contrast*/
.element { filter: contrast(10); }
/*Drop shadow*/
.element { filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, .5)); }
/*Grayscale*/
.element { filter: grayscale(.8); }
/*Hue rotation*/
.element { filter: hue-rotate(80deg); }
/*Invert*/
.element { filter: invert(1); }
/*Opacity*/
.element { filter: opacity(.2); }
/*Saturation*/
.element { filter: saturate(300%); }
/*Sepia*/
.element { filter: sepia(100%); }
/*URL*/
.element { filter: url(/images/file.svg#blur); }
/*Multiple filters for a single element*/
.element { filter: sepia(100%) saturate(200%) hue-rotate(50deg); }The
overflow CSS property defines how a block level element should handle content that "bleeds" (overflows) outside its boundaries, and it looks like this:
overflow: auto;
A peculiarity of the overflow property is that it is used to clear floats and make the parent container expand vertically to wrap the floating elements. This is accomplished by using any of the following values except visible.
However, a word of caution. When using the prior technique since it can have unforeseen effects. For example, if a child element has a box-shadow, the shadow could be clipped/hidden.
In order for content to overflow, the parent container needs to have a fixed height or the content needs to have a white-space: nowrap; declaration applied to it.
This property supports four keyword values: auto, hidden, scroll, and visible.
auto: This creates horizontal and vertical scrollbars only if necessary. In other words, if the content overflows the container in any direction, the browser will create scrollbars in one or both axes.hidden: This will clip/hide the content that's outside of the element. No scrollbars are generated. This value is very popular when clearing floats. Again, be careful when using this value.scroll: This creates horizontal and vertical scrollbars even if the content isn't overflowing the container.visible: This is the default value. No content is clipped/hidden and no scrollbars are generated.
CSS:
/*Scroll bars are generated if the content needs them*/
.element {
white-space: nowrap;
overflow: auto;
}
/*Clearing floats. Be careful with this technique*/
.parent-container { overflow: hidden; }The overflow-x CSS property behaves the same as the overflow property, and it looks like this:
overflow-x: auto;
The
overflow-y CSS property behaves like the overflow property, and it looks like this:
overflow-y: auto;
The
visibility CSS property defines whether an element is visible or not, and it looks like this:
visibility: hidden;
The visibility property is similar to display: none; in terms of hiding an element; the difference is that when hiding an element with the visibility property, the space the element occupies still affects the layout. It's just "invisible". With display: none;, it's like the element doesn't even exist.
The visibility CSS property is not inheritable; in other words, we can still make the child elements visible even if their parent container is not. It can also be used to hide rows and columns in tables.
This property supports three different keyword values: collapse, hidden, and visible.
collapse: This is used only on table elements to remove rows or columns. However, the collapsed/hidden elements still affect the layout since they are still taking up their space. If this value is used in other elements than a table elements, they will be treated as if the valuehiddenis being used.hidden: This is used to visually hide an element. However, any hidden elements still affect the layout because they are still taking up their space.visible: This is the default value. It makes an element visible.
CSS:
/*Hide an element*/
.element { visibility: hidden; }
/*Parent container visible while child heading is visible*/
.parent-container { visibility: hidden; }
.parent-container h1 { visibility: visible; }
/*Hide table elements*/
tr { visibility: collapse; }
tfoot { visibility: collapse; }The z-index CSS property defines the stacking order of elements. Think of it in this way: elements sometimes overlap, like a stack of poker cards on a table. The card sitting at the top of the stack has the highest z-index, the card sitting at the bottom has the lowest z-index.
For this property to work, the element has to have a position property declared with any value different from static.
The z-index property accepts two values: a number and a keyword value.
CSS:
/*Set all cards to relative position so z-index can work*/
.card { position: relative; }
/*The Ace card sits on top of the pile*/
.card.ace { z-index: 2; }
/*The Five card sits at the bottom of the pile*/
.card.five { z-index: 0; }
/*The Queen card sits in between the Ace and the Five*/
.card.queen { z-index: 1; }