From fb5c081edbe5c304d108deb4f3cef4f196886b31 Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 17:38:11 +0000 Subject: [PATCH 1/8] Format html --- _includes/lists/main-list.html | 25556 +++++++++++++++++++------------ 1 file changed, 15334 insertions(+), 10222 deletions(-) diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html index c08d28ac..de19112d 100644 --- a/_includes/lists/main-list.html +++ b/_includes/lists/main-list.html @@ -15,145 +15,292 @@

- + + + + +
+
+

+ default + + align-content: stretch; +

+
+

Each line will stretch to fill the remaining space.

+

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

+
+
- - - -
-
-

- default - - - align-content: stretch; -

-
-

Each line will stretch to fill the remaining space.

-

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

- -
-
- -
-
-
-

- - - align-content: flex-start; -

-
-

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

+
+ + +
+
+
+

+ + align-content: flex-start; +

+
+

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

-
-
+ + -
-
-
-

- - - align-content: flex-end; -

-
-

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

+
+ + + +
+
+
+

+ + align-content: flex-end; +

+
+

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

-
-
+ + -
-
-
-

- - - align-content: center; -

-
-

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

+
+ + + +
+
+
+

+ + align-content: center; +

+
+

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

-
-
+ + -
-
-
-

- - - align-content: space-between; -

-
-

Each line will only fill the space it needs. The remaining space will appear between the lines.

+
+ + + +
+
+
+

+ + align-content: space-between; +

+
+

Each line will only fill the space it needs. The remaining space will appear between the lines.

-
-
+ + -
-
-
-

- - - align-content: space-around; -

-
-

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

+
+ + + +
+
+
+

+ + align-content: space-around; +

+
+

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

-
-
+ + -
+ + + + +
@@ -174,127 +321,234 @@

- - - - + + + + +
+
+

+ + align-items: flex-start; +

+
+

The flexbox items are aligned at the start of the cross axis.

+

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

+
+
-
-
-

- - - align-items: flex-start; -

-
-

The flexbox items are aligned at the start of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

- -
-
- -
-
-
-

- - - align-items: flex-end; -

-
-

The flexbox items are aligned at the end of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

+
+ + + +
+
+
+

+ + align-items: flex-end; +

+
+

The flexbox items are aligned at the end of the cross axis.

+

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

-
-
+ + -
-
-
-

- - - align-items: center; -

-
-

The flexbox items are aligned at the center of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

+
+ + + +
+
+
+

+ + align-items: center; +

+
+

The flexbox items are aligned at the center of the cross axis.

+

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

-
-
+ + -
-
-
-

- - - align-items: baseline; -

-
-

The flexbox items are aligned at the baseline of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

+
+ + + +
+
+
+

+ + align-items: baseline; +

+
+

The flexbox items are aligned at the baseline of the cross axis.

+

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

-
-
+ + -
-
-
-

- - - align-items: stretch; -

-
-

The flexbox items will stretch across the whole cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

+
+ + + +
+
+
+

+ + align-items: stretch; +

+
+

The flexbox items will stretch across the whole cross axis.

+

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

-
-
+ + -
+ + + + +
@@ -315,127 +569,267 @@

- - - - - + + + + +
+
+

+ + align-self: flex-start; +

+
+

If the container has align-items: center and the target has align-items: flex-start, only the target will be at the start of the cross axis.

+

By default, this means it will be aligned vertically at the top.

-
-
-

- - - align-self: flex-start; -

-
-

If the container has align-items: center and the target has align-items: flex-start, only the target will be at the start of the cross axis.

-

By default, this means it will be aligned vertically at the top.

- -
-
+
+
-
-
-
-

- - - align-self: flex-end; -

-
-

If the container has align-items: center and the target has align-items: flex-end, only the target will be at the end of the cross axis.

-

By default, this means it will be aligned vertically at the bottom.

+
+ + + +
+
+
+

+ + align-self: flex-end; +

+
+

If the container has align-items: center and the target has align-items: flex-end, only the target will be at the end of the cross axis.

+

By default, this means it will be aligned vertically at the bottom.

-
-
+ + -
-
-
-

- - - align-self: center; -

-
-

If the container has align-items: flex-start and the target has align-items: center, only the target will be at the center of the cross axis.

-

By default, this means it will be vertically centered.

+
+ + + +
+
+
+

+ + align-self: center; +

+
+

If the container has align-items: flex-start and the target has align-items: center, only the target will be at the center of the cross axis.

+

By default, this means it will be vertically centered.

-
-
+ + -
-
-
-

- - - align-self: baseline; -

-
-

If the container has align-items: center and the target has align-items: baseline, only the target will be at the baseline of the cross axis.

-

By default, this means it will be aligned along the basline of the text.

+
+ + + + +
+
+
+

+ + align-self: baseline; +

+
+

If the container has align-items: center and the target has align-items: baseline, only the target will be at the baseline of the cross axis.

+

By default, this means it will be aligned along the basline of the text.

-
-
+ + -
-
-
-

- - - align-self: stretch; -

-
-

If the container has align-items: center and the target has align-items: stretch, only the target will stretch along the whole cross axis.

+
+ + + +
+
+
+

+ + align-self: stretch; +

+
+

If the container has align-items: center and the target has align-items: stretch, only the target will stretch along the whole cross axis.

-
-
+ + -
+ + + + + @@ -454,102 +848,129 @@

-
- -
+
+ +
- - - - - - -
-
-

- default - - - animation-delay: 0s; -

-
-

The animation will wait zero seconds, and thus start right away.

- -
-
- - - -
-
-
-

- - - animation-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

+ + + + +

+
+

+ default + + animation-delay: 0s; +

+
+

The animation will wait zero seconds, and thus start right away.

+
+
- animation-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

+ + +
+
+
+

+ + animation-delay: 1.2s; +

+
+

You can use decimal values in seconds with the keyword s.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + animation-delay: 2400ms; +

+
+

You can use milliseconds instead of seconds, with the keyword ms.

+
+
- animation-delay: -500ms; -

-
-

You can use negative values: the animation will start as if it had already been playing for 500ms.

+ + +
+
+
+

+ + animation-delay: -500ms; +

+
+

You can use negative values: the animation will start as if it had already been playing for 500ms.

-
-
+ + - - -
+ + + @@ -568,102 +989,139 @@

-
- -
+
+ +
- - - - - - -
-
-

- default - - - animation-direction: normal; -

-
-

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

- -
-
- - - -
-
-
-

- - - animation-direction: reverse; -

-
-

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

- -
-
- - - -
-
-
-

+ + + + +

+
+

+ default + + animation-direction: normal; +

+
+

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

+
+
- animation-direction: alternate; -

-
-

The animation is played forwards first, then backwards:

-
  • starts at the first keyframe
  • stops at the last keyframe
  • starts again, but at the last keyframe
  • stops at the first keyframe
-
-
+ + +
+
+
+

+ + animation-direction: reverse; +

+
+

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + animation-direction: alternate; +

+
+

The animation is played forwards first, then backwards:

+
    +
  • starts at the first keyframe
    • +
  • stops at the last keyframe
    • +
  • starts again, but at the last keyframe
    • +
  • stops at the first keyframe
    • +
+
+
- animation-direction: alternate-reverse; -

-
-

The animation is played backwards first, then forwards:

-
  • starts at the last keyframe
  • stops at the first keyframe
  • starts again, but at the first keyframe
  • stops at the last keyframe
-
- + + +
+
+
+

+ + animation-direction: alternate-reverse; +

+
+

The animation is played backwards first, then forwards:

+
    +
  • starts at the last keyframe
    • +
  • stops at the first keyframe
    • +
  • starts again, but at the first keyframe
    • +
  • stops at the last keyframe
    • +
+
+
- - -
+ + + @@ -682,81 +1140,102 @@

-
- -
+
+ +
- - - - - - -
-
-

- default - - - animation-duration: 0s; -

-
-

The default value is zero seconds: the animation will simply not play.

- -
-
+ - - -
-
-
-

+ +

+
+

+ default - animation-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

+ animation-duration: 0s; +

+
+

The default value is zero seconds: the animation will simply not play.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + animation-duration: 1.2s; +

+
+

You can use decimal values in seconds with the keyword s.

+
+
- animation-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

+ + +
+
+
+

+ + animation-duration: 2400ms; +

+
+

You can use milliseconds instead of seconds, with the keyword ms.

-
-
+ + - - -
+ + + @@ -775,104 +1254,134 @@

-
- -
+
+ +
- - - - - + + + + +
+
+

+ default + + animation-fill-mode: none; +

+
+

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

-
-
-

- default - - - animation-fill-mode: none; -

-
-

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

- -
-
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + animation-fill-mode: forwards; +

+
+

The last styles applied at the end of the animation are retained afterwards.

+
+
- animation-fill-mode: forwards; -

-
-

The last styles applied at the end of the animation are retained afterwards.

+ + +
+
+
+

+ + animation-fill-mode: backwards; +

+
+

The animation's styles will already be applied before the animation actually starts.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + animation-fill-mode: both; +

+
+

The styles are applied before and after the animation plays.

+
+
- animation-fill-mode: backwards; -

-
-

The animation's styles will already be applied before the animation actually starts.

+ + +
- - - - - - -
-
-

- - - animation-fill-mode: both; -

-
-

The styles are applied before and after the animation plays.

- -
-
- - - -
- - +
@@ -889,81 +1398,102 @@

-
- -
+
+ +

- - - - - + -
-
-

- default + +

+
+

+ default - animation-iteration-count: 1; -

-
-

The animation will only play once.

- -
-
- - - -
-
-
-

- - - animation-iteration-count: 2; -

-
-

You can use integer values to define a specific amount of times the animation will play.

+ animation-iteration-count: 1; +

+
+

The animation will only play once.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + animation-iteration-count: 2; +

+
+

You can use integer values to define a specific amount of times the animation will play.

+
+
- animation-iteration-count: infinite; -

-
-

By using the keyword infinite, the animation will play indefinitely.

+ + +
+
+
+

+ + animation-iteration-count: infinite; +

+
+

By using the keyword infinite, the animation will play indefinitely.

-
-
+ + - - -
+ + +
@@ -982,98 +1512,121 @@

-
- -
+
+ +
- + - + +
+
+

+ default + animation-name: none; +

+
+

If no animation name is specified, no animation is played.

-
-
-

- default - - - animation-name: none; -

-
-

If no animation name is specified, no animation is played.

- -
-
- - - -
-
-
-

- +

+
- animation-name: fadeIn; -

-
-

If a name is specified, the keyframes matching that name will be used.

-

For example, the fadeIn animation looks like this:

-

@keyframes fadeIn {
+    
+    
+
+
+
+

+ + animation-name: fadeIn; +

+
+

If a name is specified, the keyframes matching that name will be used.

+

For example, the fadeIn animation looks like this:

+ 

@keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-}

- -
-
- - - -
-
-
-

+} +

+ +
- animation-name: moveRight; -

-
-

Another example: the moveRight animation:

-

@keyframes moveRight {
+    
+    
+
+
+
+

+ + animation-name: moveRight; +

+
+

Another example: the moveRight animation:

+ 

@keyframes moveRight {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(100px);
   }
-}

+} +

-
-
+ + - - -
+ + + @@ -1092,51 +1645,62 @@

-
- -
+
+ +
- - - - - - -
-
-

- default - - - animation-play-state: running; -

-
-

If the animation-duration and animation-name are defined, the animation will start playing automatically.

- -
-
- - - -
-
-
-

+ + + + +

+
+

+ default + + animation-play-state: running; +

+
+

If the animation-duration and animation-name are defined, the animation will start playing automatically.

+
+
- animation-play-state: paused; -

-
-

The animation is set paused at the first keyframe.

-

This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.

-

In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.

-

@keyframes fadeAndMove {
+    
+    
+
+
+
+

+ + animation-play-state: paused; +

+
+

The animation is set paused at the first keyframe.

+

This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.

+

In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.

+ 

@keyframes fadeAndMove {
   from {
     opacity: 0;
     transform: translateX(0);
@@ -1145,19 +1709,26 @@ 

     opacity: 0;
     transform: translateX(100px);
   }
-}

+} +

-
-
+ +
- - -
+ + + @@ -1176,187 +1747,234 @@

-
- -
+
+ +
- - - - - - -
-
-

- default - - - animation-timing-function: ease; -

-
-

The animation starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-in; -

-
-

The animation starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-out; -

-
-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

+ + + + +

+
+

+ default + + animation-timing-function: ease; +

+
+

The animation starts slowly, accelerates in the middle, and slows down at the end.

+
+
- animation-timing-function: linear; -

-
-

The animation has a *constant speed.

+ + +
+
+
+

+ + animation-timing-function: ease-in; +

+
+

The animation starts slowly, and accelerates gradually until the end.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + animation-timing-function: ease-out; +

+
+

The animation starts quickly, and decelerates gradually until the end.

+
+
- animation-timing-function: step-start; -

-
-

The animation jumps instantly to the final state.

+ + +
+
+
+

+ + animation-timing-function: ease-in-out; +

+
+

Like ease, but more pronounced.

+

The animation starts quickly, and decelerates gradually until the end.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + animation-timing-function: linear; +

+
+

The animation has a *constant speed.

+
+
- animation-timing-function: step-end; -

-
-

The animation stays at the initial state until the end, when it instantly jumps to the final state.

+ + +
+
+
+

+ + animation-timing-function: step-start; +

+
+

The animation jumps instantly to the final state.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + animation-timing-function: step-end; +

+
+

The animation stays at the initial state until the end, when it instantly jumps to the final state.

+
+
- animation-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

+ + +
+
+
+

+ + animation-timing-function: steps(4, end); +

+
+

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

-
-
+ + - - -
+ + + @@ -1371,18 +1989,13 @@

#animation

-

Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.

-

Only animation-duration and animation-name are required.

+

Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.

+

Only animation-duration and animation-name are required.

- - - - -
@@ -1402,55 +2015,77 @@

- + + + + +
+
+

+ default + + background-attachment: scroll; +

+
+

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

+
+
- - - -
-
-

- default - - - background-attachment: scroll; -

-
-

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

- -
-
- -
-
-
-

- - - background-attachment: fixed; -

-
-

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

+
+ + +
+
+
+

+ + background-attachment: fixed; +

+
+

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

-
-
+ + -
+ + + +

@@ -1471,75 +2106,90 @@

- - - - - -
-
-

- default - - - background-clip: border-box; -

-
-

The background extends completely throughout the element, even under the border.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - background-clip: padding-box; -

-
-

The background only extends to the edge of the border: it includes the padding but not the border.

+ background-clip: border-box; +

+
+

The background extends completely throughout the element, even under the border.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + background-clip: padding-box; +

+
+

The background only extends to the edge of the border: it includes the padding but not the border.

+
+
- background-clip: content-box; -

-
-

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

+ + +
+
+
+

+ + background-clip: content-box; +

+
+

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

-
-
+ + - - -
+ + + @@ -1560,382 +2210,482 @@

+
+
+

+ default + background-color: transparent; +

+
+

By default, the background color is transparent, basically meaning that there is no background color.

+
+
+ + +
+
+
+

+ + background-color: red; +

+
+

You can use one of the 140+ color names.

-
-
-

- default +

+
+ + +
+
+
+

+ + background-color: #05ffb0; +

+
+

You can use hexadecimal color codes.

- background-color: transparent; -

-
-

By default, the background color is transparent, basically meaning that there is no background color.

+
+
- - + + +
+
+
+

+ + background-color: rgb(50, 115, 220); +

+
+

You can use rgb() color codes:

+
    +
  • the first value is for red +
    • +
  • the second value is for green +
    • +
  • the third value is for blue +
    • +
+

Each of them can have a value between 0 and 255.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + background-color: rgba(50, 115, 220, 0.3); +

+
+

You can use rgba() color codes:

+
    +
  • the first 3 values are for rgb +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- background-color: red; -

-
-

You can use one of the 140+ color names.

+
+
- - + + +
+
+
+

+ + background-color: hsl(14, 100%, 53%); +

+
+

You can use hsl() color codes:

+
    +
  • the first value is for hue and can go from 0 to 359 +
    • +
  • the second value is for saturation and go from 0% to 100% +
    • +
  • the third value is for luminosity and go from 0% to 100% +
    • +
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + background-color: hsla(14, 100%, 53%, 0.6); +

+
+

You can use hsl()a color codes:

+
    +
  • the first 3 values are for hsl +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+
+
- background-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

+ + +
- - + - - - -
-
-

+

+
+ +

+ #background-image +

+
+

Defines an image as the background of the element.

- - background-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - - background-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - - background-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
-
- - - -
-
-
-

- - - background-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
- -
-
- -

- #background-image -

-
-

Defines an image as the background of the element.

- -
+
- - - - - -
-
-

- default - - - background-image: none; -

-
-

Removes any background image.

- -
-
- - - -
-
-
-

- - - background-image: url(/images/jt.png); -

-
-

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

- -
-
- - - - -
-
-
-

- + - background-image: linear-gradient(red, blue); -

-
-

You can define a linear gradient as the background image.

-

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

-

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

+
+
+

+ default -

-
+ background-image: none; +

+
+

Removes any background image.

- - -
-
-
-

- - - background-image: linear-gradient(45deg, red, blue); -

-
-

You can specify an angle, either in degrees, or with keywords.

-

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

-

In this example, 45deg means 2:30, or the top right corner.

- -
-
- - - -
-
-
-

- - - background-image: radial-gradient(green, purple); -

-
-

You can define a radial gradient as the background image.

-

You need to define at least two colors. The first one will be at the center, the second one at the edges.

- -
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + background-image: url(/images/jt.png); +

+
+

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

+
+
- background-image: radial-gradient(circle, green, purple); -

-
-

You can specify the shape of the radial gradient: circle or ellipse (default).

+ + + +
+
+
+

+ + background-image: linear-gradient(red, blue); +

+
+

You can define a linear gradient as the background image.

+

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

+

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + background-image: linear-gradient(45deg, red, blue); +

+
+

You can specify an angle, either in degrees, or with keywords.

+

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

+

In this example, 45deg means 2:30, or the top right corner.

+
+
- background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%); -

-
-

You can specify color stops using percentage values.

+ + +
+
+
+

+ + background-image: radial-gradient(green, purple); +

+
+

You can define a radial gradient as the background image.

+

You need to define at least two colors. The first one will be at the center, the second one at the edges.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + background-image: radial-gradient(circle, green, purple); +

+
+

You can specify the shape of the radial gradient: circle or ellipse (default).

+
+
- background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%); -

-
-

You can specify where the gradient should end:

-
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
-
- + + +
+
+
+

+ + background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%); +

+
+

You can specify color stops using percentage values.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%); +

+
+

You can specify where the gradient should end:

+
    +
  • closest-side +
    • +
  • closest-corner +
    • +
  • farthest-side +
    • +
  • farthest-corner +
    • +
+
+
- background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%); -

-
-

Like with the background-position, you can specify the position of the gradient.

+ + +
+
+
+

+ + background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%); +

+
+

Like with the background-position, you can specify the position of the gradient.

-
-
+ + - - -
+ + +
@@ -1956,76 +2706,105 @@

- - - - - - -
-
-

- default - + + + + +

+
+

+ default + + background-origin: padding-box; +

+
+

The background image starts at the edge of the border: within padding but not the border.

- background-origin: padding-box; -

-
-

The background image starts at the edge of the border: within padding but not the border.

- -
-
+ +
-
-
-
-

- - - background-origin: border-box; -

-
-

The background image starts under the border.

+
+ + +
+
+
+

+ + background-origin: border-box; +

+
+

The background image starts under the border.

-
-
+ + -
-
-
-

- - - background-origin: content-box; -

-
-

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

+
+ + +
+
+
+

+ + background-origin: content-box; +

+
+

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

-
-
+ + -
+ + + + @@ -2046,75 +2825,91 @@

- - + + +
+
+

+ default + + background-position: 0% 0%; +

+
+

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

+
+
+ + +
+
+
+

+ + background-position: bottom right; +

+
+

You can use a combination of position keywords: center, top, bottom, left and right.

-
-
-

- default - - - background-position: 0% 0%; -

-
-

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

- -
-
- - - -
-
-
-

- - - background-position: bottom right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

- -
-
- - - -
-
-
-

- +

+
- background-position: center center; -

-
-

The background image will be positioned in the center of the element.

+ + +
+
+
+

+ + background-position: center center; +

+
+

The background image will be positioned in the center of the element.

-
-
+ + - - -
+ + + @@ -2135,96 +2930,115 @@

- - + +
+
+

+ default + background-repeat: repeat; +

+
+

The background image will repeat itself both horizontally and vertically.

-
-
-

- default - - - background-repeat: repeat; -

-
-

The background image will repeat itself both horizontally and vertically.

- -
-
- - - -
-
-
-

- - - background-repeat: repeat-x; -

-
-

The background image will only repeat itself horizontally.

- -
-
- - - -
-
-
-

- +

+
- background-repeat: repeat-y; -

-
-

The background image will only repeat itself vertically.

+ + +
+
+
+

+ + background-repeat: repeat-x; +

+
+

The background image will only repeat itself horizontally.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + background-repeat: repeat-y; +

+
+

The background image will only repeat itself vertically.

+
+
- background-repeat: no-repeat; -

-
-

The background image will only appear once.

+ + +
+
+
+

+ + background-repeat: no-repeat; +

+
+

The background image will only appear once.

-
-
+ + - - -
+ + + @@ -2245,118 +3059,145 @@

- - - - - -
-
-

- default - - - background-size: auto auto; -

-
-

The background image will retain its original size.

-

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

- -
-
- - - -
-
-
-

- - - background-size: 120px 80px; -

-
-

You can specify a size in pixels:

-
  • the first value is the horizontal size
  • the second is the vertical size
-
-
- - - -
-
-
-

+ + +

+
+

+ default + + background-size: auto auto; +

+
+

The background image will retain its original size.

+

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

+
+
- background-size: 100% 50%; -

-
-

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

- -
-
- - - -
-
-
-

- +

+ +
+
+
+

+ + background-size: 120px 80px; +

+
+

You can specify a size in pixels:

+
    +
  • the first value is the horizontal size
    • +
  • the second is the vertical size
    • +
+
+
- background-size: contain; -

-
-

The keyword contain will resize the background image to make sure it remains fully visible.

+ + +
+
+
+

+ + background-size: 100% 50%; +

+
+

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + background-size: contain; +

+
+

The keyword contain will resize the background image to make sure it remains fully visible.

+
+
- background-size: cover; -

-
-

The keyword cover will resize the background image to make sure the element is fully covered.

+ + +
+
+
+

+ + background-size: cover; +

+
+

The keyword cover will resize the background image to make sure the element is fully covered.

-
-
+ + - - -
+ + + @@ -2371,17 +3212,12 @@

#background

-

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

+

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

- - - - -
@@ -2401,74 +3237,88 @@

- - + +
+
+

+ border-bottom-color: transparent; +

+
+

Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.

-
-
-

- - - border-bottom-color: transparent; -

-
-

Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-bottom-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + border-bottom-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- border-bottom-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

+ + +
+
+
+

+ + border-bottom-color: #05ffb0; +

+
+

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

-
-
+ + - - -
+ + +

@@ -2489,96 +3339,116 @@

- - - - - -
-
-

- default - - - border-bottom-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-bottom-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

+ + +

+
+

+ default + + border-bottom-left-radius: 0; +

+
+

Removes any border radius.

+
+
- border-bottom-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the left border.

+ + +
+
+
+

+ + border-bottom-left-radius: 20px; +

+
+

You can use pixel values.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-bottom-left-radius: 50%; +

+
+

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the left border.

+
+
- border-bottom-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the left border.

+ + +
+
+
+

+ + border-bottom-left-radius: 20px 50%; +

+
+

If you set two values, the first one is for the bottom border, the second one for the left border.

-
-
+ + - - -
+ + + @@ -2599,96 +3469,116 @@

- - - - - -
-
-

- default - - - border-bottom-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-bottom-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

+ + +

+
+

+ default + + border-bottom-right-radius: 0; +

+
+

Removes any border radius.

+
+
- border-bottom-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the right border.

+ + +
+
+
+

+ + border-bottom-right-radius: 20px; +

+
+

You can use pixel values.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-bottom-right-radius: 50%; +

+
+

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the right border.

+
+
- border-bottom-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the right border.

+ + +
+
+
+

+ + border-bottom-right-radius: 20px 50%; +

+
+

If you set two values, the first one is for the bottom border, the second one for the right border.

-
-
+ + - - -
+ + + @@ -2709,138 +3599,163 @@

- - - - + -
-
-

- default +

+
+

+ default + border-bottom-style: none; +

+
+

Removes the bottom border.

- border-bottom-style: none; -

-
-

Removes the bottom border.

- -
-
- - - -
-
-
-

- - - border-bottom-style: dotted; -

-
-

Turns the bottom border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-bottom-style: dashed; -

-
-

Turns the bottom border into a sequence of dashes.

- -
-
- - - -
-
-
-

- + +

- border-bottom-style: solid; -

-
-

Turns the bottom border into a solid line.

+ + +
+
+
+

+ + border-bottom-style: dotted; +

+
+

Turns the bottom border into a sequence of dots.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-bottom-style: dashed; +

+
+

Turns the bottom border into a sequence of dashes.

+
+
- border-bottom-style: double; -

-
-

Splits the bottom border into two lines.

+ + +
+
+
+

+ + border-bottom-style: solid; +

+
+

Turns the bottom border into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-bottom-style: double; +

+
+

Splits the bottom border into two lines.

+
+
- border-bottom-style: groove; -

-
-

Sets an inset style to the bottom border.

+ + +
+
+
+

+ + border-bottom-style: groove; +

+
+

Sets an inset style to the bottom border.

-
-
+ + - - -
+ + + @@ -2861,54 +3776,63 @@

- - - - - -
-
-

- default - + - border-bottom-width: 0; -

-
-

Removes the bottom border.

- -
-
+
+
+

+ default -

- -
-
-
-

+ border-bottom-width: 0; +

+
+

Removes the bottom border.

+
+
- border-bottom-width: 4px; -

-
-

You can use pixel values.

+ + +
+
+
+

+ + border-bottom-width: 4px; +

+
+

You can use pixel values.

-
-
+ + - - -
+ + +
@@ -2923,58 +3847,66 @@

#border-bottom

-

Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.

+

Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.

+
+
+

+ + border-bottom: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + border-bottom: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - border-bottom: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-bottom: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -2995,58 +3927,132 @@

+ + +
+
+

+ default + + border-collapse: separate; +

+
+

Each table cell will display its own borders.

+

In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.

+
+
- - - -
-
-

- default - - - border-collapse: separate; -

-
-

Each table cell will display its own borders.

-

In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.

- -
-
- -
-
-
-

- - - border-collapse: collapse; -

-
-

Adjacent table cells will merge their borders together.

-

The cell that appears first in the code will "win": its borders will mask those of the following cells.

+
+ + + +
+
+
+

+ + border-collapse: collapse; +

+
+

Adjacent table cells will merge their borders together.

+

The cell that appears first in the code will "win": its borders will mask those of the following cells.

-
-
+ + -
+ + + + +
@@ -3067,162 +4073,217 @@

- - - - - -
-
-

- default - - - border-color: transparent; -

-
-

Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - border-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

+ border-color: transparent; +

+
+

Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- border-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + border-color: #05ffb0; +

+
+

You can use hexadecimal color codes.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-color: rgb(50, 115, 220); +

+
+

You can use rgb() color codes:

+
    +
  • the first value is for red +
    • +
  • the second value is for green +
    • +
  • the third value is for blue +
    • +
+

Each of them can have a value between 0 and 255.

+
+
- border-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
- + + +
+
+
+

+ + border-color: rgba(50, 115, 220, 0.3); +

+
+

You can use rgba() color codes:

+
    +
  • the first 3 values are for rgb +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- - -
-
-
-

+ +

+ + +
+
+
+

+ + border-color: hsl(14, 100%, 53%); +

+
+

You can use hsl() color codes:

+
    +
  • the first value is for hue and can go from 0 to 359 +
    • +
  • the second value is for saturation and go from 0% to 100% +
    • +
  • the third value is for luminosity and go from 0% to 100% +
    • +
+
+
- border-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + border-color: hsla(14, 100%, 53%, 0.6); +

+
+

You can use hsl()a color codes:

+
    +
  • the first 3 values are for hsl +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

-
-
+ + - - -
+ + + @@ -3243,74 +4304,88 @@

- - - - - -
-
-

+ +

+
+

- border-left-color: transparent; -

-
-

Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-left-color: red; -

-
-

You can use one of the 140+ color names.

+ border-left-color: transparent; +

+
+

Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-left-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- border-left-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

+ + +
+
+
+

+ + border-left-color: #05ffb0; +

+
+

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

-
-
+ + - - -
+ + + @@ -3331,138 +4406,163 @@

- - - - - -
-
-

- default - - - border-left-style: none; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - - border-left-style: dotted; -

-
-

Turns the left border into a sequence of dots.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - border-left-style: dashed; -

-
-

Turns the left border into a sequence of dashes.

- -
-
- - - -
-
-
-

+ border-left-style: none; +

+
+

Removes the left border.

+
+
- border-left-style: solid; -

-
-

Turns the left border into a solid line.

+ + +
+
+
+

+ + border-left-style: dotted; +

+
+

Turns the left border into a sequence of dots.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-left-style: dashed; +

+
+

Turns the left border into a sequence of dashes.

+
+
- border-left-style: double; -

-
-

Splits the left border into two lines.

+ + +
+
+
+

+ + border-left-style: solid; +

+
+

Turns the left border into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-left-style: double; +

+
+

Splits the left border into two lines.

+
+
- border-left-style: groove; -

-
-

Sets an inset style to the left border.

+ + +
+
+
+

+ + border-left-style: groove; +

+
+

Sets an inset style to the left border.

-
-
+ + - - -
+ + + @@ -3483,54 +4583,63 @@

- + +
+
+

+ default + border-left-width: 0; +

+
+

Removes the left border.

+
+
-
-
-

- default - - - border-left-width: 0; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - - border-left-width: 4px; -

-
-

You can use pixel values.

+ + +
+
+
+

+ + border-left-width: 4px; +

+
+

You can use pixel values.

-
-
+ + - - -
+ + +
@@ -3545,58 +4654,66 @@

#border-left

-

Shorthand property for border-left-width border-left-style and border-left-color.

+

Shorthand property for border-left-width border-left-style and border-left-color.

+
+
+

+ + border-left: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + border-left: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - border-left: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-left: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -3617,96 +4734,113 @@

- - - + +
+
+

+ default -

-
-

- default - - - border-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

+ border-radius: 0; +

+
+

Removes any border radius.

+
+
- border-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway through each border.

+ + +
+
+
+

+ + border-radius: 20px; +

+
+

You can use pixel values.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-radius: 50%; +

+
+

You can use percentage values. In this example, the radius starts halfway through each border.

+
+
- border-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top and bottom borders, the second one for the left and right borders.

+ + +
+
+
+

+ + border-radius: 20px 50%; +

+
+

If you set two values, the first one is for the top and bottom borders, the second one for the left and right borders.

-
-
+ + - - -
+ + + @@ -3727,74 +4861,88 @@

- + +
+
+

+ border-right-color: transparent; +

+
+

Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.

+
+
-
-
-

- - - border-right-color: transparent; -

-
-

Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-right-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

+

+ +
+
+
+

+ + border-right-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- border-right-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

+ + +
+
+
+

+ + border-right-color: #05ffb0; +

+
+

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

-
-
+ + - - -
+ + +
@@ -3811,142 +4959,167 @@

Like border-style, but for the right border only.

-
- - - - - - - - -
-
-

- default - - - border-right-style: none; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - - border-right-style: dotted; -

-
-

Turns the right border into a sequence of dots.

- -
-
- - - -
-
-
-

+ +

- border-right-style: dashed; -

-
-

Turns the right border into a sequence of dashes.

+ -
- +
+
+

+ default -

- -
-
-
-

+ border-right-style: none; +

+
+

Removes the right border.

+
+
- border-right-style: solid; -

-
-

Turns the right border into a solid line.

+ + +
+
+
+

+ + border-right-style: dotted; +

+
+

Turns the right border into a sequence of dots.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-right-style: dashed; +

+
+

Turns the right border into a sequence of dashes.

+
+
- border-right-style: double; -

-
-

Splits the right border into two lines.

+ + +
+
+
+

+ + border-right-style: solid; +

+
+

Turns the right border into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-right-style: double; +

+
+

Splits the right border into two lines.

+
+
- border-right-style: groove; -

-
-

Sets an inset style to the right border.

+ + +
+
+
+

+ + border-right-style: groove; +

+
+

Sets an inset style to the right border.

-
-
+ + - - -
+ + +
@@ -3967,54 +5140,63 @@

- + +
+
+

+ default + border-right-width: 0; +

+
+

Removes the right border.

+
+
-
-
-

- default - - - border-right-width: 0; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - - border-right-width: 4px; -

-
-

You can use pixel values.

+ + +
+
+
+

+ + border-right-width: 4px; +

+
+

You can use pixel values.

-
-
+ + - - -
+ + +
@@ -4029,58 +5211,66 @@

#border-right

-

Shorthand property for border-right-width border-right-style and border-right-color.

+

Shorthand property for border-right-width border-right-style and border-right-color.

+
+
+

+ + border-right: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + border-right: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - border-right: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-right: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -4101,138 +5291,164 @@

- - - - - -
-
-

- default - - - border-style: none; -

-
-

Removes the element's borders.

- -
-
- - - -
-
-
-

- - - border-style: dotted; -

-
-

Turns the border into a sequence of dots.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - border-style: dashed; -

-
-

Turns the border into a sequence of dashes.

- -
-
- - - -
-
-
-

+ border-style: none; +

+
+

Removes the element's borders.

+
+
- border-style: solid; -

-
-

Turns the border into a solid line.

+ + +
+
+
+

+ + border-style: dotted; +

+
+

Turns the border into a sequence of dots.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-style: dashed; +

+
+

Turns the border into a sequence of dashes.

+
+
- border-style: double; -

-
-

Splits the border into two lines.

+ + +
+
+
+

+ + border-style: solid; +

+
+

Turns the border into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-style: double; +

+
+

Splits the border into two lines.

+
+
- border-style: groove; -

-
-

Sets an inset style to the borders.

+ + +
+
+
+

+ + border-style: groove; +

+
+

Sets an inset style to the borders.

-
-
+ + - - -
+ + + @@ -4253,74 +5469,88 @@

- - - - - -
-
-

- - - border-top-color: transparent; -

-
-

Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

+ +

+
+

- border-top-color: red; -

-
-

You can use one of the 140+ color names.

+ border-top-color: transparent; +

+
+

Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-top-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- border-top-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

+ + +
+
+
+

+ + border-top-color: #05ffb0; +

+
+

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

-
-
+ + - - -
+ + + @@ -4341,96 +5571,116 @@

- - - - - -
-
-

- default - - - border-top-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-top-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

+ + +

+
+

+ default + + border-top-left-radius: 0; +

+
+

Removes any border radius.

+
+
- border-top-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

+ + +
+
+
+

+ + border-top-left-radius: 20px; +

+
+

You can use pixel values.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-top-left-radius: 50%; +

+
+

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

+
+
- border-top-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the left border.

+ + +
+
+
+

+ + border-top-left-radius: 20px 50%; +

+
+

If you set two values, the first one is for the top border, the second one for the left border.

-
-
+ + - - -
+ + + @@ -4451,96 +5701,116 @@

- - - - - -
-
-

- default - - - border-top-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-top-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

+ + +

+
+

+ default + + border-top-right-radius: 0; +

+
+

Removes any border radius.

+
+
- border-top-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the right border.

+ + +
+
+
+

+ + border-top-right-radius: 20px; +

+
+

You can use pixel values.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + border-top-right-radius: 50%; +

+
+

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the right border.

+
+
- border-top-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the right border.

+ + +
+
+
+

+ + border-top-right-radius: 20px 50%; +

+
+

If you set two values, the first one is for the top border, the second one for the right border.

-
-
+ + - - -
+ + + @@ -4561,138 +5831,163 @@

- - - - - -
-
-

- default - - - border-top-style: none; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

- - - border-top-style: dotted; -

-
-

Turns the top border into a sequence of dots.

+ -
-
- - - -
-
-
-

- - - border-top-style: dashed; -

-
-

Turns the top border into a sequence of dashes.

- -
-
+
+
+

+ default -

- -
-
-
-

+ border-top-style: none; +

+
+

Removes the top border.

+
+
- border-top-style: solid; -

-
-

Turns the top border into a solid line.

+ + +
+
+
+

+ + border-top-style: dotted; +

+
+

Turns the top border into a sequence of dots.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-top-style: dashed; +

+
+

Turns the top border into a sequence of dashes.

+
+
- border-top-style: double; -

-
-

Splits the top border into two lines.

+ + +
+
+
+

+ + border-top-style: solid; +

+
+

Turns the top border into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + border-top-style: double; +

+
+

Splits the top border into two lines.

+
+
- border-top-style: groove; -

-
-

Sets an inset style to the top border.

+ + +
+
+
+

+ + border-top-style: groove; +

+
+

Sets an inset style to the top border.

-
-
+ + - - -
+ + +
@@ -4713,54 +6008,63 @@

- - - - - -
-
-

- default + +

+
+

+ default - border-top-width: 0; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

+ border-top-width: 0; +

+
+

Removes the top border.

+
+
- border-top-width: 4px; -

-
-

You can use pixel values.

+ + +
+
+
+

+ + border-top-width: 4px; +

+
+

You can use pixel values.

-
-
+ +
- - -
+ + + @@ -4775,58 +6079,66 @@

#border-top

-

Shorthand property for border-top-width border-top-style and border-top-color.

+

Shorthand property for border-top-width border-top-style and border-top-color.

+
+
+

+ + border-top: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + border-top: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - border-top: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-top: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -4847,53 +6159,62 @@

- - - - - -
-
-

- - - border-width: 1px; -

-
-

Defines the width of all borders to 1px.

+ -
-
+
+
+

-

- -
-
-
-

+ border-width: 1px; +

+
+

Defines the width of all borders to 1px.

+
+
- border-width: 2px 0; -

-
-

Defines the top and bottom borders to 2px, the left and right to 0.

+ + +
+
+
+

+ + border-width: 2px 0; +

+
+

Defines the top and bottom borders to 2px, the left and right to 0.

-
-
+ + - - -
+ + +
@@ -4908,58 +6229,66 @@

#border

-

Shorthand property for border-width border-style and border-color.

+

Shorthand property for border-width border-style and border-color.

+
+
+

+ + border: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + border: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - border: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -4980,79 +6309,137 @@

- + + + + +
+
+

+ default + + bottom: auto; +

+
+

The element will remain in its natural position.

+
+
- - - -
-
-

- default - - - bottom: auto; -

-
-

The element will remain in its natural position.

- -
-
- -
-
-
-

- - - bottom: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

+
+ + + +
+
+
+

+ + bottom: 20px; +

+
+

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

-
-
+ + -
-
-
-

- - - bottom: 0; -

-
-

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

+
+ + + +
+
+
+

+ + bottom: 0; +

+
+

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

-
-
+ + -
+ + + + +
@@ -5073,121 +6460,147 @@

- - - - - -
-
-

- default - - - box-shadow: none; -

-
-

Removes any box-shadow that was applied to the element.

- -
-
- - - -
-
-
-

- - - box-shadow: 2px 6px; -

-
-

You need at least two values:

-
  • the first is the horizontal offset
  • the second is the vertical offset

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - box-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

+ box-shadow: none; +

+
+

Removes any box-shadow that was applied to the element.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + box-shadow: 2px 6px; +

+
+

You need at least two values:

+
    +
  • the first is the horizontal offset
    • +
  • the second is the vertical offset
    • +
+

The shadow color will be inherited from the text color.

+
+
- box-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

+ + +
+
+
+

+ + box-shadow: 2px 6px red; +

+
+

You can define a color as the last value.

+

As with color, you can use color names, hexadecimal, rgb, hsl...

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + box-shadow: 2px 4px 10px red; +

+
+

The optional third value defines the blur of the shadow.

+

The color will be diffused across 10px in this example, from opaque to transparent.

+
+
- box-shadow: 2px 4px 10px 4px red; -

-
-

The optional fourth value defines the spread of the shadow.

-

The spread defines how much the shadow should grow: it enhances the shadow.

+ + +
+
+
+

+ + box-shadow: 2px 4px 10px 4px red; +

+
+

The optional fourth value defines the spread of the shadow.

+

The spread defines how much the shadow should grow: it enhances the shadow.

-
-
+ + - - -
+ + + @@ -5208,62 +6621,131 @@

+ + +
+
+

+ default + + box-sizing: content-box; +

+
+

The width and height of the element only apply to the content of the element.

+

For example, this element has

+
    +
  • border-width: 12px +
    • +
  • padding: 30px +
    • +
  • width: 200px +
    • +
+

The full width is 24px + 60px + 200px = 284px.

+

The content has the defined width. The box accomodates for those dimensions.

+
+
- - - -
-
-

- default - - - box-sizing: content-box; -

-
-

The width and height of the element only apply to the content of the element.

-

For example, this element has

-
  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 24px + 60px + 200px = 284px.

-

The content has the defined width. The box accomodates for those dimensions.

- -
-
- -
-
-
-

- - - box-sizing: border-box; -

-
-

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

-

For example, this element has

-
  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 200px, no matter what.

-

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

+
+ + + +
+
+
+

+ + box-sizing: border-box; +

+
+

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

+

For example, this element has

+
    +
  • border-width: 12px +
    • +
  • padding: 30px +
    • +
  • width: 200px +
    • +
+

The full width is 200px, no matter what.

+

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

-
-
+ + -
+ + + + +
@@ -5284,99 +6766,164 @@

+ + +
+
+

+ + clear: none; +

+
+

The clear property is only relevant when used with siblings that have a float value.

+

The element will sit alongside any floated element that precedes it.

+
+
- - - -
-
-

- - - clear: none; -

-
-

The clear property is only relevant when used with siblings that have a float value.

-

The element will sit alongside any floated element that precedes it.

- -
-
- -
-
-
-

- - - clear: left; -

-
-

The cleared element will move after any left floating element that precedes it, but will remain alongside right float elements.

+
+ + +
+
+
+

+ + clear: left; +

+
+

The cleared element will move after any left floating element that precedes it, but will remain alongside right float elements.

-
-
+ + -
-
-
-

- - - clear: right; -

-
-

The cleared element will move after any right floating element that precedes it, but will remain alongside left float elements.

+
+ + + +
+
+
+

+ + clear: right; +

+
+

The cleared element will move after any right floating element that precedes it, but will remain alongside left float elements.

-
-
+ + -
-
-
-

- - - clear: both; -

-
-

The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

+
+ + + +
+
+
+

+ + clear: both; +

+
+

The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

-
-
+ + -
+ + + + +
@@ -5397,162 +6944,220 @@

- - - - - -
-
-

- - - color: transparent; -

-
-

Applies a transparent color to the text. The text will still take up the space it should.

- -
-
- - - -
-
-
-

- - - color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

+ +

+
+

- color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

+ color: transparent; +

+
+

Applies a transparent color to the text. The text will still take up the space it should.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + color: red; +

+
+

You can use one of the 140+ color names.

+
+
- color: rgba(0, 0, 0, 0.5); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + color: #05ffb0; +

+
+

You can use hexadecimal color codes.

-
-
+ + - - - -
-
-
-

+

+ +
+
+
+

+ + color: rgb(50, 115, 220); +

+
+

You can use rgb() color codes:

+
    +
  • the first value is for red +
    • +
  • the second value is for green +
    • +
  • the third value is for blue +
    • +
+

Each of them can have a value between 0 and 255.

+
+
- color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
- + + +
+
+
+

+ + color: rgba(0, 0, 0, 0.5); +

+
+

You can use rgba() color codes:

+
    +
  • the first 3 values are for rgb +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- - -
-
-
-

+ +

+ + + +
+
+
+

+ + color: hsl(14, 100%, 53%); +

+
+

You can use hsl() color codes:

+
    +
  • the first value is for hue and can go from 0 to 359 +
    • +
  • the second value is for saturation and go from 0% to 100% +
    • +
  • the third value is for luminosity and go from 0% to 100% +
    • +
+
+
- color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + color: hsla(14, 100%, 53%, 0.6); +

+
+

You can use hsl()a color codes:

+
    +
  • the first 3 values are for hsl +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

-
-
+ + - - -
+ + + @@ -5573,54 +7178,71 @@

+
+
+

+ default + column-count: auto; +

+
+

Removes any columns from the element (unless another column- property was set).

+
+
- -
-
-

- default - - - column-count: auto; -

-
-

Removes any columns from the element (unless another column- property was set).

- -
-
- -
-
-
-

- - - column-count: 3; -

-
-

When using an integer value, the element will distribute its child elements across the number of columns defined.

+
+ + +
+
+
+

+ + column-count: 3; +

+
+

When using an integer value, the element will distribute its child elements across the number of columns defined.

-
-
+ + -
+ + + + +
@@ -5641,56 +7263,80 @@

- - - + +
+
+

+ default -

-
-

- default + column-gap: normal; +

+
+

The gap between the columns is set to the browser's default value, which usually is 1em.

+
+
- column-gap: normal; -

-
-

The gap between the columns is set to the browser's default value, which usually is 1em.

- -
-
- -
-
-
-

- - - column-gap: 2px; -

-
-

You can use pixel values for the gap.

-

Note that the gap only appears between columns, and not on the exterior sides of the edge columns.

+
+ + +
+
+
+

+ + column-gap: 2px; +

+
+

You can use pixel values for the gap.

+

Note that the gap only appears between columns, and not on the exterior sides of the edge columns.

-
-
+ + -
+ + + + + @@ -5711,55 +7357,72 @@

+
+
+

+ default + column-width: auto; +

+
+

The element will not distribute its child elements into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.

+
+
- -
-
-

- default - - - column-width: auto; -

-
-

The element will not distribute its child elements into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.

- -
-
- -
-
-
-

- - - column-width: 10px; -

-
-

You can use pixel values for the column width.

-

The number of columns will be the minimum needed to distribute all the content across the element.

+
+ + +
+
+
+

+ + column-width: 10px; +

+
+

You can use pixel values for the column width.

+

The number of columns will be the minimum needed to distribute all the content across the element.

-
-
+ + -
+ + + + +
@@ -5780,111 +7443,150 @@

+ +
+
+

+ default - - - -

-
-

- default - - - content: normal; -

-
-

No content is added to the element.

+ content: normal; +

+
+

No content is added to the element.

-
-
+ +
-
-
-
-

- - - content: "Foo bar"; -

-
-

Considering this HTML element:

-
<p class="element">
+
+ + +
+
+
+

+ + content: "Foo bar"; +

+
+

Considering this HTML element:

+ 
<p class="element">
   Hello world
-</p>

And this CSS:

-
.element:before {
+</p>
+

And this CSS:

+ 
.element:before {
   content: "Foo bar";
-}

The text content will be prepended to the element's content.

-

Notice how the end result combines text from the HTML and text from the CSS.

+} +

The text content will be prepended to the element's content.

+

Notice how the end result combines text from the HTML and text from the CSS.

-
-
+ + -
-
-
-

- - - content: url(/images/jt.png); -

-
-

You can insert images by using the url() function.

+
+ + + +
+
+
+

+ + content: url(/images/jt.png); +

+
+

You can insert images by using the url() function.

-
-
+ + -
-
-
-

- - - content: attr(data-something); -

-
-

Considering this HTML element:

-
<p class="element" data-something="cssreference">
+
+ + +
+
+
+

+ + content: attr(data-something); +

+
+

Considering this HTML element:

+ 
<p class="element" data-something="cssreference">
   Hello world
-</p>

And this CSS:

-
.element:before {
+</p>
+

And this CSS:

+ 
.element:before {
   content: attr(data-something);
-}

The element will grab the text content from the HTML attribute.

+} +

The element will grab the text content from the HTML attribute.

-
-
+ + -
+ + + + + @@ -5905,325 +7607,411 @@

+
+
+

+ cursor: default; +

+
+

Sets the cursor to the element's default value. For a link, it would be a pointer. For text it would be a selection cursor.

+
+
- -
-
-

- - - cursor: default; -

-
-

Sets the cursor to the element's default value. For a link, it would be a pointer. For text it would be a selection cursor.

- -
-
- -
-
-
-

- - - cursor: auto; -

-
-

auto

+
+ + +
+
+
+

+ + cursor: auto; +

+
+

auto

-
-
+ + -
-
-
-

- - - cursor: pointer; -

-
-

pointer

+
+ + +
+
+
+

+ + cursor: pointer; +

+
+

pointer

-
-
+ + -
-
-
-

- - - cursor: move; -

-
-

move

+
+ + +
+
+
+

+ + cursor: move; +

+
+

move

-
-
+ + -
-
-
-

- - - cursor: crosshair; -

-
-

crosshair

+
+ + +
+
+
+

+ + cursor: crosshair; +

+
+

crosshair

-
-
+ + -
-
-
-

- - - cursor: text; -

-
-

text

+
+ + +
+
+
+

+ + cursor: text; +

+
+

text

-
-
+ + -
-
-
-

- - - cursor: wait; -

-
-

wait

+
+ + +
+
+
+

+ + cursor: wait; +

+
+

wait

-
-
+ + -
-
-
-

- - - cursor: helpe-resize; -

-
-

helpe-resize

+
+ + +
+
+
+

+ + cursor: helpe-resize; +

+
+

helpe-resize

-
-
+ + -
-
-
-

- - - cursor: ne-resize; -

-
-

ne-resize

+
+ + +
+
+
+

+ + cursor: ne-resize; +

+
+

ne-resize

-
-
+ + -
-
-
-

- - - cursor: nw-resize; -

-
-

nw-resize

+
+ + +
+
+
+

+ + cursor: nw-resize; +

+
+

nw-resize

-
-
+ + -
-
-
-

- - - cursor: n-resize; -

-
-

n-resize

+
+ + +
+
+
+

+ + cursor: n-resize; +

+
+

n-resize

-
-
+ + -
-
-
-

- - - cursor: se-resize; -

-
-

se-resize

+
+ + +
+
+
+

+ + cursor: se-resize; +

+
+

se-resize

-
-
+ + -
-
-
-

- - - cursor: sw-resize; -

-
-

sw-resize

+
+ + +
+
+
+

+ + cursor: sw-resize; +

+
+

sw-resize

-
-
+ + -
-
-
-

- - - cursor: s-resize; -

-
-

s-resize

+
+ + +
+
+
+

+ + cursor: s-resize; +

+
+

s-resize

-
-
+ + -
-
-
-

- - - cursor: w-resize; -

-
-

w-resize

+
+ + +
+
+
+

+ + cursor: w-resize; +

+
+

w-resize

-
-
+ + -
+ + + +
@@ -6244,234 +8032,327 @@

+ + +
+
+

+ + display: none; +

+
+

The element is completely removed, as if it wasn't in the HTML code in the first place.

+
+
- - - -
-
-

- - - display: none; -

-
-

The element is completely removed, as if it wasn't in the HTML code in the first place.

- -
-
- -
-
-
-

- - - display: inline; -

-
-

The element is turned into an inline element: it behaves like simple text.

-

Any height and width applied will have no effect.

+
+ + +
+
+
+

+ + display: inline; +

+
+

The element is turned into an inline element: it behaves like simple text.

+

Any height and width applied will have no effect.

-
-
+ + -
-
-
-

- - - display: block; -

-
-

The element is turned into a block element: it starts on a new line, and takes up the whole width.

+
+ + +
+
+
+

+ + display: block; +

+
+

The element is turned into a block element: it starts on a new line, and takes up the whole width.

-
-
+ + -
-
-
-

- - - display: inline-block; -

-
-

The element shares properties of both an inline and a block element:

-
  • inline because the element behaves like simple text, and inserts itself in a block of text
  • Block because you can apply height and width values

For example, this element has:

-
.element{
+
+ + +
+
+
+

+ + display: inline-block; +

+
+

The element shares properties of both an inline and a block element:

+
    +
  • inline because the element behaves like simple text, and inserts itself in a block of text
    • +
  • Block because you can apply height and width values
+

For example, this element has:

+ 
.element{
   height: 3em;
   width: 60px;
 }
-
-
- - - -
-
-
-

- - - display: list-item; -

-
-

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

- -
-
- - - -
-
-
-

- - - display: table; -

-
-

The element behaves like a table: <table>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - - display: table-cell; -

-
-

The element behaves like a table cell: <td> or <th>.

-

Its content and child elements behave like table cells.

- -
-
+ + -
-
-
-

- + + + +

+
+
+

+ + display: list-item; +

+
+

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

- display: table-row; -

-
-

The element behaves like a table row: <tr>.

-

Its content and child elements behave like table cells.

+
+
+ + +
+
+
+

+ + display: table; +

+
+

The element behaves like a table: <table>.

+

Its content and child elements behave like table cells.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + display: table-cell; +

+
+

The element behaves like a table cell: <td> or <th>.

+

Its content and child elements behave like table cells.

- display: flex; -

-
-

The element is turned into an flexbox container. On its own, it behaves like a block element.

-

Its child elements will be turned into flexbox items.

+
+
+ + +
+
+
+

+ + display: table-row; +

+
+

The element behaves like a table row: <tr>.

+

Its content and child elements behave like table cells.

+ +
+
-
-
-
-

+ + + +

+
+
+

+ + display: flex; +

+
+

The element is turned into an flexbox container. On its own, it behaves like a block element.

+

Its child elements will be turned into flexbox items.

+
+
- display: inline-flex; -

-
-

The element shares properties of both an inline and a flexbox element:

-
  • inline because the element behaves like simple text, and inserts itself in a block of text
  • flexbox because its child element will be turned into flexbox items

For example, this element has:

-
.element{
+    
+    
+
+
+
+

+ + display: inline-flex; +

+
+

The element shares properties of both an inline and a flexbox element:

+
    +
  • inline because the element behaves like simple text, and inserts itself in a block of text
    • +
  • flexbox because its child element will be turned into flexbox items
+

For example, this element has:

+ 
.element{
   height: 3em;
   width: 120px;
 }
-
-
+ + -
+ + + +
@@ -6492,56 +8373,80 @@

- - + + +
+
+

+ default + + flex-basis: auto; +

+
+

The element will be automatically sized based on its content, or on any height or width value if they are defined.

+
+
- -
-
-

- default - - - flex-basis: auto; -

-
-

The element will be automatically sized based on its content, or on any height or width value if they are defined.

- -
-
- -
-
-
-

- - - flex-basis: 80px; -

-
-

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

+
+ + + +
+
+
+

+ + flex-basis: 80px; +

+
+

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

-
-
+ + -
+ + + + +
@@ -6562,96 +8467,133 @@

- - - - + -
-
-

- default +

+
+

+ default + flex-direction: row; +

+
+

The flexbox items are ordered the same way as the text direction, along the main axis.

- flex-direction: row; -

-
-

The flexbox items are ordered the same way as the text direction, along the main axis.

- -
-
+ +
-
-
-
-

- - - flex-direction: row-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the main axis.

+
+ + +
+
+
+

+ + flex-direction: row-reverse; +

+
+

The flexbox items are ordered the opposite way as the text direction, along the main axis.

-
-
+ + -
-
-
-

- - - flex-direction: column; -

-
-

The flexbox items are ordered the same way as the text direction, along the cross axis.

+
+ + +
+
+
+

+ + flex-direction: column; +

+
+

The flexbox items are ordered the same way as the text direction, along the cross axis.

-
-
+ + -
-
-
-

- - - flex-direction: column-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

+
+ + +
+
+
+

+ + flex-direction: column-reverse; +

+
+

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

-
-
+ + -
+ + + + @@ -6666,17 +8608,12 @@

#flex-flow

-

Shorthand property for flex-direction and flex-flow.

+

Shorthand property for flex-direction and flex-flow.

- - - - -
@@ -6696,78 +8633,126 @@

- - - - - -
-
-

- default + + +

+
+

+ default + + flex-grow: 0; +

+
+

The element will not grow if there's space available. It will only use the space it needs.

+
+
- flex-grow: 0; -

-
-

The element will not grow if there's space available. It will only use the space it needs.

- -
-
- - - -
-
-
-

- - - flex-grow: 1; -

-
-

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

- -
-
- -
-
-
-

+ + + +

+
+
+

+ + flex-grow: 1; +

+
+

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

+
+
- flex-grow: 2; -

-
-

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the remaining space is divided in 3:

-
  • 1 third goes to the green item
  • 2 thirds go to the pink item
  • Nothing goes to the yellow item, who retains its initial width
+ + + +
+
+
+

+ + flex-grow: 2; +

+
+

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

+

In this example, the remaining space is divided in 3:

+
    +
  • 1 third goes to the green item
    • +
  • 2 thirds go to the pink item
    • +
  • Nothing goes to the yellow item, who retains its initial width
    • +
+
+
-
+ + + + +

@@ -6788,80 +8773,139 @@

- - - - - - -
-
-

- default - - - flex-shrink: 1; -

-
-

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

- -
-
- - - -
-
-
-

- - - flex-shrink: 0; -

-
-

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

-

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

+ + + + +
+
+

+ default + + flex-shrink: 1; +

+
+

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

-
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + flex-shrink: 0; +

+
+

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

+

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

+
+
- flex-shrink: 2; -

-
-

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

-
  • 3 quarters are taken from the red item
  • 1 quarter is taken from the yellow item
+ + + +
+
+
+

+ + flex-shrink: 2; +

+
+

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

+

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

+
    +
  • 3 quarters are taken from the red item
    • +
  • 1 quarter is taken from the yellow item
    • +
+
+
-
+ + + + + @@ -6882,75 +8926,111 @@

- - - + +
+
+

+ default -

-
-

- default + flex-wrap: nowrap; +

+
+

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

+
+
- flex-wrap: nowrap; -

-
-

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

- -
-
- -
-
-
-

- - - flex-wrap: wrap; -

-
-

The flexbox items will be distributed among multiple lines if needed.

+
+ + +
+
+
+

+ + flex-wrap: wrap; +

+
+

The flexbox items will be distributed among multiple lines if needed.

-
-
+ + -
-
-
-

- - - flex-wrap: wrap-reverse; -

-
-

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

+
+ + +
+
+
+

+ + flex-wrap: wrap-reverse; +

+
+

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

-
-
+ + -
+ + + + @@ -6971,74 +9051,94 @@

+
+
+

+ default + float: none; +

+
+

Removes any previously defined float value. The element will remain in the natural flow of the page.

+
+
- -
-
-

- default - - - float: none; -

-
-

Removes any previously defined float value. The element will remain in the natural flow of the page.

- -
-
- -
-
-
-

- - - float: left; -

-
-

Moves the element to the left side of its container. The following elements will wrap around it and fill the space remaining on the right.

+
+ + +
+
+
+

+ + float: left; +

+
+

Moves the element to the left side of its container. The following elements will wrap around it and fill the space remaining on the right.

-
-
+ + -
-
-
-

- - - float: right; -

-
-

Moves the element to the right side of its container. The following elements will wrap around it and fill the space remaining on the left.

+
+ + +
+
+
+

+ + float: right; +

+
+

Moves the element to the right side of its container. The following elements will wrap around it and fill the space remaining on the left.

-
-
+ + -
+ + + +
@@ -7053,145 +9153,181 @@

#font-family

- +
- - - - - -
-
-

- - - font-family: "Source Sans Pro", "Arial", sans-serif; -

-
-

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

-

The browser will look for each family on the user's computer and in any @font-face resource.

-

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

-

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

- -
-
- - - -
-
-
-

- - - font-family: serif; -

-
-

The browser will use a serif font family: all characters have stroke endings.

- -
-
- - - -
-
-
-

- - - font-family: sans-serif; -

-
-

The browser will use a sans-serif font family: no character has stroke endings.

- -
-
- - - -
-
-
-

+ + +

+
+

+ + font-family: "Source Sans Pro", "Arial", sans-serif; +

+
+

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

+

The browser will look for each family on the user's computer and in any @font-face resource.

+

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

+

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

+
+
- font-family: monospace; -

-
-

The browser will use a monospace font family: all characters have the same width.

+ + +
+
+
+

+ + font-family: serif; +

+
+

The browser will use a serif font family: all characters have stroke endings.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + font-family: sans-serif; +

+
+

The browser will use a sans-serif font family: no character has stroke endings.

+
+
- font-family: cursive; -

-
-

The browser will use a cursive font family.

+ + +
+
+
+

+ + font-family: monospace; +

+
+

The browser will use a monospace font family: all characters have the same width.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + font-family: cursive; +

+
+

The browser will use a cursive font family.

+
+
- font-family: fantasy; -

-
-

The browser will use a fantasy font family.

+ + +
+
+
+

+ + font-family: fantasy; +

+
+

The browser will use a fantasy font family.

-
-
+ + - - -
+ + + @@ -7212,164 +9348,280 @@

- - - - - -
-
-

- default - - - font-size: medium; -

-
-

The text will use the browser's default medium size.

- -
-
- - - -
-
-
-

- - - font-size: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - font-size: 1.2em; -

-
-

You can use em values.

-

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - font-size: 1.2rem; -

-
-

You can use rem values.

-

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

+ font-size: medium; +

+
+

The text will use the browser's default medium size.

-
-
+ +
-
-
-
-

- + + + +

+
+
+

+ + font-size: 20px; +

+
+

You can use pixel values.

- font-size: 90%; -

-
-

You can use percentage values. They act like em values.

-

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

+
+
+ + +
+
+
+

+ + font-size: 1.2em; +

+
+

You can use em values.

+

The value is relative to the parent's font-size. +
As a result, the value will cascade if used on child elements.

+ +
+
-
-
-
-

+ + +

+
+
+

+ + font-size: 1.2rem; +

+
+

You can use rem values.

+

The value is relative to the root element's font-size, which is the <html> element. +
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

+
+
- font-size: smaller; -

-
-

You can use relative keywords. The value is relative to the parent.

-

The following are available:

-
  • larger
  • smaller
+ + +
+
+
+

+ + font-size: 90%; +

+
+

You can use percentage values. They act like em values.

+

The value is relative to the parent's font-size. +
As a result, the value will cascade if used on child elements.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + font-size: smaller; +

+
+

You can use relative keywords. The value is relative to the parent.

+

The following are available:

+
    +
  • larger +
    • +
  • smaller +
    • +
+
+
- font-size: x-large; -

-
-

You can use absolute keywords. The value is relative to the root element <html>.

-

The following are available:

-
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
+ + +
+
+
+

+ + font-size: x-large; +

+
+

You can use absolute keywords. The value is relative to the root element <html>.

+

The following are available:

+
    +
  • xx-small +
    • +
  • x-small +
    • +
  • small +
    • +
  • medium +
    • +
  • large +
    • +
  • x-large +
    • +
  • xx-large +
    • +
+
+
-
+ + + @@ -7390,75 +9642,88 @@

- - - - - -
-
-

- default - - - font-style: normal; -

-
-

The text is not slanted.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - font-style: italic; -

-
-

Use the italic version of the font: the letters are slightly slanted.

+ font-style: normal; +

+
+

The text is not slanted.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + font-style: italic; +

+
+

Use the italic version of the font: the letters are slightly slanted.

+
+
- font-style: oblique; -

-
-

Use the oblique version of the font: the letters are more slanted than italic.

+ + +
+
+
+

+ + font-style: oblique; +

+
+

Use the oblique version of the font: the letters are more slanted than italic.

-
-
+ + - - -
+ + + @@ -7479,54 +9744,63 @@

- - - - - -
-
-

- default - + - font-variant: normal; -

-
-

Each letter uses its normal glyph.

- -
-
+
+
+

+ default -

- -
-
-
-

+ font-variant: normal; +

+
+

Each letter uses its normal glyph.

+
+
- font-variant: small-caps; -

-
-

Each letter uses its small capitalized version.

+ + +
+
+
+

+ + font-variant: small-caps; +

+
+

Each letter uses its small capitalized version.

-
-
+ + - - -
+ + +
@@ -7547,97 +9821,125 @@

- - - - - -
-
-

- default - - - font-weight: normal; -

-
-

The text is in normal weight.

- -
-
- - - -
-
-
-

- - - font-weight: bold; -

-
-

The text becomes bold.

+ -
-
+
+
+

+ default -

- -
-
-
-

+ font-weight: normal; +

+
+

The text is in normal weight.

+
+
- font-weight: 600; -

-
-

You can use numeric values. They all correspond to a particular named weight:

-
  • 100 Thin
  • 200 Extra Light
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

+ + +
+
+
+

+ + font-weight: bold; +

+
+

The text becomes bold.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + font-weight: 600; +

+
+

You can use numeric values. They all correspond to a particular named weight:

+
    +
  • 100 Thin
    • +
  • 200 Extra Light
    • +
  • 300 Light
    • +
  • 400 Normal
    • +
  • 500 Medium
    • +
  • 600 Semi Bold
    • +
  • 700 Bold
    • +
  • 800 Extra Bold
    • +
  • 900 Ultra Bold
    • +
+

If the font family doesn't provide the requested weight, it will use the closest available one.

+
+
- font-weight: lighter; -

-
-

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

+ + +
+
+
+

+ + font-weight: lighter; +

+
+

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

-
-
+ + - - -
+ + +
@@ -7652,17 +9954,12 @@

#font

-

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

+

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

- - - - -
@@ -7682,54 +9979,63 @@

- - - - - -
-
-

- default + +

+
+

+ default - height: auto; -

-
-

The element will automatically adjust its height to allow its content to be displayed correctly.

+ height: auto; +

+
+

The element will automatically adjust its height to allow its content to be displayed correctly.

-
-
+ +
-
-
-
-

- - - height: 100px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

+
+ +
+
+
+

+ + height: 100px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

-
-
+ + -
+ + + +

@@ -7750,117 +10056,161 @@

- - - - - -
-
-

- default + + +

+
+

+ default + + justify-content: flex-start; +

+
+

The flexbox items are pushed towards the start of the container's main axis.

+
+
- justify-content: flex-start; -

-
-

The flexbox items are pushed towards the start of the container's main axis.

- -
-
- -
-
-
-

- - - justify-content: flex-end; -

-
-

The flexbox items are pushed towards the end of the container's main axis.

+
+ + +
+
+
+

+ + justify-content: flex-end; +

+
+

The flexbox items are pushed towards the end of the container's main axis.

-
-
+ + -
-
-
-

- - - justify-content: center; -

-
-

The flexbox items are centered along the container's main axis.

+
+ + +
+
+
+

+ + justify-content: center; +

+
+

The flexbox items are centered along the container's main axis.

-
-
+ + -
-
-
-

- - - justify-content: space-between; -

-
-

The remaining space is distributed between the flexbox items.

+
+ + +
+
+
+

+ + justify-content: space-between; +

+
+

The remaining space is distributed between the flexbox items.

-
-
+ + -
-
-
-

- - - justify-content: space-around; -

-
-

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

+
+ + +
+
+
+

+ + justify-content: space-around; +

+
+

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

-
-
+ + -
+ + + + @@ -7881,77 +10231,129 @@

- - - - - - -
-
-

- default - + + + + +

+
+

+ default + + left: auto; +

+
+

The element will remain in its natural position.

- left: auto; -

-
-

The element will remain in its natural position.

- -
-
+ +
-
-
-
-

- - - left: 80px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the left value.

+
+ + + +
+
+
+

+ + left: 80px; +

+
+

If the element is in position relative, the element will move upwards by the amount defined by the left value.

-
-
+ + -
-
-
-

- - - left: -20px; -

-
-

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

+
+ + +
+
+
+

+ + left: -20px; +

+
+

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

-
-
+ + -
+ + + + @@ -7972,74 +10374,82 @@

+
+
+

+ default + letter-spacing: normal; +

+
+

The spacing between the characters is normal.

+
+
+ + +
+
+
+

+ + letter-spacing: 2px; +

+
+

You can use pixel values.

-
-
-

- default - - - letter-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - - letter-spacing: 2px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- +

+
- letter-spacing: 0.1em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

+ + +
+
+
+

+ + letter-spacing: 0.1em; +

+
+

You can use em values: this allows the spacing to remain relative to the font-size.

-
-
+ + - - -
+ + + @@ -8060,99 +10470,132 @@

+
+
+

+ default + line-height: normal; +

+
+

Reverts to the default value of the browser.

+
+
- -
-
-

- default - - - line-height: normal; -

-
-

Reverts to the default value of the browser.

- -
-
- -
-
-
-

- - recommended - - line-height: 1.6; -

-
-

You can use unitless values: the line height will be relative to the font size.

+
+ + +
+
+
+

+ + recommended + + line-height: 1.6; +

+
+

You can use unitless values: the line height will be relative to the font size.

-
-
+ + -
-
-
-

- - - line-height: 30px; -

-
-

You can use pixel values.

+
+ + + +
+
+
+

+ + line-height: 30px; +

+
+

You can use pixel values.

-
-
+ + -
-
-
-

- - - line-height: 0.8em; -

-
-

You can use em values: like with unitless values, the line height will be relative to the font size.

+
+ + + +
+
+
+

+ + line-height: 0.8em; +

+
+

You can use em values: like with unitless values, the line height will be relative to the font size.

-
-
+ + -
+ + + + +
@@ -8173,55 +10616,82 @@

+ +
+
+

+ default - - - -

-
-

- default - - - list-style-image: none; -

-
-

The list items will use the bullet point defined by the list-style-type value, which by default is a disc.

- -
-
- - - -
-
-
-

- + list-style-image: none; +

+
+

The list items will use the bullet point defined by the list-style-type value, which by default is a disc.

- list-style-image: url(/images/list-style-image.png); -

-
-

The list items will use the image located at the specified URL as their bullet point.
The image can not be resized.

+
+
+
+ + + +
+
+
+

+ + list-style-image: url(/images/list-style-image.png); +

+
+

The list items will use the image located at the specified URL as their bullet point. +
The image can not be resized.

-
+ + - - -
+ + + + + @@ -8242,58 +10712,100 @@

+ + +
+
+

+ default + + list-style-position: outside; +

+
+

The bullet point will be outside the list item, as if it wasn't part of the list item.

+

The start of each line of a list item will be aligned vertically.

+
+
- - - -
-
-

- default - - - list-style-position: outside; -

-
-

The bullet point will be outside the list item, as if it wasn't part of the list item.

-

The start of each line of a list item will be aligned vertically.

- -
-
- -
-
-
-

- - - list-style-position: inside; -

-
-

The bullet point will be inside the list item.

-

As it is part of the list item, it will be part of the text and push the text at the start.

+
+ + + +
+
+
+

+ + list-style-position: inside; +

+
+

The bullet point will be inside the list item.

+

As it is part of the list item, it will be part of the text and push the text at the start.

-
-
+ + -
+ + + + +
@@ -8314,122 +10826,193 @@

+ +
+
+

+ default - - - -

-
-

- default + list-style-type: disc; +

+
+

The list items will use a disc as their bullet point.

+
+
- list-style-type: disc; -

-
-

The list items will use a disc as their bullet point.

- -
-
- -
-
-
-

- - - list-style-type: circle; -

-
-

The list items will use a circle as their bullet point.

+
+ + + +
+
+
+

+ + list-style-type: circle; +

+
+

The list items will use a circle as their bullet point.

-
-
+ + -
-
-
-

- - - list-style-type: square; -

-
-

The list items will use a square as their bullet point.

+
+ + + +
+
+
+

+ + list-style-type: square; +

+
+

The list items will use a square as their bullet point.

-
-
+ + -
-
-
-

- - - list-style-type: decimal; -

-
-

The list items will use a decimal as their bullet point.

+
+ + + +
+
+
+

+ + list-style-type: decimal; +

+
+

The list items will use a decimal as their bullet point.

-
-
+ + -
-
-
-

- - - list-style-type: none; -

-
-

The list items will have no bullet point.

+
+ + + +
+
+
+

+ + list-style-type: none; +

+
+

The list items will have no bullet point.

-
-
+ + -
+ + + + + @@ -8444,17 +11027,12 @@

#list-style

-

Shorthand property for list-style-type list-style-image and list-style-position.

+

Shorthand property for list-style-type list-style-image and list-style-position.

- - - - -
@@ -8474,98 +11052,182 @@

- - - - - - -
-
-

- default - - - margin-bottom: 0; -

-
-

Removes any margin at the bottom.

- -
-
- - - -
-
-
-

- + + + + +

+
+

+ default + + margin-bottom: 0; +

+
+

Removes any margin at the bottom.

- margin-bottom: 30px; -

-
-

You can use pixel values.

- -
-
+ +
-
-
-
-

+ + + +

+
+
+

+ + margin-bottom: 30px; +

+
+

You can use pixel values.

+
+
- margin-bottom: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + margin-bottom: 2em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - margin-bottom: 10%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

+
+ + +
+
+
+

+ + margin-bottom: 10%; +

+
+

You can use percentage values. +
The percentage is based on the width of the container.

-
-
+ + -
+ + + +

@@ -8586,120 +11248,226 @@

- - - - - - -
-
-

- default - - - margin-left: 0; -

-
-

Removes any margin on the left.

- -
-
- - - -
-
-
-

- + + + + +

+
+

+ default + + margin-left: 0; +

+
+

Removes any margin on the left.

- margin-left: 50px; -

-
-

You can use pixel values.

- -
-
+ +
-
-
-
-

+ + + +

+
+
+

+ + margin-left: 50px; +

+
+

You can use pixel values.

+
+
- margin-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + margin-left: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - margin-left: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

+
+ + +
+
+
+

+ + margin-left: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the container.

-
-
+ + -
-
-
-

- - - margin-left: auto; -

-
-

The auto keyword will give the left side a share of the remaining space.

-

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

+
+ + +
+
+
+

+ + margin-left: auto; +

+
+

The auto keyword will give the left side a share of the remaining space.

+

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

-
-
+ + -
+ + + + @@ -8720,120 +11488,226 @@

- - - - - - -
-
-

- default - - - margin-right: 0; -

-
-

Removes any margin on the right.

- -
-
- - - -
-
-
-

- - - margin-right: 50px; -

-
-

You can use pixel values.

+ + + + +
+
+

+ default + + margin-right: 0; +

+
+

Removes any margin on the right.

-
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + margin-right: 50px; +

+
+

You can use pixel values.

+
+
- margin-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + margin-right: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - margin-right: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

+
+ + +
+
+
+

+ + margin-right: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the container.

-
-
+ + -
-
-
-

- - - margin-right: auto; -

-
-

The auto keyword will give the right side a share of the remaining space.

-

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

+
+ + +
+
+
+

+ + margin-right: auto; +

+
+

The auto keyword will give the right side a share of the remaining space.

+

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

-
-
+ + -
+ + + + @@ -8854,98 +11728,180 @@

- - - - + + + + +
+
+

+ default + + margin-top: 0; +

+
+

Removes any margin at the top.

+
+
-
-
-

- default - - - margin-top: 0; -

-
-

Removes any margin at the top.

- -
-
- - - -
-
-
-

- - - margin-top: 30px; -

-
-

You can use pixel values.

- -
-
- -
-
-
-

+ + + +

+
+
+

+ + margin-top: 30px; +

+
+

You can use pixel values.

+
+
- margin-top: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + margin-top: 2em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - margin-top: 10%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

+
+ + +
+
+
+

+ + margin-top: 10%; +

+
+

You can use percentage values. +
The percentage is based on the width of the container.

-
-
+ + -
+ + + +
@@ -8960,129 +11916,320 @@

#margin

-

Shorthand property for margin-top margin-right margin-bottom and margin-left.

+

Shorthand property for margin-top margin-right margin-bottom and margin-left.

- - - - - - -
-
-

- default - - - margin: 0; -

-
-

Removes all margins.

- -
-
- - - -
-
-
-

- - - margin: 30px; -

-
-

When using 1 value, the margin is set for all 4 sides.

+ + + + +
+
+

+ default + + margin: 0; +

+
+

Removes all margins.

-
-
+
+
-
-
-
-

- - - margin: 30px 60px; -

-
-

When using 2 values:

-
  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

+
+ + +
+
+
+

+ + margin: 30px; +

+
+

When using 1 value, the margin is set for all 4 sides.

-
-
+ + -
-
-
-

- - - margin: 30px 60px 45px; -

-
-

When using 3 values:

-
  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

+
+ + +
+
+
+

+ + margin: 30px 60px; +

+
+

When using 2 values:

+
    +
  • the first value is for top/bottom +
    • +
  • the second value is for right/left +
    • +
+

To remember the order think about the values you haven't defined.

+

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + margin: 30px 60px 45px; +

+
+

When using 3 values:

+
    +
  • the first value is for top +
    • +
  • the second value is for right/left +
    • +
  • the third value is for bottom +
    • +
+

To remember the order think about the values you haven't defined.

+

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

- margin: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

+
+
+ + +
+
+
+

+ + margin: 30px 60px 45px 85px; +

+
+

When using 4 values:

+
    +
  • the first value is for top +
    • +
  • the second value is for right +
    • +
  • the third value is for bottom +
    • +
  • the fourth value is for left +
    • +
+

To remember the order, start at the top and go clockwise.

+ +
+
-
+ + + + @@ -9103,74 +12250,85 @@

- + +
+
+

+ default + max-height: none; +

+
+

The element has no limit in terms of height.

+
+
-
-
-

- default - - - max-height: none; -

-
-

The element has no limit in terms of height.

- -
-
- -
-
-
-

- - - max-height: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum height is larger than the element's actual height, the max height has no effect.

+
+ +
+
+
+

+ + max-height: 2000px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

If the maximum height is larger than the element's actual height, the max height has no effect.

-
-
+ + -
-
-
-

- + + +

+
+
+

- max-height: 100px; -

-
-

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

+ max-height: 100px; +

+
+

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

-
-
+ + -
+ + + +
@@ -9191,73 +12349,79 @@

+
+
+

+ default + max-width: none; +

+
+

The element has no limit in terms of width.

+
+
- -
-
-

- default - - - max-width: none; -

-
-

The element has no limit in terms of width.

- -
-
- -
-
-
-

- - - max-width: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum width is larger than the element's actual width, the max width has no effect.

+
+ +
+
+
+

+ + max-width: 2000px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

If the maximum width is larger than the element's actual width, the max width has no effect.

-
-
+ + -
-
-
-

- + + +

+
+
+

- max-width: 150px; -

-
-

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

+ max-width: 150px; +

+
+

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

-
-
+ + -
+ + + +
@@ -9278,75 +12442,90 @@

+ +
+
+

+ default - - - -

-
-

- default - + min-height: 0; +

+
+

The element has no minimum height.

- min-height: 0; -

-
-

The element has no minimum height.

- -
-
+ +
-
-
-
-

- - - min-height: 200px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum height is larger than the element's actual height, the min height will be applied.

+
+ +
+
+
+

+ + min-height: 200px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

If the minimum height is larger than the element's actual height, the min height will be applied.

-
-
+ + -
-
-
-

- - - min-height: 5px; -

-
-

If the minimum height is smaller than the element's actual height, the min height has no effect.

+
+ + +
+
+
+

+ + min-height: 5px; +

+
+

If the minimum height is smaller than the element's actual height, the min height has no effect.

-
-
+ + -
+ + + + @@ -9367,75 +12546,91 @@

+ +
+
+

+ default - - - -

-
-

- default - - - min-width: 0; -

-
-

The element has no minimum width.

+ min-width: 0; +

+
+

The element has no minimum width.

-
-
+ +
-
-
-
-

- - - min-width: 300px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum width is larger than the element's actual width, the min width will be applied.

+
+ +
+
+
+

+ + min-width: 300px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

If the minimum width is larger than the element's actual width, the min width will be applied.

-
-
+ + -
-
-
-

- - - min-width: 5px; -

-
-

If the minimum width is smaller than the element's actual width, the min width has no effect.

+
+ + +
+
+
+

+ + min-width: 5px; +

+
+

If the minimum width is smaller than the element's actual width, the min width has no effect.

-
-
+ + -
+ + + + @@ -9456,347 +12651,474 @@

- - + +
+
+

+ default + mix-blend-mode: normal; +

+
+

The element does not blend.

-
-
-

- default - - - mix-blend-mode: normal; -

-
-

The element does not blend.

- -
-
+
+
-
-
-
-

- + + +

+
+
+

- mix-blend-mode: multiply; -

-
-

The element uses the multiply blend mode.

+ mix-blend-mode: multiply; +

+
+

The element uses the multiply blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: screen; -

-
-

The element uses the screen blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: screen; +

+
+

The element uses the screen blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: overlay; -

-
-

The element uses the overlay blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: overlay; +

+
+

The element uses the overlay blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: darken; -

-
-

The element uses the darken blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: darken; +

+
+

The element uses the darken blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: lighten; -

-
-

The element uses the lighten blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: lighten; +

+
+

The element uses the lighten blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: color-dodge; -

-
-

The element uses the color-dodge blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: color-dodge; +

+
+

The element uses the color-dodge blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: color-burn; -

-
-

The element uses the color-burn blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: color-burn; +

+
+

The element uses the color-burn blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: hard-light; -

-
-

The element uses the hard-light blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: hard-light; +

+
+

The element uses the hard-light blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: soft-light; -

-
-

The element uses the soft-light blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: soft-light; +

+
+

The element uses the soft-light blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: difference; -

-
-

The element uses the difference blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: difference; +

+
+

The element uses the difference blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: exclusion; -

-
-

The element uses the exclusion blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: exclusion; +

+
+

The element uses the exclusion blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: hue; -

-
-

The element uses the hue blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: hue; +

+
+

The element uses the hue blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: saturation; -

-
-

The element uses the saturation blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: saturation; +

+
+

The element uses the saturation blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: color; -

-
-

The element uses the color blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: color; +

+
+

The element uses the color blend mode.

-
-
+ + -
-
-
-

- - - mix-blend-mode: luminosity; -

-
-

The element uses the luminosity blend mode.

+
+ + +
+
+
+

+ + mix-blend-mode: luminosity; +

+
+

The element uses the luminosity blend mode.

-
-
+ + -
+ + + + @@ -9817,74 +13139,90 @@

- - - - - -
-
-

- default + +

+
+

+ default - opacity: 1; -

-
-

The element is fully opaque.

+ opacity: 1; +

+
+

The element is fully opaque.

-
-
+ +
-
-
-
-

- + + +

+
+
+

- opacity: 0; -

-
-

The element is fully transparent.

+ opacity: 0; +

+
+

The element is fully transparent.

-
-
+ + -
-
-
-

- - - opacity: 0.3; -

-
-

Any value between 0 (zero) and 1 (one) will make the element semi transparent.

+
+ + +
+
+
+

+ + opacity: 0.3; +

+
+

Any value between 0 (zero) and 1 (one) will make the element semi transparent.

-
-
+ + -
+ + + + @@ -9901,100 +13239,180 @@

Defines the order of a flexbox item.

-
- - - - - - - - - -
-
-

- default - - - order: 0; -

-
-

The order of the flexbox items is the one defined in the HTML code.

- -
-
- - -
-
-
-

+ +

- order: 1; -

-
-

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

+ + + + +
+
+

+ default + + order: 0; +

+
+

The order of the flexbox items is the one defined in the HTML code.

-
-
+
+ -
-
-
-

- + + +

+
+
+

- order: -1; -

-
-

You can use negative values.

+ order: 1; +

+
+

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + order: -1; +

+
+

You can use negative values.

- order: 9; -

-
-

You can set a different value for each flexbox item.

+
+
+ + +
+
+
+

+ + order: 9; +

+
+

You can set a different value for each flexbox item.

+ +
+
-
+ + + + @@ -10015,162 +13433,217 @@

- - - - - -
-
-

- default - - - outline-color: transparent; -

-
-

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

- -
-
- - - -
-
-
-

- - - outline-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - outline-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

+ +

+
+

+ default - outline-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

+ outline-color: transparent; +

+
+

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

-
-
+ +
- - -
-
-
-

+

+ +
+
+
+

+ + outline-color: red; +

+
+

You can use one of the 140+ color names.

+
+
- outline-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + outline-color: #05ffb0; +

+
+

You can use hexadecimal color codes.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + outline-color: rgb(50, 115, 220); +

+
+

You can use rgb() color codes:

+
    +
  • the first value is for red +
    • +
  • the second value is for green +
    • +
  • the third value is for blue +
    • +
+

Each of them can have a value between 0 and 255.

+
+
- outline-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
- + + +
+
+
+

+ + outline-color: rgba(50, 115, 220, 0.3); +

+
+

You can use rgba() color codes:

+
    +
  • the first 3 values are for rgb +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- - -
-
-
-

+ +

+ + +
+
+
+

+ + outline-color: hsl(14, 100%, 53%); +

+
+

You can use hsl() color codes:

+
    +
  • the first value is for hue and can go from 0 to 359 +
    • +
  • the second value is for saturation and go from 0% to 100% +
    • +
  • the third value is for luminosity and go from 0% to 100% +
    • +
+
+
- outline-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

+ + +
+
+
+

+ + outline-color: hsla(14, 100%, 53%, 0.6); +

+
+

You can use hsl()a color codes:

+
    +
  • the first 3 values are for hsl +
    • +
  • the 4th value is for the alpha channel and defines the opacity of the color
    • +
+

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

-
-
+ + - - -
+ + + @@ -10191,138 +13664,164 @@

- - - - - -
-
-

- default - - - outline-style: none; -

-
-

Removes the element's outlines.

- -
-
- - - -
-
-
-

- - - outline-style: dotted; -

-
-

Turns the outline into a sequence of dots.

- -
-
- - - -
-
-
-

- + - outline-style: dashed; -

-
-

Turns the outline into a sequence of dashes.

- -
-
+
+
+

+ default -

- -
-
-
-

+ outline-style: none; +

+
+

Removes the element's outlines.

+
+
- outline-style: solid; -

-
-

Turns the outline into a solid line.

+ + +
+
+
+

+ + outline-style: dotted; +

+
+

Turns the outline into a sequence of dots.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + outline-style: dashed; +

+
+

Turns the outline into a sequence of dashes.

+
+
- outline-style: double; -

-
-

Splits the outline into two lines.

+ + +
+
+
+

+ + outline-style: solid; +

+
+

Turns the outline into a solid line.

-
-
+ + - - -
-
-
-

+

+ +
+
+
+

+ + outline-style: double; +

+
+

Splits the outline into two lines.

+
+
- outline-style: groove; -

-
-

Sets an inset style to the outlines.

+ + +
+
+
+

+ + outline-style: groove; +

+
+

Sets an inset style to the outlines.

-
-
+ + - - -
+ + +
@@ -10343,54 +13842,63 @@

- - - - - -
-
-

- default - + - outline-width: medium; -

-
-

Defines the width of all outlines to medium.

- -
-
+
+
+

+ default -

- -
-
-
-

+ outline-width: medium; +

+
+

Defines the width of all outlines to medium.

+
+
- outline-width: 1px; -

-
-

Defines the width of all outlines to 1px.

+ + +
+
+
+

+ + outline-width: 1px; +

+
+

Defines the width of all outlines to 1px.

-
-
+ + - - -
+ + +
@@ -10405,58 +13913,66 @@

#outline

-

Shorthand property for outline-width outline-style and outline-color.

+

Shorthand property for outline-width outline-style and outline-color.

+
+
+

+ + outline: 4px dotted red; +

+
+

The order is important:

+
    +
  • width
    • +
  • style
    • +
  • color
    • +
+
+
+ + +
+
+
+

+ + outline: 2px solid; +

+
+

Only the color is optional. If you omit it, the color applied will be the color of the text.

+
+
- -
-
-

- - - outline: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - outline: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
+ + +
@@ -10477,54 +13993,64 @@

- - - - - -
-
-

- default - - - overflow-wrap: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

+ -
-
+
+
+

+ default -

- -
-
-
-

+ overflow-wrap: normal; +

+
+

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

+
+
- overflow-wrap: break-word; -

-
-

Words with no space will break as soon as they reach the end of a line.

+ + +
+
+
+

+ + overflow-wrap: break-word; +

+
+

Words with no space will break as soon as they reach the end of a line.

-
-
+ + - - -
+ + +
@@ -10545,96 +14071,122 @@

+ +
+
+

+ default - - - -

-
-

- default - - - overflow-x: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified width.

+ overflow-x: visible; +

+
+

The overflowing content is visible, while the element itself stays at the specified width.

-
-
+ +
-
-
-
-

- - - overflow-x: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

+
+ + +
+
+
+

+ + overflow-x: hidden; +

+
+

The overflowing content is hidden and can not be accessed.

-
-
+ + -
-
-
-

- - - overflow-x: scroll; -

-
-

The overflowing content is accessible thanks to a horizontal scrollbar.

+
+ + +
+
+
+

+ + overflow-x: scroll; +

+
+

The overflowing content is accessible thanks to a horizontal scrollbar.

-
-
+ + -
-
-
-

- - - overflow-x: auto; -

-
-

The browser decides whether to display a horizontal scrollbar or not.

+
+ + +
+
+
+

+ + overflow-x: auto; +

+
+

The browser decides whether to display a horizontal scrollbar or not.

-
-
+ + -
+ + + + @@ -10655,96 +14207,122 @@

+ +
+
+

+ default - - - -

-
-

- default - + overflow-y: visible; +

+
+

The overflowing content is visible, while the element itself stays at the specified height.

- overflow-y: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

- -
-
+ +
-
-
-
-

- - - overflow-y: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

+
+ + +
+
+
+

+ + overflow-y: hidden; +

+
+

The overflowing content is hidden and can not be accessed.

-
-
+ + -
-
-
-

- - - overflow-y: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

+
+ + +
+
+
+

+ + overflow-y: scroll; +

+
+

The overflowing content is accessible thanks to a vertical scrollbar.

-
-
+ + -
-
-
-

- - - overflow-y: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

+
+ + +
+
+
+

+ + overflow-y: auto; +

+
+

The browser decides whether to display a vertical scrollbar or not.

-
-
+ + -
+ + + + @@ -10759,103 +14337,144 @@

#overflow

-

Defines how overflowing content on both horizontal and vertical axis is displayed.

- -
- - - - - - - - +

Defines how overflowing content on both horizontal and vertical axis is displayed.

-
-
-

- default + +

- overflow: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

+ + + + +
+
+

+ default + + overflow: visible; +

+
+

The overflowing content is visible, while the element itself stays at the specified height.

-
-
+
+ -
-
-
-

- - - overflow: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

+
+ + +
+
+
+

+ + overflow: hidden; +

+
+

The overflowing content is hidden and can not be accessed.

-
-
+ + -
-
-
-

- - - overflow: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

+
+ + +
+
+
+

+ + overflow: scroll; +

+
+

The overflowing content is accessible thanks to a vertical scrollbar.

-
-
+ + -
-
-
-

- - - overflow: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

+
+ + +
+
+
+

+ + overflow: auto; +

+
+

The browser decides whether to display a vertical scrollbar or not.

-
-
+ + -
+ + + + @@ -10876,98 +14495,182 @@

- - - - - + + + + +
+
+

+ default + + padding-bottom: 0; +

+
+

Removes any padding on the bottom.

-
-
-

- default - - - padding-bottom: 0; -

-
-

Removes any padding on the bottom.

- -
-
- - - -
-
-
-

- - - padding-bottom: 50px; -

-
-

You can use pixel values.

- -
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + padding-bottom: 50px; +

+
+

You can use pixel values.

+
+
- padding-bottom: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + padding-bottom: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - padding-bottom: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

+
+ + +
+
+
+

+ + padding-bottom: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the element.

-
-
+ + -
+ + + + @@ -10988,98 +14691,178 @@

- - - - - - -
-
-

- default - - - padding-left: 0; -

-
-

Removes any padding on the left.

- -
-
- - - -
-
-
-

- - - padding-left: 50px; -

-
-

You can use pixel values.

+ + + + +
+
+

+ default + + padding-left: 0; +

+
+

Removes any padding on the left.

-
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + padding-left: 50px; +

+
+

You can use pixel values.

+
+
- padding-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + padding-left: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - padding-left: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

+
+ + +
+
+
+

+ + padding-left: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the element.

-
-
+ + -
+ + + + @@ -11100,98 +14883,179 @@

- - - - - - -
-
-

- default - - - padding-right: 0; -

-
-

Removes any padding on the right.

- -
-
- - - -
-
-
-

- - - padding-right: 50px; -

-
-

You can use pixel values.

+ + + + +
+
+

+ default + + padding-right: 0; +

+
+

Removes any padding on the right.

-
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + padding-right: 50px; +

+
+

You can use pixel values.

+
+
- padding-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + padding-right: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - padding-right: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

+
+ + +
+
+
+

+ + padding-right: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the element.

-
-
+ + -
+ + + + @@ -11212,98 +15076,182 @@

- - - - - - -
-
-

- default - - - padding-top: 0; -

-
-

Removes any padding on the top.

- -
-
- - - -
-
-
-

- - - padding-top: 50px; -

-
-

You can use pixel values.

+ + + + +
+
+

+ default + + padding-top: 0; +

+
+

Removes any padding on the top.

-
-
+
+
-
-
-
-

+ + + +

+
+
+

+ + padding-top: 50px; +

+
+

You can use pixel values.

+
+
- padding-top: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
+ + +
+
+
+

+ + padding-top: 7em; +

+
+

You can use (r)em values.

+

The value is relative to the font size:

+
    +
  • em: relative to the element's current font size
    • +
  • rem: relative to <html> the root element's font size
    • +
+
+
-
-
-
-

- - - padding-top: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

+
+ + +
+
+
+

+ + padding-top: 30%; +

+
+

You can use percentage values. +
The percentage is based on the width of the element.

-
-
+ + -
+ + + + @@ -11318,129 +15266,310 @@

#padding

-

Shorthand property for padding-top padding-right padding-bottom and padding-left.

+

Shorthand property for padding-top padding-right padding-bottom and padding-left.

- - - - - + + + + +
+
+

+ default + + padding: 0; +

+
+

Removes all paddings.

-
-
-

- default - - - padding: 0; -

-
-

Removes all paddings.

- -
-
+
+
-
-
-
-

- - - padding: 30px; -

-
-

When using 1 value, the padding is set for all 4 sides.

+
+ + +
+
+
+

+ + padding: 30px; +

+
+

When using 1 value, the padding is set for all 4 sides.

-
-
+ + -
-
-
-

- - - padding: 30px 60px; -

-
-

When using 2 values:

-
  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

+
+ + +
+
+
+

+ + padding: 30px 60px; +

+
+

When using 2 values:

+
    +
  • the first value is for top/bottom +
    • +
  • the second value is for right/left +
    • +
+

To remember the order think about the values you haven't defined.

+

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

-
-
+ + -
-
-
-

- - - padding: 30px 60px 45px; -

-
-

When using 3 values:

-
  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

+
+ + +
+
+
+

+ + padding: 30px 60px 45px; +

+
+

When using 3 values:

+
    +
  • the first value is for top +
    • +
  • the second value is for right/left +
    • +
  • the third value is for bottom +
    • +
+

To remember the order think about the values you haven't defined.

+

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

-
-
+ + -
-
-
-

- - - padding: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

+
+ + +
+
+
+

+ + padding: 30px 60px 45px 85px; +

+
+

When using 4 values:

+
    +
  • the first value is for top +
    • +
  • the second value is for right +
    • +
  • the third value is for bottom +
    • +
  • the fourth value is for left +
    • +
+

To remember the order, start at the top and go clockwise.

-
-
+ + -
+ + + + @@ -11461,55 +15590,86 @@

+ + +
+
+

+ default + + pointer-events: auto; +

+
+

The element reacts to pointer events, like :hover or click.

+
+
- - - -
-
-

- default - - - pointer-events: auto; -

-
-

The element reacts to pointer events, like :hover or click.

- -
-
- -
-
-
-

- - - pointer-events: none; -

-
-

The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.

+
+ + +
+
+
+

+ + pointer-events: none; +

+
+

The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.

-
-
+ + -
+ + + + +
@@ -11530,108 +15690,223 @@

- - - - - - -
-
-

- default - - - position: static; -

-
-

The element will remain in the natural flow of the page.

-

As a result, it will not act as anchor point for the absolutely positioned yellow block.

-

Also, it will not react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - -
-
-
-

- - - position: relative; -

-
-

The element will remain in the natural flow of the page.

-

It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - - -
-
-
-

- - - position: absolute; -

-
-

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

-

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
+ + + + +
+
+

+ default + + position: static; +

+
+

The element will remain in the natural flow of the page.

+

As a result, it will not act as anchor point for the absolutely positioned yellow block.

+

Also, it will not react to the following properties:

+
    +
  • top +
    • +
  • bottom +
    • +
  • left +
    • +
  • right +
    • +
  • z-index +
    • +
+
+
-
-
-
-

+ + +

+
+
+

+ + position: relative; +

+
+

The element will remain in the natural flow of the page.

+

It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

+

Also, it will react to the following properties:

+
    +
  • top +
    • +
  • bottom +
    • +
  • left +
    • +
  • right +
    • +
  • z-index +
    • +
+
+
+ + +
+
+
+

+ + position: absolute; +

+
+

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

+

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

+

Also, it will react to the following properties:

+
    +
  • top +
    • +
  • bottom +
    • +
  • left +
    • +
  • right +
    • +
  • z-index +
    • +
+
+
- position: fixed; -

-
- + + +
+
+
+

+ + position: fixed; +

+
+ +
+
+

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

+

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

+

Also, it will react to the following properties:

+
    +
  • top +
    • +
  • bottom +
    • +
  • left +
    • +
  • right +
    • +
  • z-index +
    • +
+
+
-
+ + + + +
@@ -11652,100 +15927,147 @@

+ + +
+
+

+ default + + resize: none; +

+
+

The textarea is not resizable.

+
+
- - - -
-
-

- default - - - resize: none; -

-
-

The textarea is not resizable.

- -
-
- -
-
-
-

- - - resize: horizontal; -

-
-

The textarea is resizable horizontally.

+
+ + + +
+
+
+

+ + resize: horizontal; +

+
+

The textarea is resizable horizontally.

-
-
+ + -
-
-
-

- - - resize: vertical; -

-
-

The textarea is resizable vertically.

+
+ + + +
+
+
+

+ + resize: vertical; +

+
+

The textarea is resizable vertically.

-
-
+ + -
-
-
-

- - - resize: both; -

-
-

The textarea is resizable both horizontally and vertically.

+
+ + + +
+
+
+

+ + resize: both; +

+
+

The textarea is resizable both horizontally and vertically.

-
-
+ + -
+ + + + +
@@ -11766,94 +16088,118 @@

+
+
+

+ text-align: left; +

+
+

The text content is aligned to the left.

+
+
- -
-
-

- - - text-align: left; -

-
-

The text content is aligned to the left.

- -
-
- -
-
-
-

- - - text-align: right; -

-
-

The text content is aligned to the right.

+
+ + +
+
+
+

+ + text-align: right; +

+
+

The text content is aligned to the right.

-
-
+ + -
-
-
-

- - - text-align: center; -

-
-

The text content is centered.

+
+ + +
+
+
+

+ + text-align: center; +

+
+

The text content is centered.

-
-
+ + -
-
-
-

- - - text-align: justify; -

-
-

The text content is justified.

+
+ + +
+
+
+

+ + text-align: justify; +

+
+

The text content is justified.

-
-
+ + -
+ + + +
@@ -11874,53 +16220,57 @@

+
+
+

+ default + text-decoration: none; +

+
+

Removes any text decoration.

+
+
+ + +
+
+
+

+ + text-decoration: underline; +

+
+

Underlines the text content.

-
-
-

- default - - - text-decoration: none; -

-
-

Removes any text decoration.

- -
-
- - - -
-
-
-

- - - text-decoration: underline; -

-
-

Underlines the text content.

- -
-
+
+
- - -
+ + + @@ -11941,75 +16291,89 @@

+
+
+

+ default + text-indent: 0; +

+
+

The text is not indented.

+
+
- -
-
-

- default - - - text-indent: 0; -

-
-

The text is not indented.

- -
-
- -
-
-
-

- - - text-indent: 40px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

Notice how only the first line is indented.

+
+ + +
+
+
+

+ + text-indent: 40px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

+

Notice how only the first line is indented.

-
-
+ + -
-
-
-

- - - text-indent: -2em; -

-
-

You can also use negative values.

+
+ + +
+
+
+

+ + text-indent: -2em; +

+
+

You can also use negative values.

-
-
+ + -
+ + + +
@@ -12030,57 +16394,86 @@

- - - - - - -
-
-

- default - + + + + +

+
+

+ default + + text-overflow: clip; +

+
+

The text content is clipped and not accessible.

- text-overflow: clip; -

-
-

The text content is clipped and not accessible.

- -
-
+ +
-
-
-
-

- - - text-overflow: ellipsis; + + + + +

+
+
+

+ + text-overflow: ellipsis; +

+
+

The overflowing content is replaced by an ellipsis: …

-
-

The overflowing content is replaced by an ellipsis: …

-
-
+ + -
+ + + + + @@ -12101,98 +16494,114 @@

+
+
+

+ default + text-shadow: none; +

+
+

The text content has no shadow.

+
+
+ + +
+
+
+

+ + text-shadow: 2px 6px; +

+
+

You need at least two values:

+
    +
  • the first is the horizontal offset
    • +
  • the second is the vertical offset
    • +
+

The shadow color will be inherited from the text color.

-
-
-

- default - - - text-shadow: none; -

-
-

The text content has no shadow.

- -
-
- - - -
-
-
-

- - - text-shadow: 2px 6px; -

-
-

You need at least two values:

-
  • the first is the horizontal offset
  • the second is the vertical offset

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

- - - text-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

- -
-
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + text-shadow: 2px 6px red; +

+
+

You can define a color as the last value.

+

As with color, you can use color names, hexadecimal, rgb, hsl...

+
+
- text-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

+ + +
+
+
+

+ + text-shadow: 2px 4px 10px red; +

+
+

The optional third value defines the blur of the shadow.

+

The color will be diffused across 10px in this example, from opaque to transparent.

-
-
+ + - - -
+ + + @@ -12213,95 +16622,111 @@

+
+
+

+ default + text-transform: none; +

+
+

Removes any text transformation: the text will appear the same as in the HTML code.

+
+
+ + +
+
+
+

+ + text-transform: capitalize; +

+
+

Turns the first letter of each word into a capital letter.

-
-
-

- default - - - text-transform: none; -

-
-

Removes any text transformation: the text will appear the same as in the HTML code.

- -
-
- - - -
-
-
-

- - - text-transform: capitalize; -

-
-

Turns the first letter of each word into a capital letter.

- -
-
- - - -
-
-
-

- - - text-transform: uppercase; -

-
-

Turns all letters into capital letters.

- -
-
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + text-transform: uppercase; +

+
+

Turns all letters into capital letters.

+
+
- text-transform: lowercase; -

-
-

Turns all letters into lowercase letters.

+ + +
+
+
+

+ + text-transform: lowercase; +

+
+

Turns all letters into lowercase letters.

-
-
+ + - - -
+ + + @@ -12322,79 +16747,137 @@

- - - - - - -
-
-

- default - - - top: auto; -

-
-

The element will remain in its natural position.

+ + + + +
+
+

+ default + + top: auto; +

+
+

The element will remain in its natural position.

-
-
+
+
-
-
-
-

- - - top: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the top value.

+
+ + + +
+
+
+

+ + top: 20px; +

+
+

If the element is in position relative, the element will move upwards by the amount defined by the top value.

-
-
+ + -
-
-
-

- - - top: 0; -

-
-

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

+
+ + + +
+
+
+

+ + top: 0; +

+
+

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

-
-
+ + -
+ + + + + @@ -12407,112 +16890,203 @@

#transform-origin -

-
-

Defines the origin for transformations defined by the transform property.

- -
- -
- -
- - - - - - - - -
-
-

- default - - - transform-origin: 50% 50% 0; -

-
-

The transform origin is in the center of the element.

- -
-
- - - - -
-
-
-

- + +

+

Defines the origin for transformations defined by the transform property.

- transform-origin: 20px 70%; -

-
-

You can use 2 values:

-
  • the first value is the horizontal axis
  • the second is the vertical axis
-
-
+ - - - -
-
-
-

+

+ +
+
+ + + + +
+
+

+ default + + transform-origin: 50% 50% 0; +

+
+

The transform origin is in the center of the element.

- transform-origin: top right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

+
+
+ + + +
+
+
+

+ + transform-origin: 20px 70%; +

+
+

You can use 2 values:

+
    +
  • the first value is the horizontal axis
    • +
  • the second is the vertical axis
    • +
+
+
-
-
-
-

- + + + + +

+
+
+

+ + transform-origin: top right; +

+
+

You can use a combination of position keywords: center, top, bottom, left and right.

- transform-origin: center bottom; -

-
-

When using keywords, you can change the order of the axis, as long as each keywords is unambiguous.

+
+
+ + + +
+
+
+

+ + transform-origin: center bottom; +

+
+

When using keywords, you can change the order of the axis, as long as each keywords is unambiguous.

-
+ + - - -
+ + + + +
@@ -12533,313 +17107,483 @@

- - - - - + + + + +
+
+

+ default + + transform: none; +

+
+

Removes any transformation.

-
-
-

- default - - - transform: none; -

-
-

Removes any transformation.

- -
-
- - - -
-
-
-

- - - transform: translateX(40px); -

-
-

Move the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - - transform: translateY(20px); -

-
-

Move the element on the vertical axis.

- -
-
- - - -
-
-
-

- - - transform: translateY(100%); -

-
-

You can use percentage values: the percentage is relative to the element itself, and not the parent.

- -
-
+
+
-
-
-
-

- + + + +

+
+
+

+ + transform: translateX(40px); +

+
+

Move the element on the horizontal axis.

- transform: translate(20px, -10%); -

-
-

You can use translate() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis
-
-
+ + -
-
-
-

- - - transform: scaleX(1.5); -

-
-

Scale the element on the horizontal axis.

+
+ + +
+
+
+

+ + transform: translateY(20px); +

+
+

Move the element on the vertical axis.

-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + transform: translateY(100%); +

+
+

You can use percentage values: the percentage is relative to the element itself, and not the parent.

- transform: scaleY(0.4); -

-
-

Scale the element on the vertical axis.

+
+
+ + +
+
+
+

+ + transform: translate(20px, -10%); +

+
+

You can use translate() with two values:

+
    +
  • the first value is for the horizontal axis
    • +
  • the second value is for the vertical axis
    • +
+
+
-
-
-
-

- - - transform: scaleY(-2); -

-
-

You can use negative values: it will invert the element.

+
+ + +
+
+
+

+ + transform: scaleX(1.5); +

+
+

Scale the element on the horizontal axis.

-
-
+ + -
-
-
-

- - - transform: scale(0.8, 0.8); -

-
-

You can use scale() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis

By using the same value for both, you can scale proportionally.

+
+ + +
+
+
+

+ + transform: scaleY(0.4); +

+
+

Scale the element on the vertical axis.

-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + transform: scaleY(-2); +

+
+

You can use negative values: it will invert the element.

- transform: rotate(45deg); -

-
-

Rotate the element.

-

You can use:

-
  • degrees from 0 to 360deg
  • gradians from 0 to 400grad
  • radians from 0 to 2πrad
  • turns from 0 to 1turn
-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + transform: scale(0.8, 0.8); +

+
+

You can use scale() with two values:

+
    +
  • the first value is for the horizontal axis
    • +
  • the second value is for the vertical axis
    • +
+

By using the same value for both, you can scale proportionally.

- transform: skewX(15deg); -

-
-

Skew the element on the horizontal axis.

+
+
+ + +
+
+
+

+ + transform: rotate(45deg); +

+
+

Rotate the element.

+

You can use:

+
    +
  • degrees from 0 to 360deg +
    • +
  • gradians from 0 to 400grad +
    • +
  • radians from 0 to 2πrad +
    • +
  • turns from 0 to 1turn +
    • +
+
+
-
-
-
-

- - - transform: skewY(45deg); -

-
-

Skew the element on the vertical axis.

+
+ + +
+
+
+

+ + transform: skewX(15deg); +

+
+

Skew the element on the horizontal axis.

-
-
+ + -
-
-
-

+ + + +

+
+
+

+ + transform: skewY(45deg); +

+
+

Skew the element on the vertical axis.

+
+
- transform: skew(10deg, -20deg); -

-
-

You can use skew() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis
+ + +
+
+
+

+ + transform: skew(10deg, -20deg); +

+
+

You can use skew() with two values:

+
    +
  • the first value is for the horizontal axis
    • +
  • the second value is for the vertical axis
    • +
+
+
-
-
-
-

- - - transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px); -

-
-

You can combine multiple transformations by separating them with a space.

+
+ + +
+
+
+

+ + transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px); +

+
+

You can combine multiple transformations by separating them with a space.

-
-
+ + -
- - + + + + + +
@@ -12859,97 +17603,132 @@

- - - - - - - -
-
-

- default + + + + + + +

+
+

+ default + + transition-delay: 0s; +

+
+

The transition will wait zero seconds, and thus start right away.

+
+
- transition-delay: 0s; -

-
-

The transition will wait zero seconds, and thus start right away.

- -
-
- -
-
-
-

- + + +

+
+
+

- transition-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

+ transition-delay: 1.2s; +

+
+

You can use decimal values in seconds with the keyword s.

-
-
+ + -
-
-
-

- - - transition-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

+
+ + +
+
+
+

+ + transition-delay: 2400ms; +

+
+

You can use milliseconds instead of seconds, with the keyword ms.

-
-
+ + -
-
-
-

- - - transition-delay: -500ms; -

-
-

You can use negative values: the transition will start as if it had already been playing for 500ms.

+
+ + +
+
+
+

+ + transition-delay: -500ms; +

+
+

You can use negative values: the transition will start as if it had already been playing for 500ms.

-
-
+ + -
+ + + +

@@ -12970,77 +17749,109 @@

- - - - - - - -
-
-

- default - + + + + + + +

+
+

+ default + + transition-duration: 0s; +

+
+

The transition will last zero seconds, and is thus instant.

- transition-duration: 0s; -

-
-

The transition will last zero seconds, and is thus instant.

- -
-
+ +
-
-
-
-

- - - transition-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

+
+ + +
+
+
+

+ + transition-duration: 1.2s; +

+
+

You can use decimal values in seconds with the keyword s.

-
-
+ + -
-
-
-

- - - transition-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

+
+ + +
+
+
+

+ + transition-duration: 2400ms; +

+
+

You can use milliseconds instead of seconds, with the keyword ms.

-
-
+ + -
+ + + + @@ -13061,119 +17872,170 @@

- - - - - - - -
-
-

- default - - - transition-property: all; -

-
-

The element will transition all properties:

- -
-
+ + + + + + +
+
+

+ default + + transition-property: all; +

+
+

The element will transition all properties:

+ +
+
-
-
-
-

- - - transition-property: none; -

-
-

The element will transition no property: the transition is thus instant.

+
+ + +
+
+
+

+ + transition-property: none; +

+
+

The element will transition no property: the transition is thus instant.

-
-
+ + -
-
-
-

- - - transition-property: background; -

-
-

The element will only transtion the background property.

+
+ + +
+
+
+

+ + transition-property: background; +

+
+

The element will only transtion the background property.

-
-
+ + -
-
-
-

- - - transition-property: color; -

-
-

The element will only transtion the color property.

+
+ + +
+
+
+

+ + transition-property: color; +

+
+

The element will only transtion the color property.

-
-
+ + -
-
-
-

- - - transition-property: transform; -

-
-

The element will only transtion the transform property.

+
+ + +
+
+
+

+ + transition-property: transform; +

+
+

The element will only transtion the transform property.

-
-
+ + -
+ + + +
@@ -13188,189 +18050,251 @@

#transition-timing-function

-

Defines how the values between the start and the end of the transition are calculated.

- -
- - - - - - - - - - -
-
-

- default - - - transition-timing-function: ease; -

-
-

The transition starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: ease-in; -

-
-

The transition starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: ease-out; -

-
-

The transition starts quickly, and decelerates gradually until the end.

- -
-
+

Defines how the values between the start and the end of the transition are calculated.

- - -
-
-
-

+ +

- transition-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The transition starts quickly, and decelerates gradually until the end.

+ + + + + + +
+
+

+ default + + transition-timing-function: ease; +

+
+

The transition starts slowly, accelerates in the middle, and slows down at the end.

-
-
+
+ -
-
-
-

- - - transition-timing-function: linear; -

-
-

The transition has a *constant speed.

+
+ + +
+
+
+

+ + transition-timing-function: ease-in; +

+
+

The transition starts slowly, and accelerates gradually until the end.

-
-
+ + -
-
-
-

- + + + +

+
+
+

+ + transition-timing-function: ease-out; +

+
+

The transition starts quickly, and decelerates gradually until the end.

- transition-timing-function: step-start; -

-
-

The transition jumps instantly to the final state.

+
+
+ + +
+
+
+

+ + transition-timing-function: ease-in-out; +

+
+

Like ease, but more pronounced.

+

The transition starts quickly, and decelerates gradually until the end.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + transition-timing-function: linear; +

+
+

The transition has a *constant speed.

- transition-timing-function: step-end; -

-
-

The transition stays at the initial state until the end, when it instantly jumps to the final state.

+
+
+ + +
+
+
+

+ + transition-timing-function: step-start; +

+
+

The transition jumps instantly to the final state.

- - -
-
-
-

+ +

+ + +
+
+
+

+ + transition-timing-function: step-end; +

+
+

The transition stays at the initial state until the end, when it instantly jumps to the final state.

- transition-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

+
+
+ + +
+
+
+

+ + transition-timing-function: steps(4, end); +

+
+

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

+ +
+
-
+ + + + @@ -13385,120 +18309,194 @@

#transition

-

Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

-

Only transition-duration is required.

+

Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

+

Only transition-duration is required.

- - - - - - -
-
-

- - - transition: 1s; -

-
-
  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function defaults to ease
  • transition-delay defaults to 0s
-
-
- - - -
-
-
-

- - - transition: 1s linear; -

-
-
  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s
-
-
- - - -
-
-
-

- + + + + +

+
+

+ + transition: 1s; +

+
+
    +
  • transition-duration is set to 1s +
    • +
  • transition-property defaults to all +
    • +
  • transition-timing-function defaults to ease +
    • +
  • transition-delay defaults to 0s +
    • +
+
+
- transition: background 1s linear; -

-
-
  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s
+
+ + + +
+
+
+

+ + transition: 1s linear; +

+
+
    +
  • transition-duration is set to 1s +
    • +
  • transition-property defaults to all +
    • +
  • transition-timing-function is set to linear +
    • +
  • transition-delay defaults to 0s +
    • +
+
+
-
-
-
-

- + + + +

+
+
+

+ + transition: background 1s linear; +

+
+
    +
  • transition-duration is set to 1s +
    • +
  • transition-property is set to background +
    • +
  • transition-timing-function is set to linear +
    • +
  • transition-delay defaults to 0s +
    • +
+
+
- transition: background 1s linear 500ms; -

-
-
  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay is set to 500ms
+ + +
+
+
+

+ + transition: background 1s linear 500ms; +

+
+
    +
  • transition-duration is set to 1s +
    • +
  • transition-property is set to background +
    • +
  • transition-timing-function is set to linear +
    • +
  • transition-delay is set to 500ms +
    • +
+
+
-
-
-
-

- - - transition: background 4s, transform 1s; -

-
-

You can combine multiple properties with their own transition duration.

+
+ + +
+
+
+

+ + transition: background 4s, transform 1s; +

+
+

You can combine multiple properties with their own transition duration.

-
-
+ + -
+ + + + @@ -13519,144 +18517,162 @@

- - - - - -
-
-

- default - - - white-space: normal; -

-
-

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

+ + +
+
+

+ default + + white-space: normal; +

+
+

Sequences of spaces are combined into one. +
Line breaks are ignored. +
The text content is wrapped.

-
-
+
+
-
-
-
-

- - - white-space: nowrap; -

-
-

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

+
+ + +
+
+
+

+ + white-space: nowrap; +

+
+

Sequences of spaces are combined into one. +
Line breaks are ignored. +
The text content is not wrapped and remains on a single line.

-
-
+ + -
-
-
-

- - - white-space: pre; -

-
-

The white space is exactly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break only on new lines and <br>
    • -
+
+ + +
+
+
+

+ + white-space: pre; +

+
+

The white space is exactly preserved.

+
    +
  • Sequences of spaces are preserved
    • +
  • Lines break only on new lines and <br> +
    • +
-
-
+ + -
-
-
-

- - - white-space: pre-wrap; -

-
-

The white space is mostly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
+
+ + +
+
+
+

+ + white-space: pre-wrap; +

+
+

The white space is mostly preserved.

+
    +
  • Sequences of spaces are preserved
    • +
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • +
-
-
+ + -
-
-
-

- - - white-space: pre-line; -

-
-

Only new lines are preserved.

-
    -
  • Sequences of spaces are combined into one
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
+
+ + +
+
+
+

+ + white-space: pre-line; +

+
+

Only new lines are preserved.

+
    +
  • Sequences of spaces are combined into one
    • +
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • +
-
-
+ + -
+ + + + @@ -13677,74 +18693,82 @@

+
+
+

+ default + width: auto; +

+
+

The element will automatically adjust its width to allow its content to be displayed correctly.

+
+
+ + +
+
+
+

+ + width: 240px; +

+
+

You can use numeric values like pixels, (r)em, percentages...

-
-
-

- default - - - width: auto; -

-
-

The element will automatically adjust its width to allow its content to be displayed correctly.

- -
-
- - - -
-
-
-

- - - width: 240px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

- -
-
- - - -
-
-
-

- +

+
- width: 50%; -

-
-

If you use percentages, the value is relative to the container's width.

+ + +
+
+
+

+ + width: 50%; +

+
+

If you use percentages, the value is relative to the container's width.

-
-
+ + - - -
+ + + @@ -13765,95 +18789,107 @@

+
+
+

+ default + will-change: auto; +

+
+

Doesn't tell the browser to optimize any property.

+
+
+ + +
+
+
+

+ + will-change: scroll-position; +

+
+

Tells the browser to optimize for the element's scroll position, as it might change in the future.

-
-
-

- default - - - will-change: auto; -

-
-

Doesn't tell the browser to optimize any property.

- -
-
- - - -
-
-
-

- - - will-change: scroll-position; -

-
-

Tells the browser to optimize for the element's scroll position, as it might change in the future.

- -
-
- - - -
-
-
-

- - - will-change: contents; -

-
-

Tells the browser to optimize for the element's contents, as it might change in the future.

- -
-
+
+
- - -
-
-
-

+

+ +
+
+
+

+ + will-change: contents; +

+
+

Tells the browser to optimize for the element's contents, as it might change in the future.

+
+
- will-change: box-shadow; -

-
-

You can specify any other CSS property. For example, this tells the browser to optimize for the element's box-shadow, as it might change in the future.

+ + +
+
+
+

+ + will-change: box-shadow; +

+
+

You can specify any other CSS property. For example, this tells the browser to optimize for the element's box-shadow, as it might change in the future.

-
-
+ + - - -
+ + + @@ -13874,54 +18910,64 @@

- - + +
+
+

+ default + word-break: normal; +

+
+

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

-
-
-

- default - - - word-break: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

- -
-
- - - -
-
-
-

- +

+
- word-break: break-all; -

-
-

Words with no space will break as soon as they reach the end of a line.

+ + +
+
+
+

+ + word-break: break-all; +

+
+

Words with no space will break as soon as they reach the end of a line.

-
-
+ + - - -
+ + + @@ -13942,74 +18988,82 @@

+
+
+

+ default + word-spacing: normal; +

+
+

The spacing between the characters is normal.

+
+
+ + +
+
+
+

+ + word-spacing: 5px; +

+
+

You can use pixel values.

-
-
-

- default - - - word-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - - word-spacing: 5px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- +

+
- word-spacing: 2em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

+ + +
+
+
+

+ + word-spacing: 2em; +

+
+

You can use em values: this allows the spacing to remain relative to the font-size.

-
-
+ + - - -
+ + + @@ -14030,79 +19084,137 @@

- - - - - - -
-
-

- default + + + + +

+
+

+ default + + z-index: auto; +

+
+

The order is defined by the order in the HTML code:

+
    +
  • first in the code = behind
    • +
  • last in the code = in front
    • +
+
+
- z-index: auto; -

-
-

The order is defined by the order in the HTML code:

-
    -
  • first in the code = behind
    • -
  • last in the code = in front
    • -
- -
-
- -
-
-
-

- + + +

+
+
+

- z-index: 1; -

-
-

The z-index value is relative to the other ones. The target element is move in front of its siblings.

+ z-index: 1; +

+
+

The z-index value is relative to the other ones. The target element is move in front of its siblings.

-
-
+ + -
-
-
-

- - - z-index: -1; -

-
-

You can use negative values. The target element is move in behind its siblings.

+
+ + +
+
+
+

+ + z-index: -1; +

+
+

You can use negative values. The target element is move in behind its siblings.

-
-
+ + -
+ + + + - From 4f0b5a0273921c429fce97577e9865c0da08b387 Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 18:31:50 +0000 Subject: [PATCH 2/8] Move properties data out of html --- _data/properties.yml | 5391 +++++++++ _includes/lists/main-list.html | 19247 +------------------------------ 2 files changed, 5429 insertions(+), 19209 deletions(-) create mode 100644 _data/properties.yml diff --git a/_data/properties.yml b/_data/properties.yml new file mode 100644 index 00000000..f2728e39 --- /dev/null +++ b/_data/properties.yml @@ -0,0 +1,5391 @@ +--- +- title: align-content + is_shorthand: false + description: "

Defines how each line is aligned within a flexbox container. It + only applies if flex-wrap: wrap is present, and if there are multiple + lines of flexbox items.

" + styles: + - ".align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height: + 300px;padding: 0; }" + - '.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content + .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left: + 0;position: absolute;right: 0;top: 0; }.align-content .box.is-red:before { content: + "First line"; }.align-content .box.is-green { top: 150px; }.align-content .box.is-green:before + { content: "Second line"; }' + - "#align-content-stretch{ align-content:stretch;}" + - "#align-content-flex-start{ align-content:flex-start;}" + - "#align-content-flex-start .box.is-red { height: 100px; }#align-content-flex-start + .box.is-green { height: 50px;top: 100px; }" + - "#align-content-flex-end{ align-content:flex-end;}" + - "#align-content-flex-end .box.is-red { height: 100px;top: 150px; }#align-content-flex-end + .box.is-green { height: 50px;top: 250px; }" + - "#align-content-center{ align-content:center;}" + - "#align-content-center .box.is-red { height: 100px;top: 75px; }#align-content-center + .box.is-green { height: 50px;top: 175px; }" + - "#align-content-space-between{ align-content:space-between;}" + - "#align-content-space-between .box.is-red { height: 100px;top: 0; }#align-content-space-between + .box.is-green { height: 50px;top: 250px; }" + - "#align-content-space-around{ align-content:space-around;}" + - "#align-content-space-around .box.is-red { height: 100px;top: 38px; }#align-content-space-around + .box.is-green { height: 50px;top: 213px; }" + actions: [] + examples: + - is_default: true + title: 'align-content: stretch;' + description: "

Each line will stretch to fill the remaining space.

+

In this case, the container is 300px high. All boxes are 50px + high, apart from the second one who is 100px high.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-content: flex-start;' + description: "

Each line will only fill the space it needs. They will + all move towards the start of the flexbox container's cross + axis.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-content: flex-end;' + description: "

Each line will only fill the space it needs. They will + all move towards the end of the flexbox container's cross axis.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-content: center;' + description: "

Each line will only fill the space it needs. They will + all move towards the center of the flexbox container's cross + axis.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-content: space-between;' + description: "

Each line will only fill the space it needs. The remaining + space will appear between the lines.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-content: space-around;' + description: "

Each line will only fill the space it needs. The remaining + space will be distributed equally around the lines: before + the first line, between the two, and after the last one.

" + output:

1

2

3

4

5

+- title: align-items + is_shorthand: false + description: "

Defines how flexbox items are aligned according to the cross + axis, within a line of a flexbox container.

" + styles: + - ".align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: + center;padding: 0; }" + - ".align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items + .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height: + 75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }" + - "#align-items-flex-start{ align-items:flex-start;}" + - "#align-items-flex-start .line { top: 0; }" + - "#align-items-flex-end{ align-items:flex-end;}" + - "#align-items-flex-end .line { bottom: 0; }" + - "#align-items-center{ align-items:center;}" + - "#align-items-center .line { top: 50%; }" + - "#align-items-baseline{ align-items:baseline;}" + - "#align-items-baseline .line { top: 55px; }" + - "#align-items-stretch{ align-items:stretch;}" + - "#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2) + { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch + .line { display: none; }" + actions: [] + examples: + - is_default: false + title: 'align-items: flex-start;' + description: "

The flexbox items are aligned at the start of + the cross axis.

By default, the cross axis is vertical. + This means the flexbox items will be aligned vertically at the top.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-items: flex-end;' + description: "

The flexbox items are aligned at the end of + the cross axis.

By default, the cross axis is vertical. + This means the flexbox items will be aligned vertically at the _bottom.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-items: center;' + description: "

The flexbox items are aligned at the center + of the cross axis.

By default, the cross axis is vertical. + This means the flexbox items will be centered vertically.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-items: baseline;' + description: "

The flexbox items are aligned at the baseline + of the cross axis.

By default, the cross axis is vertical. + This means the flexbox items will align themselves in order to have the baseline + of their text align along a horizontal line.

" + output:

1

2

3

4

5

+ - is_default: false + title: 'align-items: stretch;' + description: "

The flexbox items will stretch across the whole cross + axis.

By default, the cross axis is vertical. This means the + flexbox items will fill up the whole vertical space.

" + output:

1

2

3

4

5

+- title: align-self + is_shorthand: false + description: "

Works like align-items, but applies only to a single + flexbox item, instead of all of them.

" + styles: + - ".align-self { align-items: center;background: hsl(0, 0%, 95%);display: flex;height: + 200px;justify-content: center;padding: 0; }" + - '.align-self .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-self + .square:nth-child(2) { background: #05ffb0;color: #310736; }.align-self .square:nth-child(4) + { height: 75px; }.align-self .line { left: 2px;position: absolute;right: 2px; + }.align-self .line.is-default { top: 50%; }.align-self .line.is-default:before + { content: "Items"; }.align-self .line.is-red:before { content: "Self"; }' + - "#align-self-flex-start{ align-self:flex-start;}" + - "#align-self-flex-start .target { align-self: flex-start; }" + - "#align-self-flex-end{ align-self:flex-end;}" + - "#align-self-flex-end .line.is-red { bottom: 0; }#align-self-flex-end .target + { align-self: flex-end; }" + - "#align-self-center{ align-self:center;}" + - "#align-self-center{ align-items: flex-start; }" + - "#align-self-center .line.is-default { top: 0; }#align-self-center .line.is-red + { top: 50%; }#align-self-center .target { align-self: center; }" + - "#align-self-baseline{ align-self:baseline;}" + - "#align-self-baseline .line.is-default { top: 50%; }#align-self-baseline .line.is-red + { top: 30px; }#align-self-baseline .target { align-self: baseline; }" + - "#align-self-stretch{ align-self:stretch;}" + - "#align-self-stretch .line.is-default { top: 50%; }#align-self-stretch .line.is-red + { display: none; }#align-self-stretch .target { align-self: stretch;height: auto; + }" + actions: [] + examples: + - is_default: false + title: 'align-self: flex-start;' + description: "

If the container has align-items: center and the + target has align-items: flex-start, only the target + will be at the start of the cross axis.

By default, this means it will + be aligned vertically at the top.

" + output:

1

Target

3

4

5

+ - is_default: false + title: 'align-self: flex-end;' + description: "

If the container has align-items: center and the + target has align-items: flex-end, only the target + will be at the end of the cross axis.

By default, this means it will + be aligned vertically at the bottom.

" + output:

1

Target

3

4

5

+ - is_default: false + title: 'align-self: center;' + description: "

If the container has align-items: flex-start and + the target has align-items: center, only the target + will be at the center of the cross axis.

By default, this means it will + be vertically centered.

" + output:

1

Target

3

4

5

+ - is_default: false + title: 'align-self: baseline;' + description: "

If the container has align-items: center and the + target has align-items: baseline, only the target + will be at the baseline of the cross axis.

By default, this means it + will be aligned along the basline of the text.

" + output:

1

Target

3

4

5

+ - is_default: false + title: 'align-self: stretch;' + description: "

If the container has align-items: center and the + target has align-items: stretch, only the target + will stretch along the whole cross axis.

" + output:

1

Target

3

4

5

+- title: animation-delay + is_shorthand: false + description: "

Defines how long the animation has to wait before starting. + The animation will only be delayed on its first iteration.

" + styles: + - ".animation-delay { animation-duration: 5s;animation-iteration-count: infinite; + }" + - ".animation-delay.is-animated { animation-name: fadeAndMove; }" + - "#animation-delay-0s{ animation-delay:0s;}" + - "#animation-delay-12s{ animation-delay:1.2s;}" + - "#animation-delay-2400ms{ animation-delay:2400ms;}" + - "#animation-delay--500ms{ animation-delay:-500ms;}" + actions: + - + examples: + - is_default: true + title: 'animation-delay: 0s;' + description: "

The animation will wait zero seconds, and thus + start right away.

" + output:
Hello
World
+ - is_default: false + title: 'animation-delay: 1.2s;' + description: "

You can use decimal values in seconds + with the keyword s.

" + output:
Hello
World
+ - is_default: false + title: 'animation-delay: 2400ms;' + description: "

You can use milliseconds instead of seconds, + with the keyword ms.

" + output:
Hello
World
+ - is_default: false + title: 'animation-delay: -500ms;' + description: "

You can use negative values: the animation will + start as if it had already been playing for 500ms.

" + output:
Hello
World
+- title: animation-direction + is_shorthand: false + description: "

Defines in which direction the animation is played.

" + styles: + - ".animation-direction { animation-duration: 2s;animation-iteration-count: infinite; + }" + - ".animation-direction.is-animated { animation-name: fadeAndMove; }" + - "#animation-direction-normal{ animation-direction:normal;}" + - "#animation-direction-reverse{ animation-direction:reverse;}" + - "#animation-direction-alternate{ animation-direction:alternate;}" + - "#animation-direction-alternate-reverse{ animation-direction:alternate-reverse;}" + actions: + - + examples: + - is_default: true + title: 'animation-direction: normal;' + description: "

The animation is played forwards. When it reaches + the end, it starts over at the first keyframe.

" + output:
Hello
World
+ - is_default: false + title: 'animation-direction: reverse;' + description: "

The animation is played backwards: begins at + the last keyframe, finishes at the first keyframe.

" + output:
Hello
World
+ - is_default: false + title: 'animation-direction: alternate;' + description: "

The animation is played forwards first, then + backwards:

  • starts at the first keyframe
  • stops + at the last keyframe
  • starts again, but at the last keyframe
  • stops + at the first keyframe
" + output:
Hello
World
+ - is_default: false + title: 'animation-direction: alternate-reverse;' + description: "

The animation is played backwards first, then + forwards:

  • starts at the last keyframe
  • stops + at the first keyframe
  • starts again, but at the first keyframe
  • stops + at the last keyframe
" + output:
Hello
World
+- title: animation-duration + is_shorthand: false + description: "

Defines how long the animation lasts.

" + styles: + - ".animation-duration { animation-iteration-count: infinite; }" + - ".animation-duration.is-animated { animation-name: fadeAndMove; }" + - "#animation-duration-0s{ animation-duration:0s;}" + - "#animation-duration-12s{ animation-duration:1.2s;}" + - "#animation-duration-2400ms{ animation-duration:2400ms;}" + actions: + - + examples: + - is_default: true + title: 'animation-duration: 0s;' + description: "

The default value is zero seconds: the animation + will simply not play.

" + output:
Hello
World
+ - is_default: false + title: 'animation-duration: 1.2s;' + description: "

You can use decimal values in seconds + with the keyword s.

" + output:
Hello
World
+ - is_default: false + title: 'animation-duration: 2400ms;' + description: "

You can use milliseconds instead of seconds, + with the keyword ms.

" + output:
Hello
World
+- title: animation-fill-mode + is_shorthand: false + description: "

Defines what happens before an animation starts + and after it ends. The fill mode allows to tell the browser if + the animation’s styles should also be applied outside of the animation.

" + styles: + - ".animation-fill-mode { animation-delay: 1s;animation-duration: 2s;animation-iteration-count: + 1;animation-name: kf-animation-fill-mode;animation-play-state: paused; }" + - ".animation-fill-mode.is-animated { animation-play-state: running; }" + - "#animation-fill-mode-none{ animation-fill-mode:none;}" + - "#animation-fill-mode-forwards{ animation-fill-mode:forwards;}" + - "#animation-fill-mode-backwards{ animation-fill-mode:backwards;}" + - "#animation-fill-mode-both{ animation-fill-mode:both;}" + actions: + - + examples: + - is_default: true + title: 'animation-fill-mode: none;' + description: "

The animation styles do not affect the default + style: the element is set to its default state before the animation starts, + and returns to that default state after the animation ends.

" + output:
Hello
World
+ - is_default: false + title: 'animation-fill-mode: forwards;' + description: "

The last styles applied at the end of the animation are retained + afterwards.

" + output:
Hello
World
+ - is_default: false + title: 'animation-fill-mode: backwards;' + description: "

The animation's styles will already be applied before + the animation actually starts.

" + output:
Hello
World
+ - is_default: false + title: 'animation-fill-mode: both;' + description: "

The styles are applied before and after the + animation plays.

" + output:
Hello
World
+- title: animation-iteration-count + is_shorthand: false + description: "

Defines how many times the animation is played.

" + styles: + - ".animation-iteration-count { animation-duration: 2s; }" + - ".animation-iteration-count.is-animated { animation-name: fadeAndMove; }" + - "#animation-iteration-count-1{ animation-iteration-count:1;}" + - "#animation-iteration-count-2{ animation-iteration-count:2;}" + - "#animation-iteration-count-infinite{ animation-iteration-count:infinite;}" + actions: + - + examples: + - is_default: true + title: 'animation-iteration-count: 1;' + description: "

The animation will only play once.

" + output:
Hello
World
+ - is_default: false + title: 'animation-iteration-count: 2;' + description: "

You can use integer values to define a specific + amount of times the animation will play.

" + output:
Hello
World
+ - is_default: false + title: 'animation-iteration-count: infinite;' + description: "

By using the keyword infinite, the animation will + play indefinitely.

" + output:
Hello
World
+- title: animation-name + is_shorthand: false + description: "

Defines which animation keyframes to use.

" + styles: + - ".animation-name { animation-iteration-count: infinite; }" + - ".animation-name.is-animated { animation-duration: 2s; }" + - "#animation-name-none{ animation-name:none;}" + - "#animation-name-fadein{ animation-name:fadeIn;}" + - "#animation-name-moveright{ animation-name:moveRight;}" + actions: + - + examples: + - is_default: true + title: 'animation-name: none;' + description: "

If no animation name is specified, no animation is played.

" + output:
Hello
World
+ - is_default: false + title: 'animation-name: fadeIn;' + description: "

If a name is specified, the keyframes matching + that name will be used.

For example, the fadeIn animation + looks like this:

@keyframes fadeIn { from { opacity: 0; } to
+      { opacity: 1; } }

" + output:
Hello
World
+ - is_default: false + title: 'animation-name: moveRight;' + description: "

Another example: the moveRight animation:

@keyframes
+      moveRight { from { transform: translateX(0); } to { transform: translateX(100px);
+      } }

" + output:
Hello
World
+- title: animation-play-state + is_shorthand: false + description: "

Defines if an animation is playing or not.

" + styles: + - ".animation-play-state { animation-duration: 2s;animation-iteration-count: infinite; + }" + - ".animation-play-state.is-animated { animation-name: fadeAndMove; }" + - "#animation-play-state-running{ animation-play-state:running;}" + - "#animation-play-state-paused{ animation-play-state:paused;}" + actions: + - + examples: + - is_default: true + title: 'animation-play-state: running;' + description: "

If the animation-duration and animation-name + are defined, the animation will start playing automatically.

" + output:
Hello
World
+ - is_default: false + title: 'animation-play-state: paused;' + description: '

The animation is set paused at the first keyframe.

+

This is different than having either no animation-duration or + animation-name at all. If the animation is paused, the style applied + is that of the first keyframe, and not the default + style.

In this example, the square is visible by default, but the on + the first keyframe of fadeAndMove, the opacity is + set to 0. When paused, the animation will be "stuck" on this first + keyframe, and will thus be invisible.

@keyframes fadeAndMove
+      { from { opacity: 0; transform: translateX(0); } to { opacity: 0; transform:
+      translateX(100px); } }

' + output:
Hello
World
+- title: animation-timing-function + is_shorthand: false + description: "

Defines how the values between the start and the end + of the animation are calculated.

" + styles: + - ".animation-timing-function { animation-duration: 3s;animation-fill-mode: forwards; + }" + - ".animation-timing-function.is-animated { animation-name: moveRight; }" + - "#animation-timing-function-ease{ animation-timing-function:ease;}" + - "#animation-timing-function-ease-in{ animation-timing-function:ease-in;}" + - "#animation-timing-function-ease-out{ animation-timing-function:ease-out;}" + - "#animation-timing-function-ease-in-out{ animation-timing-function:ease-in-out;}" + - "#animation-timing-function-linear{ animation-timing-function:linear;}" + - "#animation-timing-function-step-start{ animation-timing-function:step-start;}" + - "#animation-timing-function-step-end{ animation-timing-function:step-end;}" + - "#animation-timing-function-steps4-end{ animation-timing-function:steps(4, end);}" + actions: + - + examples: + - is_default: true + title: 'animation-timing-function: ease;' + description: "

The animation starts slowly, accelerates in the middle, and slows + down at the end.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: ease-in;' + description: "

The animation starts slowly, and accelerates gradually until + the end.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: ease-out;' + description: "

The animation starts quickly, and decelerates gradually until + the end.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: ease-in-out;' + description: "

Like ease, but more pronounced.

The animation + starts quickly, and decelerates gradually until the end.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: linear;' + description: "

The animation has a *constant speed.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: step-start;' + description: "

The animation jumps instantly to the final state.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: step-end;' + description: "

The animation stays at the initial state until + the end, when it instantly jumps to the final state.

" + output:
Hello
World
+ - is_default: false + title: 'animation-timing-function: steps(4, end);' + description: "

By using steps() with an integer, + you can define a specific number of steps before reaching the end. + The state of the element will not vary gradually, but rather jump + from state to state in separate instants.

" + output:
Hello
World
+- title: animation + is_shorthand: true + description:

Shorthand property for animation-name animation-duration + animation-timing-function + animation-delay animation-iteration-count + animation-direction animation-fill-mode and animation-play-state.

+

Only animation-duration and animation-name are required.

+ styles: [] + actions: [] + examples: [] +- title: background-attachment + is_shorthand: false + description: "

Defines how the background image will behave when scrolling + the page.

" + styles: + - ".background-attachment { background-image: url(/images/landscape.jpg);background-position: + center center;background-size: cover;height: 200px; }" + - ".background-attachment p { background: white;padding: 0.8em 1em; }" + - "#background-attachment-scroll{ background-attachment:scroll;}" + - "#background-attachment-fixed{ background-attachment:fixed;}" + actions: [] + examples: + - is_default: true + title: 'background-attachment: scroll;' + description: "

The background image will scroll with the page. It will also + position and resize itself according to the element it's applied to.

" + output:

Hello + world

+ - is_default: false + title: 'background-attachment: fixed;' + description: "

The background image will not scroll with the page, + and remain positioned according to the viewport. It will also position and resize + itself according to the viewport. As a result, the background image will probably + only be partially visible.

" + output:

Hello + world

+- title: background-clip + is_shorthand: false + description: "

Defines how far the background should extend within + the element.

" + styles: + - ".background-clip { background: #05ffb0;border: 4px dashed;padding: 2em; }" + - "#background-clip-border-box{ background-clip:border-box;}" + - "#background-clip-padding-box{ background-clip:padding-box;}" + - "#background-clip-content-box{ background-clip:content-box;}" + actions: [] + examples: + - is_default: true + title: 'background-clip: border-box;' + description: "

The background extends completely throughout the element, even + under the border.

" + output:
Hello + world
+ - is_default: false + title: 'background-clip: padding-box;' + description: "

The background only extends to the edge of the border: + it includes the padding but not the border.

" + output:
Hello + world
+ - is_default: false + title: 'background-clip: content-box;' + description: "

The background only extends to the edge of the content: + it doesn't include the padding, nor the border.

" + output:
Hello + world
+- title: background-color + is_shorthand: false + description: "

Defines the color of the element's background.

" + styles: + - "#background-color-transparent{ background-color:transparent;}" + - "#background-color-red{ background-color:red;}" + - "#background-color-05ffb0{ background-color:#05ffb0;}" + - "#background-color-rgb50-115-220{ background-color:rgb(50, 115, 220);}" + - "#background-color-rgba50-115-220-03{ background-color:rgba(50, 115, 220, 0.3);}" + - "#background-color-hsl14-100-53{ background-color:hsl(14, 100%, 53%);}" + - "#background-color-hsla14-100-53-06{ background-color:hsla(14, 100%, 53%, 0.6);}" + actions: [] + examples: + - is_default: true + title: 'background-color: transparent;' + description: "

By default, the background color is transparent, + basically meaning that there is no background color.

" + output:
Hello + World
+ - is_default: false + title: 'background-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + World
+ - is_default: false + title: 'background-color: #05ffb0;' + description: "

You can use hexadecimal color codes.

" + output:
Hello + World
+ - is_default: false + title: 'background-color: rgb(50, 115, 220);' + description: "

You can use rgb() color codes:

  • the + first value is for red
  • the second value is for green
  • the + third value is for blue

Each of them can have a value + between 0 and 255.

" + output:
Hello + World
+ - is_default: false + title: 'background-color: rgba(50, 115, 220, 0.3);' + description: "

You can use rgba() color codes:

  • the + first 3 values are for rgb
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + World
+ - is_default: false + title: 'background-color: hsl(14, 100%, 53%);' + description: "

You can use hsl() color codes:

  • the + first value is for hue and can go from 0 to 359
  • the + second value is for saturation and go from 0% + to 100%
  • the third value is for luminosity + and go from 0% to 100%
" + output:
Hello + World
+ - is_default: false + title: 'background-color: hsla(14, 100%, 53%, 0.6);' + description: "

You can use hsl()a color codes:

  • the + first 3 values are for hsl
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + World
+- title: background-image + is_shorthand: false + description: "

Defines an image as the background of the element.

" + styles: + - ".background-image { background-repeat: no-repeat;height: 200px; }" + - "#background-image-none{ background-image:none;}" + - "#background-image-urlimagesjtpng{ background-image:url(/images/jt.png);}" + - "#background-image-urlimagesjtpng{ background-size: 64px 64px; }" + - "#background-image-linear-gradientred-blue{ background-image:linear-gradient(red, + blue);}" + - "#background-image-linear-gradient45deg-red-blue{ background-image:linear-gradient(45deg, + red, blue);}" + - "#background-image-radial-gradientgreen-purple{ background-image:radial-gradient(green, + purple);}" + - "#background-image-radial-gradientcircle-green-purple{ background-image:radial-gradient(circle, + green, purple);}" + - "#background-image-radial-gradientcircle-green-0-purple-20-orange-100{ background-image:radial-gradient(circle, + green 0%, purple 20%, orange 100%);}" + - "#background-image-radial-gradientcircle-closest-side-green-0-purple-20-orange-100{ + background-image:radial-gradient(circle closest-side, green 0%, purple 20%, orange + 100%);}" + - "#background-image-radial-gradientcircle-closest-side-at-45px-45px-green-0-purple-20-orange-100{ + background-image:radial-gradient(circle closest-side at 45px 45px, green 0%, purple + 20%, orange 100%);}" + actions: [] + examples: + - is_default: true + title: 'background-image: none;' + description: "

Removes any background image.

" + output:
Hello + world
+ - is_default: false + title: 'background-image: url(/images/jt.png);' + description: "

Uses the image defined in the url path. This + path can either be relative (to the css file) or absolute + (like http://cssreference.io/images/jt.png).

" + output:
Hello + world
+ - is_default: false + title: 'background-image: linear-gradient(red, blue);' + description: "

You can define a linear gradient as the background + image.

You need to define at least two colors. The first + one will start at the top, the second one at the bottom.

The default + angle is to bottom (or 180deg), which means the gradient + is vertical, starting at the top, ending at the bottom of the + element.

" + output:
Hello + world
+ - is_default: false + title: 'background-image: linear-gradient(45deg, red, blue);' + description: "

You can specify an angle, either in degrees, + or with keywords.

When using degress, you specify the direction + of the gradient, or when it ends. So 0deg means the the top + of the element, like 12:00 on a clock.

In this example, 45deg + means 2:30, or the top right corner.

" + output:
Hello + world
+ - is_default: false + title: 'background-image: radial-gradient(green, purple);' + description: "

You can define a radial gradient as the background + image.

You need to define at least two colors. The first + one will be at the center, the second one at the edges.

" + output:
Hello + world
+ - is_default: false + title: 'background-image: radial-gradient(circle, green, purple);' + description: "

You can specify the shape of the radial gradient: + circle or ellipse (default).

" + output:
Hello + world
+ - is_default: false + title: 'background-image: radial-gradient(circle, green 0%, purple 20%, orange + 100%);' + description: "

You can specify color stops using percentage + values.

" + output:
Hello + world
+ - is_default: false + title: 'background-image: radial-gradient(circle closest-side, green 0%, purple + 20%, orange 100%);' + description: "

You can specify where the gradient should end:

+
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
" + output:
Hello + world
+ - is_default: false + title: 'background-image: radial-gradient(circle closest-side at 45px 45px, green + 0%, purple 20%, orange 100%);' + description:

Like with the background-position, + you can specify the position of the gradient.

+ output:
Hello + world
+- title: background-origin + is_shorthand: false + description: "

Defines the origin of the background image.

" + styles: + - ".background-origin { background-image: url(/images/jt.png);background-repeat: + no-repeat;background-size: 64px 64px;border: 4px dashed;padding: 2em; }" + - ".background-origin p { background-color: rgba(5, 255, 176, 0.5);padding: 1em; + }" + - "#background-origin-padding-box{ background-origin:padding-box;}" + - "#background-origin-border-box{ background-origin:border-box;}" + - "#background-origin-content-box{ background-origin:content-box;}" + actions: [] + examples: + - is_default: true + title: 'background-origin: padding-box;' + description: "

The background image starts at the edge of the border: + within padding but not the border.

" + output:

Hello + world

+ - is_default: false + title: 'background-origin: border-box;' + description: "

The background image starts under the border.

" + output:

Hello + world

+ - is_default: false + title: 'background-origin: content-box;' + description: "

The background image only starts at the edge of the content: + it doesn't include the padding, nor the border.

" + output:

Hello + world

+- title: background-position + is_shorthand: false + description: "

Defines the position of the background image.

" + styles: + - ".background-position { background-image: url(/images/jt.png);background-repeat: + no-repeat;background-size: 64px 64px;height: 150px; }" + - "#background-position-0-0{ background-position:0% 0%;}" + - "#background-position-bottom-right{ background-position:bottom right;}" + - "#background-position-center-center{ background-position:center center;}" + actions: [] + examples: + - is_default: true + title: 'background-position: 0% 0%;' + description: "

The background image will be positioned at 0% + on the horizontal axis and 0% on the vertical axis, which means + the top left corner of the element.

" + output:
Hello + world
+ - is_default: false + title: 'background-position: bottom right;' + description: "

You can use a combination of position keywords: + center, top, bottom, left + and right.

" + output:
Hello + world
+ - is_default: false + title: 'background-position: center center;' + description: "

The background image will be positioned in the center of the + element.

" + output:
Hello + world
+- title: background-repeat + is_shorthand: false + description: "

Defines how the background image repeats itself across the element's + background, starting from the background position.

" + styles: + - ".background-repeat { background-image: url(/images/jt.png);background-size: 64px + 64px;height: 150px; }" + - "#background-repeat-repeat{ background-repeat:repeat;}" + - "#background-repeat-repeat-x{ background-repeat:repeat-x;}" + - "#background-repeat-repeat-y{ background-repeat:repeat-y;}" + - "#background-repeat-no-repeat{ background-repeat:no-repeat;}" + actions: [] + examples: + - is_default: true + title: 'background-repeat: repeat;' + description: "

The background image will repeat itself both horizontally + and vertically.

" + output:
Hello + world
+ - is_default: false + title: 'background-repeat: repeat-x;' + description: "

The background image will only repeat itself horizontally.

" + output:
Hello + world
+ - is_default: false + title: 'background-repeat: repeat-y;' + description: "

The background image will only repeat itself vertically.

" + output:
Hello + world
+ - is_default: false + title: 'background-repeat: no-repeat;' + description: "

The background image will only appear once.

" + output:
Hello + world
+- title: background-size + is_shorthand: false + description: "

Defines the size of the background image.

" + styles: + - ".background-size { background-image: url(/images/landscape.jpg);background-repeat: + no-repeat;height: 150px;padding: 0; }" + - "#background-size-auto-auto{ background-size:auto auto;}" + - "#background-size-120px-80px{ background-size:120px 80px;}" + - "#background-size-100-50{ background-size:100% 50%;}" + - "#background-size-contain{ background-size:contain;}" + - "#background-size-cover{ background-size:cover;}" + actions: [] + examples: + - is_default: true + title: 'background-size: auto auto;' + description: "

The background image will retain its original + size.

For example, this background image is 960px by 640px + large. Its aspect ratio is 3 by 2. It's bigger than its container + (which is 150px high) and will thus be clipped.

" + output:
Hello + world
+ - is_default: false + title: 'background-size: 120px 80px;' + description: "

You can specify a size in pixels:

  • the + first value is the horizontal size
  • the second is the + vertical size
" + output:
Hello + world
+ - is_default: false + title: 'background-size: 100% 50%;' + description: "

You can use percentage values as well. Beware + that this can alter the aspect ratio of the background image, + and lead to unexpected results.

" + output:
Hello + world
+ - is_default: false + title: 'background-size: contain;' + description: "

The keyword contain will resize the background image + to make sure it remains fully visible.

" + output:
Hello + world
+ - is_default: false + title: 'background-size: cover;' + description: "

The keyword cover will resize the background image + to make sure the element is fully covered.

" + output:
Hello + world
+- title: background + is_shorthand: true + description:

Shorthand property for background-image background-position + background-size background-repeat + background-origin background-clip + background-attachment and + background-color.

+ styles: [] + actions: [] + examples: [] +- title: border-bottom-color + is_shorthand: false + description:

Like border-color, + but for the bottom border only.

+ styles: + - ".border-bottom-color { border-bottom-style: solid;border-bottom-width: 4px; }" + - "#border-bottom-color-transparent{ border-bottom-color:transparent;}" + - "#border-bottom-color-red{ border-bottom-color:red;}" + - "#border-bottom-color-05ffb0{ border-bottom-color:#05ffb0;}" + actions: [] + examples: + - is_default: false + title: 'border-bottom-color: transparent;' + description: "

Applies a transparent color to the bottom border. + The bottom border will still take up the space defined by the border-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'border-bottom-color: #05ffb0;' + description: "

You can use hexadecimal color codes, rgb(), + rgba(), hsl(), hsla()...

" + output:
Hello + world
+- title: border-bottom-left-radius + is_shorthand: false + description: "

Defines the radius of the bottom left corner.

" + styles: + - ".border-bottom-left-radius { border-bottom-color: #05ffb0;border-left-color: + hsl(348, 100%, 61%);border-style: solid;border-width: 4px; }" + - "#border-bottom-left-radius-0{ border-bottom-left-radius:0;}" + - "#border-bottom-left-radius-20px{ border-bottom-left-radius:20px;}" + - "#border-bottom-left-radius-50{ border-bottom-left-radius:50%;}" + - "#border-bottom-left-radius-20px-50{ border-bottom-left-radius:20px 50%;}" + actions: [] + examples: + - is_default: true + title: 'border-bottom-left-radius: 0;' + description: "

Removes any border radius.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-left-radius: 20px;' + description: "

You can use pixel values.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-left-radius: 50%;' + description: "

You can use percentage values. In this example, + the radius starts halfway on the bottom border, and ends halfway on + the left border.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-left-radius: 20px 50%;' + description: "

If you set two values, the first one is for + the bottom border, the second one for the left border.

" + output:
Hello + world
+- title: border-bottom-right-radius + is_shorthand: false + description: "

Defines the radius of the bottom right corner.

" + styles: + - ".border-bottom-right-radius { border-bottom-color: #05ffb0;border-right-color: + hsl(348, 100%, 61%);border-style: solid;border-width: 4px; }" + - "#border-bottom-right-radius-0{ border-bottom-right-radius:0;}" + - "#border-bottom-right-radius-20px{ border-bottom-right-radius:20px;}" + - "#border-bottom-right-radius-50{ border-bottom-right-radius:50%;}" + - "#border-bottom-right-radius-20px-50{ border-bottom-right-radius:20px 50%;}" + actions: [] + examples: + - is_default: true + title: 'border-bottom-right-radius: 0;' + description: "

Removes any border radius.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-right-radius: 20px;' + description: "

You can use pixel values.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-right-radius: 50%;' + description: "

You can use percentage values. In this example, + the radius starts halfway on the bottom border, and ends halfway on + the right border.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-right-radius: 20px 50%;' + description: "

If you set two values, the first one is for + the bottom border, the second one for the right border.

" + output:
Hello + world
+- title: border-bottom-style + is_shorthand: false + description:

Like border-style, + but for the bottom border only.

+ styles: + - ".border-bottom-style { border-bottom-width: 4px; }" + - "#border-bottom-style-none{ border-bottom-style:none;}" + - "#border-bottom-style-dotted{ border-bottom-style:dotted;}" + - "#border-bottom-style-dashed{ border-bottom-style:dashed;}" + - "#border-bottom-style-solid{ border-bottom-style:solid;}" + - "#border-bottom-style-double{ border-bottom-style:double;}" + - "#border-bottom-style-groove{ border-bottom-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'border-bottom-style: none;' + description: "

Removes the bottom border.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-style: dotted;' + description: "

Turns the bottom border into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-style: dashed;' + description: "

Turns the bottom border into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-style: solid;' + description: "

Turns the bottom border into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-style: double;' + description: "

Splits the bottom border into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-style: groove;' + description: "

Sets an inset style to the bottom border.

" + output:
Hello + world
+- title: border-bottom-width + is_shorthand: false + description:

Like border-width, + but for the bottom border only.

+ styles: + - ".border-bottom-width { border-bottom-style: solid; }" + - "#border-bottom-width-0{ border-bottom-width:0;}" + - "#border-bottom-width-4px{ border-bottom-width:4px;}" + actions: [] + examples: + - is_default: true + title: 'border-bottom-width: 0;' + description: "

Removes the bottom border.

" + output:
Hello + world
+ - is_default: false + title: 'border-bottom-width: 4px;' + description: "

You can use pixel values.

" + output:
Hello + world
+- title: border-bottom + is_shorthand: true + description:

Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.

+ styles: + - "#border-bottom-4px-dotted-red{ border-bottom:4px dotted red;}" + - "#border-bottom-2px-solid{ border-bottom:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'border-bottom: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'border-bottom: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello + world
+- title: border-collapse + is_shorthand: false + description: "

Defines whether table borders should be separated + or collapsed.

" + styles: + - ".border-collapse table { width: 100%; }.border-collapse td { border-bottom: 4px + solid hsl(348, 100%, 61%);border-left: 4px solid #05ffb0;border-right: 4px solid + hsl(48, 100%, 67%);border-top: 4px solid hsl(217, 71%, 53%);padding: 0.4em 0.5em; + }" + - "#border-collapse-separate{ border-collapse:separate;}" + - "#border-collapse-separate table { border-collapse: separate; }" + - "#border-collapse-collapse{ border-collapse:collapse;}" + - "#border-collapse-collapse table { border-collapse: collapse; }" + actions: [] + examples: + - is_default: true + title: 'border-collapse: separate;' + description: "

Each table cell will display its own borders.

+

In this example, each cell has a border-width of 4px. + As a result, the border between two cells will be 8px.

" + output:
NameInstrument
John + LennonRhythm Guitar
Paul McCartneyBass
George + HarrisonLead Guitar
Ringo StarrDrums
+ - is_default: false + title: 'border-collapse: collapse;' + description: '

Adjacent table cells will merge their borders + together.

The cell that appears first in the code will "win": + its borders will mask those of the following cells.

' + output:
NameInstrument
John + LennonRhythm Guitar
Paul McCartneyBass
George + HarrisonLead Guitar
Ringo StarrDrums
+- title: border-color + is_shorthand: false + description: "

Defines the color of the element's borders.

" + styles: + - ".border-color { border-style: solid;border-width: 4px; }" + - "#border-color-transparent{ border-color:transparent;}" + - "#border-color-red{ border-color:red;}" + - "#border-color-05ffb0{ border-color:#05ffb0;}" + - "#border-color-rgb50-115-220{ border-color:rgb(50, 115, 220);}" + - "#border-color-rgba50-115-220-03{ border-color:rgba(50, 115, 220, 0.3);}" + - "#border-color-hsl14-100-53{ border-color:hsl(14, 100%, 53%);}" + - "#border-color-hsla14-100-53-06{ border-color:hsla(14, 100%, 53%, 0.6);}" + actions: [] + examples: + - is_default: true + title: 'border-color: transparent;' + description: "

Applies a transparent color to the borders. + The borders will still take up the space defined by the border-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'border-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'border-color: #05ffb0;' + description: "

You can use hexadecimal color codes.

" + output:
Hello + world
+ - is_default: false + title: 'border-color: rgb(50, 115, 220);' + description: "

You can use rgb() color codes:

  • the + first value is for red
  • the second value is for green
  • the + third value is for blue

Each of them can have a value + between 0 and 255.

" + output:
Hello + world
+ - is_default: false + title: 'border-color: rgba(50, 115, 220, 0.3);' + description: "

You can use rgba() color codes:

  • the + first 3 values are for rgb
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + world
+ - is_default: false + title: 'border-color: hsl(14, 100%, 53%);' + description: "

You can use hsl() color codes:

  • the + first value is for hue and can go from 0 to 359
  • the + second value is for saturation and go from 0% + to 100%
  • the third value is for luminosity + and go from 0% to 100%
" + output:
Hello + world
+ - is_default: false + title: 'border-color: hsla(14, 100%, 53%, 0.6);' + description: "

You can use hsl()a color codes:

  • the + first 3 values are for hsl
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + world
+- title: border-left-color + is_shorthand: false + description:

Like border-color, + but for the left border only.

+ styles: + - ".border-left-color { border-left-style: solid;border-left-width: 4px; }" + - "#border-left-color-transparent{ border-left-color:transparent;}" + - "#border-left-color-red{ border-left-color:red;}" + - "#border-left-color-05ffb0{ border-left-color:#05ffb0;}" + actions: [] + examples: + - is_default: false + title: 'border-left-color: transparent;' + description: "

Applies a transparent color to the left border. + The left border will still take up the space defined by the border-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'border-left-color: #05ffb0;' + description: "

You can use hexadecimal color codes, rgb(), + rgba(), hsl(), hsla()...

" + output:
Hello + world
+- title: border-left-style + is_shorthand: false + description:

Like border-style, + but for the left border only.

+ styles: + - ".border-left-style { border-left-width: 4px; }" + - "#border-left-style-none{ border-left-style:none;}" + - "#border-left-style-dotted{ border-left-style:dotted;}" + - "#border-left-style-dashed{ border-left-style:dashed;}" + - "#border-left-style-solid{ border-left-style:solid;}" + - "#border-left-style-double{ border-left-style:double;}" + - "#border-left-style-groove{ border-left-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'border-left-style: none;' + description: "

Removes the left border.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-style: dotted;' + description: "

Turns the left border into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-style: dashed;' + description: "

Turns the left border into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-style: solid;' + description: "

Turns the left border into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-style: double;' + description: "

Splits the left border into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-style: groove;' + description: "

Sets an inset style to the left border.

" + output:
Hello + world
+- title: border-left-width + is_shorthand: false + description:

Like border-width, + but for the left border only.

+ styles: + - ".border-left-width { border-left-style: solid; }" + - "#border-left-width-0{ border-left-width:0;}" + - "#border-left-width-4px{ border-left-width:4px;}" + actions: [] + examples: + - is_default: true + title: 'border-left-width: 0;' + description: "

Removes the left border.

" + output:
Hello + world
+ - is_default: false + title: 'border-left-width: 4px;' + description: "

You can use pixel values.

" + output:
Hello + world
+- title: border-left + is_shorthand: true + description:

Shorthand property for border-left-width border-left-style + and border-left-color.

+ styles: + - "#border-left-4px-dotted-red{ border-left:4px dotted red;}" + - "#border-left-2px-solid{ border-left:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'border-left: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'border-left: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello + world
+- title: border-radius + is_shorthand: false + description: "

Defines the radius of the element's corners.

" + styles: + - ".border-radius { border: 4px solid #05ffb0; }" + - "#border-radius-0{ border-radius:0;}" + - "#border-radius-20px{ border-radius:20px;}" + - "#border-radius-50{ border-radius:50%;}" + - "#border-radius-20px-50{ border-radius:20px 50%;}" + actions: [] + examples: + - is_default: true + title: 'border-radius: 0;' + description: "

Removes any border radius.

" + output:
Hello + world
+ - is_default: false + title: 'border-radius: 20px;' + description: "

You can use pixel values.

" + output:
Hello + world
+ - is_default: false + title: 'border-radius: 50%;' + description: "

You can use percentage values. In this example, + the radius starts halfway through each border.

" + output:
Hello + world
+ - is_default: false + title: 'border-radius: 20px 50%;' + description: "

If you set two values, the first one is for + the top and bottom borders, the second one for the left + and right borders.

" + output:
Hello + world
+- title: border-right-color + is_shorthand: false + description:

Like border-color, + but for the right border only.

+ styles: + - ".border-right-color { border-right-style: solid;border-right-width: 4px; }" + - "#border-right-color-transparent{ border-right-color:transparent;}" + - "#border-right-color-red{ border-right-color:red;}" + - "#border-right-color-05ffb0{ border-right-color:#05ffb0;}" + actions: [] + examples: + - is_default: false + title: 'border-right-color: transparent;' + description: "

Applies a transparent color to the right border. + The right border will still take up the space defined by the border-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'border-right-color: #05ffb0;' + description: "

You can use hexadecimal color codes, rgb(), + rgba(), hsl(), hsla()...

" + output:
Hello + world
+- title: border-right-style + is_shorthand: false + description:

Like border-style, + but for the right border only.

+ styles: + - ".border-right-style { border-right-width: 4px; }" + - "#border-right-style-none{ border-right-style:none;}" + - "#border-right-style-dotted{ border-right-style:dotted;}" + - "#border-right-style-dashed{ border-right-style:dashed;}" + - "#border-right-style-solid{ border-right-style:solid;}" + - "#border-right-style-double{ border-right-style:double;}" + - "#border-right-style-groove{ border-right-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'border-right-style: none;' + description: "

Removes the right border.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-style: dotted;' + description: "

Turns the right border into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-style: dashed;' + description: "

Turns the right border into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-style: solid;' + description: "

Turns the right border into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-style: double;' + description: "

Splits the right border into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-style: groove;' + description: "

Sets an inset style to the right border.

" + output:
Hello + world
+- title: border-right-width + is_shorthand: false + description:

Like border-width, + but for the right border only.

+ styles: + - ".border-right-width { border-right-style: solid; }" + - "#border-right-width-0{ border-right-width:0;}" + - "#border-right-width-4px{ border-right-width:4px;}" + actions: [] + examples: + - is_default: true + title: 'border-right-width: 0;' + description: "

Removes the right border.

" + output:
Hello + world
+ - is_default: false + title: 'border-right-width: 4px;' + description: "

You can use pixel values.

" + output:
Hello + world
+- title: border-right + is_shorthand: true + description:

Shorthand property for border-right-width border-right-style + and border-right-color.

+ styles: + - "#border-right-4px-dotted-red{ border-right:4px dotted red;}" + - "#border-right-2px-solid{ border-right:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'border-right: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'border-right: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello + world
+- title: border-style + is_shorthand: false + description: "

Defines the style of the element's borders.

" + styles: + - ".border-style { padding: 1em;border-width: 4px; }" + - "#border-style-none{ border-style:none;}" + - "#border-style-dotted{ border-style:dotted;}" + - "#border-style-dashed{ border-style:dashed;}" + - "#border-style-solid{ border-style:solid;}" + - "#border-style-double{ border-style:double;}" + - "#border-style-groove{ border-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'border-style: none;' + description: "

Removes the element's borders.

" + output:
Hello + world
+ - is_default: false + title: 'border-style: dotted;' + description: "

Turns the border into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'border-style: dashed;' + description: "

Turns the border into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'border-style: solid;' + description: "

Turns the border into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'border-style: double;' + description: "

Splits the border into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'border-style: groove;' + description: "

Sets an inset style to the borders.

" + output:
Hello + world
+- title: border-top-color + is_shorthand: false + description:

Like border-color, + but for the top border only.

+ styles: + - ".border-top-color { border-top-style: solid;border-top-width: 4px; }" + - "#border-top-color-transparent{ border-top-color:transparent;}" + - "#border-top-color-red{ border-top-color:red;}" + - "#border-top-color-05ffb0{ border-top-color:#05ffb0;}" + actions: [] + examples: + - is_default: false + title: 'border-top-color: transparent;' + description: "

Applies a transparent color to the top border. + The top border will still take up the space defined by the border-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'border-top-color: #05ffb0;' + description: "

You can use hexadecimal color codes, rgb(), + rgba(), hsl(), hsla()...

" + output:
Hello + world
+- title: border-top-left-radius + is_shorthand: false + description: "

Defines the radius of the top left corner.

" + styles: + - ".border-top-left-radius { border-top-color: #05ffb0;border-left-color: hsl(348, + 100%, 61%);border-style: solid;border-width: 4px; }" + - "#border-top-left-radius-0{ border-top-left-radius:0;}" + - "#border-top-left-radius-20px{ border-top-left-radius:20px;}" + - "#border-top-left-radius-50{ border-top-left-radius:50%;}" + - "#border-top-left-radius-20px-50{ border-top-left-radius:20px 50%;}" + actions: [] + examples: + - is_default: true + title: 'border-top-left-radius: 0;' + description: "

Removes any border radius.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-left-radius: 20px;' + description: "

You can use pixel values.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-left-radius: 50%;' + description: "

You can use percentage values. In this example, + the radius starts halfway on the top border, and ends halfway on the + left border.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-left-radius: 20px 50%;' + description: "

If you set two values, the first one is for + the top border, the second one for the left border.

" + output:
Hello + world
+- title: border-top-right-radius + is_shorthand: false + description: "

Defines the radius of the top right corner.

" + styles: + - ".border-top-right-radius { border-top-color: #05ffb0;border-right-color: hsl(348, + 100%, 61%);border-style: solid;border-width: 4px; }" + - "#border-top-right-radius-0{ border-top-right-radius:0;}" + - "#border-top-right-radius-20px{ border-top-right-radius:20px;}" + - "#border-top-right-radius-50{ border-top-right-radius:50%;}" + - "#border-top-right-radius-20px-50{ border-top-right-radius:20px 50%;}" + actions: [] + examples: + - is_default: true + title: 'border-top-right-radius: 0;' + description: "

Removes any border radius.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-right-radius: 20px;' + description: "

You can use pixel values.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-right-radius: 50%;' + description: "

You can use percentage values. In this example, + the radius starts halfway on the top border, and ends halfway on the + right border.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-right-radius: 20px 50%;' + description: "

If you set two values, the first one is for + the top border, the second one for the right border.

" + output:
Hello + world
+- title: border-top-style + is_shorthand: false + description:

Like border-style, + but for the top border only.

+ styles: + - ".border-top-style { border-top-width: 4px; }" + - "#border-top-style-none{ border-top-style:none;}" + - "#border-top-style-dotted{ border-top-style:dotted;}" + - "#border-top-style-dashed{ border-top-style:dashed;}" + - "#border-top-style-solid{ border-top-style:solid;}" + - "#border-top-style-double{ border-top-style:double;}" + - "#border-top-style-groove{ border-top-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'border-top-style: none;' + description: "

Removes the top border.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-style: dotted;' + description: "

Turns the top border into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-style: dashed;' + description: "

Turns the top border into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-style: solid;' + description: "

Turns the top border into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-style: double;' + description: "

Splits the top border into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-style: groove;' + description: "

Sets an inset style to the top border.

" + output:
Hello + world
+- title: border-top-width + is_shorthand: false + description:

Like border-width, + but for the top border only.

+ styles: + - ".border-top-width { border-top-style: solid; }" + - "#border-top-width-0{ border-top-width:0;}" + - "#border-top-width-4px{ border-top-width:4px;}" + actions: [] + examples: + - is_default: true + title: 'border-top-width: 0;' + description: "

Removes the top border.

" + output:
Hello + world
+ - is_default: false + title: 'border-top-width: 4px;' + description: "

You can use pixel values.

" + output:
Hello + world
+- title: border-top + is_shorthand: true + description:

Shorthand property for border-top-width border-top-style + and border-top-color.

+ styles: + - "#border-top-4px-dotted-red{ border-top:4px dotted red;}" + - "#border-top-2px-solid{ border-top:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'border-top: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'border-top: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello + world
+- title: border-width + is_shorthand: false + description: "

Defines the width of the element's borders.

" + styles: + - ".border-width { border-style: solid; }" + - "#border-width-1px{ border-width:1px;}" + - "#border-width-2px-0{ border-width:2px 0;}" + actions: [] + examples: + - is_default: false + title: 'border-width: 1px;' + description: "

Defines the width of all borders to 1px.

" + output:
Hello + world
+ - is_default: false + title: 'border-width: 2px 0;' + description: "

Defines the top and bottom borders to 2px, the left and right + to 0.

" + output:
Hello + world
+- title: border + is_shorthand: true + description:

Shorthand property for border-width border-style + and border-color.

+ styles: + - "#border-4px-dotted-red{ border:4px dotted red;}" + - "#border-2px-solid{ border:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'border: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'border: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello world
+- title: bottom + is_shorthand: false + description: "

Defines the position of the element according to its bottom + edge.

" + styles: + - ".bottom { background: #310736;height: 200px;position: relative; }" + - ".bottom p { color: #fff; }.bottom .natural { width: 200px; }.bottom .actual { + animation-direction: alternate;animation-duration: 2s;animation-iteration-count: + infinite;position: absolute;width: 200px; }" + - "#bottom-auto{ bottom:auto;}" + - "#bottom-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }" + - "#bottom-20px{ bottom:20px;}" + - "#bottom-20px .actual { animation-name: fadeIn;bottom: 20px;position: relative;transform: + translateY(-100%); }" + - "#bottom-0{ bottom:0;}" + - "#bottom-0 .actual { bottom: 0; }" + actions: [] + examples: + - is_default: true + title: 'bottom: auto;' + description: "

The element will remain in its natural position.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'bottom: 20px;' + description: "

If the element is in position relative, the + element will move upwards by the amount defined by the bottom + value.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'bottom: 0;' + description: "

If the element is in position absolute, the + element will position itself from the bottom of the first positioned + ancestor.

" + output:

Parent container

Natural position
Actual position
+- title: box-shadow + is_shorthand: false + description: "

Defines the shadow of the element.

" + styles: + - ".box-shadow { background: #05ffb0;margin: 1em; }" + - "#box-shadow-none{ box-shadow:none;}" + - "#box-shadow-2px-6px{ box-shadow:2px 6px;}" + - "#box-shadow-2px-6px-red{ box-shadow:2px 6px red;}" + - "#box-shadow-2px-4px-10px-red{ box-shadow:2px 4px 10px red;}" + - "#box-shadow-2px-4px-10px-4px-red{ box-shadow:2px 4px 10px 4px red;}" + actions: [] + examples: + - is_default: true + title: 'box-shadow: none;' + description: "

Removes any box-shadow that was applied to the element.

" + output:
Hello + world
+ - is_default: false + title: 'box-shadow: 2px 6px;' + description: "

You need at least two values:

  • the + first is the horizontal offset
  • the second is the vertical + offset

The shadow color will be inherited from the text color.

" + output:
Hello + world
+ - is_default: false + title: 'box-shadow: 2px 6px red;' + description:

You can define a color as the last value.

+

As with color, + you can use color names, hexadecimal, rgb, hsl...

+ output:
Hello + world
+ - is_default: false + title: 'box-shadow: 2px 4px 10px red;' + description: "

The optional third value defines the blur + of the shadow.

The color will be diffused across 10px in this example, + from opaque to transparent.

" + output:
Hello + world
+ - is_default: false + title: 'box-shadow: 2px 4px 10px 4px red;' + description: "

The optional fourth value defines the spread + of the shadow.

The spread defines how much the shadow should grow: + it enhances the shadow.

" + output:
Hello + world
+- title: box-sizing + is_shorthand: false + description: "

Defines how the width and height of the element are calculated: + whether they include the padding and borders or not.

" + styles: + - '.box-sizing .actual { border: 12px solid #310736;display: block;padding: 30px;position: + relative;width: 200px; }.box-sizing span { background: hsl(48, 100%, 67%);display: + block;padding: 5px 0; }.box-sizing .box { height: 23px;position: absolute;text-align: + left;width: 200px; }.box-sizing .box:before { content: "200px"; }' + - "#box-sizing-content-box{ box-sizing:content-box;}" + - "#box-sizing-content-box .actual { box-sizing: content-box; }#box-sizing-content-box + .box { left: 30px;top: 30px;width: 196px; }" + - "#box-sizing-border-box{ box-sizing:border-box;}" + - "#box-sizing-border-box .actual { box-sizing: border-box; }#box-sizing-border-box + .box { height: 27px;left: -12px;top: 30px; }" + actions: [] + examples: + - is_default: true + title: 'box-sizing: content-box;' + description: "

The width and height of the + element only apply to the content of the element.

For + example, this element has

  • border-width: 12px
  • padding: + 30px
  • width: 200px

The full width + is 24px + 60px + 200px = 284px.

The content has the + defined width. The box accomodates for those dimensions.

" + output:
Hello world
+ - is_default: false + title: 'box-sizing: border-box;' + description: "

The width and height of the + element apply to all parts of the element: the content, the + padding and the borders.

For example, + this element has

  • border-width: 12px
  • padding: + 30px
  • width: 200px

The full width + is 200px, no matter what.

The box has the defined width. + The content accomodates for those dimensions, and ends up being 200px - 30px + - 24px = 146px.

" + output:
Hello world
+- title: clear + is_shorthand: false + description: "

Moves the element after all the preceding floating elements.

" + styles: + - ".clear .block.is-alpha { float: left;text-align: center; }.clear .block.is-beta + { float: right;text-align: center; }" + - "#clear-none{ clear:none;}" + - "#clear-left{ clear:left;}" + - "#clear-left .block.is-yellow { clear: left; }" + - "#clear-right{ clear:right;}" + - "#clear-right .block.is-yellow { clear: right; }" + - "#clear-both{ clear:both;}" + - "#clear-both .block.is-yellow { clear: both; }" + actions: [] + examples: + - is_default: false + title: 'clear: none;' + description: "

The clear property is only relevant when used + with siblings that have a float value.

The element will + sit alongside any floated element that precedes it.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.

Float left
block

Float right

This + is the clear none block. It lives alongside its floating siblings. + It takes up the remaining space left in between.

Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+ - is_default: false + title: 'clear: left;' + description: "

The cleared element will move after any left floating + element that precedes it, but will remain alongside right float elements.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.

Float left

Tall
float
right
block

This + is the clear left element. It comes after the clear left, but remains + alongside the float right.

Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum + maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'clear: right;' + description: "

The cleared element will move after any right floating + element that precedes it, but will remain alongside left float elements.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.

Tall
float
left
block

Float right

This + is the clear left element. It comes after the clear right, but remains + alongside the float left.

Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum + maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'clear: both;' + description: "

The cleared element will move after any floating element + that precedes it. This includes both left floating and right floating elements.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.

Float left

Float right

This is the clear + both element. It comes after both floating elements.

Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+- title: color + is_shorthand: false + description: "

Defines the color of the text.

" + styles: + - ".color { font-size: 1.5em; }" + - "#color-transparent{ color:transparent;}" + - "#color-red{ color:red;}" + - "#color-05ffb0{ color:#05ffb0;}" + - "#color-rgb50-115-220{ color:rgb(50, 115, 220);}" + - "#color-rgba0-0-0-05{ color:rgba(0, 0, 0, 0.5);}" + - "#color-rgba0-0-0-05{ background: #05ffb0; }" + - "#color-hsl14-100-53{ color:hsl(14, 100%, 53%);}" + - "#color-hsla14-100-53-06{ color:hsla(14, 100%, 53%, 0.6);}" + actions: [] + examples: + - is_default: false + title: 'color: transparent;' + description: "

Applies a transparent color to the text. The + text will still take up the space it should.

" + output:
Hello world
+ - is_default: false + title: 'color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello world
+ - is_default: false + title: 'color: #05ffb0;' + description: "

You can use hexadecimal color codes.

" + output:
Hello world
+ - is_default: false + title: 'color: rgb(50, 115, 220);' + description: "

You can use rgb() color codes:

  • the + first value is for red
  • the second value is for green
  • the + third value is for blue

Each of them can have a value + between 0 and 255.

" + output:
Hello + world
+ - is_default: false + title: 'color: rgba(0, 0, 0, 0.5);' + description: "

You can use rgba() color codes:

  • the + first 3 values are for rgb
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello world
+ - is_default: false + title: 'color: hsl(14, 100%, 53%);' + description: "

You can use hsl() color codes:

  • the + first value is for hue and can go from 0 to 359
  • the + second value is for saturation and go from 0% + to 100%
  • the third value is for luminosity + and go from 0% to 100%
" + output:
Hello world
+ - is_default: false + title: 'color: hsla(14, 100%, 53%, 0.6);' + description: "

You can use hsl()a color codes:

  • the + first 3 values are for hsl
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + world
+- title: column-count + is_shorthand: false + description: "

Defines the number of columns of the element.

" + styles: + - "#column-count-auto{ column-count:auto;}" + - "#column-count-3{ column-count:3;}" + - "#column-count-3{ -moz-column-count: 3;-webkit-column-count: 3; }" + actions: [] + examples: + - is_default: true + title: 'column-count: auto;' + description: "

Removes any columns from the element (unless another column- + property was set).

" + output:

Hello world

Foo bar

CSS Reference

+ - is_default: false + title: 'column-count: 3;' + description: "

When using an integer value, the element will + distribute its child elements across the number of columns defined.

" + output:

Hello world

Foo bar

CSS Reference

+- title: column-gap + is_shorthand: false + description: "

Defines the gap between the columns of the element.

" + styles: + - ".column-gap { column-count: 3;-moz-column-count: 3;-webkit-column-count: 3; }" + - "#column-gap-normal{ column-gap:normal;}" + - "#column-gap-2px{ column-gap:2px;}" + - "#column-gap-2px{ -moz-column-gap: 2px;-webkit-column-gap: 2px; }" + actions: [] + examples: + - is_default: true + title: 'column-gap: normal;' + description: "

The gap between the columns is set to the browser's default + value, which usually is 1em.

" + output:

Hello world

Foo bar

CSS Reference

+ - is_default: false + title: 'column-gap: 2px;' + description: "

You can use pixel values for the gap.

Note + that the gap only appears between columns, and not on the exterior + sides of the edge columns.

" + output:

Hello world

Foo bar

CSS Reference

+- title: column-width + is_shorthand: false + description: "

Defines the number of columns of the element.

" + styles: + - "#column-width-auto{ column-width:auto;}" + - "#column-width-10px{ column-width:10px;}" + - "#column-width-10px{ -moz-column-width: 10px;-webkit-column-width: 10px; }" + actions: [] + examples: + - is_default: true + title: 'column-width: auto;' + description:

The element will not distribute its child elements + into columns, unlesse a column-count + value is defined. In that case, the column width will be infered from the column + count.

+ output:

Hello world

Foo bar

CSS Reference

+ - is_default: false + title: 'column-width: 10px;' + description: "

You can use pixel values for the column width.

+

The number of columns will be the minimum needed to distribute all the content + across the element.

" + output:

Hello world

Foo bar

CSS Reference

+- title: content + is_shorthand: false + description: "

Defines the text content of the :before and :after + pseudo-elements.

" + styles: + - ".content p:before { content: normal; }" + - "#content-normal{ content:normal;}" + - "#content-foo-bar{ content:"Foo bar";}" + - '#content-foo-bar p:before { content: "Foo bar"; }' + - "#content-urlimagesjtpng p:before { content: url(/images/jt.png); }" + - "#content-attrdata-something{ content:attr(data-something);}" + - "#content-attrdata-something p:before { content: attr(data-something); }" + actions: [] + examples: + - is_default: true + title: 'content: normal;' + description: "

No content is added to the element.

" + output:

Hello + world

+ - is_default: false + title: 'content: "Foo bar";' + description: '

Considering this HTML element:

<p class="element">
+      Hello world </p>

And this CSS:

.element:before { content:
+      "Foo bar"; }

The text content will be prepended to + the element''s content.

Notice how the end result combines text + from the HTML and text from the CSS.

' + output:

Hello + world

+ - is_default: false + title: 'content: url(/images/jt.png);' + description: "

You can insert images by using the url() + function.

" + output:

Hello world

+ - is_default: false + title: 'content: attr(data-something);' + description: '

Considering this HTML element:

<p class="element"
+      data-something="cssreference"> Hello world </p>

And this CSS:

+ 
.element:before { content: attr(data-something); }

The element + will grab the text content from the HTML attribute.

' + output:

Hello world

+- title: cursor + is_shorthand: false + description: "

Sets the mouse cursor when hovering the element.

" + styles: + - "#cursor-default{ cursor:default;}" + - "#cursor-auto{ cursor:auto;}" + - "#cursor-pointer{ cursor:pointer;}" + - "#cursor-move{ cursor:move;}" + - "#cursor-crosshair{ cursor:crosshair;}" + - "#cursor-text{ cursor:text;}" + - "#cursor-wait{ cursor:wait;}" + - "#cursor-helpe-resize{ cursor:helpe-resize;}" + - "#cursor-ne-resize{ cursor:ne-resize;}" + - "#cursor-nw-resize{ cursor:nw-resize;}" + - "#cursor-n-resize{ cursor:n-resize;}" + - "#cursor-se-resize{ cursor:se-resize;}" + - "#cursor-sw-resize{ cursor:sw-resize;}" + - "#cursor-s-resize{ cursor:s-resize;}" + - "#cursor-w-resize{ cursor:w-resize;}" + actions: [] + examples: + - is_default: false + title: 'cursor: default;' + description: "

Sets the cursor to the element's default value. For a link, it + would be a pointer. For text it would be a selection cursor.

" + output:

Hello world

+ - is_default: false + title: 'cursor: auto;' + description: "

auto

" + output:

Hello world

+ - is_default: false + title: 'cursor: pointer;' + description: "

pointer

" + output:

Hello world

+ - is_default: false + title: 'cursor: move;' + description: "

move

" + output:

Hello world

+ - is_default: false + title: 'cursor: crosshair;' + description: "

crosshair

" + output:

Hello + world

+ - is_default: false + title: 'cursor: text;' + description: "

text

" + output:

Hello world

+ - is_default: false + title: 'cursor: wait;' + description: "

wait

" + output:

Hello world

+ - is_default: false + title: 'cursor: helpe-resize;' + description: "

helpe-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: ne-resize;' + description: "

ne-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: nw-resize;' + description: "

nw-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: n-resize;' + description: "

n-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: se-resize;' + description: "

se-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: sw-resize;' + description: "

sw-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: s-resize;' + description: "

s-resize

" + output:

Hello + world

+ - is_default: false + title: 'cursor: w-resize;' + description: "

w-resize

" + output:

Hello + world

+- title: display + is_shorthand: false + description: "

Sets the display behavior of the element.

" + styles: + - ".display .block.is-alpha { padding: 0; }.display .block span { background: hsl(348, + 100%, 61%);color: #fff; }.display .block span:last-child { background: hsl(217, + 71%, 53%); }" + - "#display-none .block.is-alpha { display: none; }" + - "#display-inline .block.is-alpha { display: inline; }" + - "#display-block .block.is-alpha { display: block; }" + - "#display-inline-block .block.is-alpha { display: inline-block;height: 3em;width: + 60px; }" + - "#display-list-item .block.is-alpha { display: list-item; }" + - "#display-table .block.is-alpha { display: table; }" + - "#display-table-cell .block.is-alpha { display: table-cell; }" + - "#display-table-row .block.is-alpha { display: table-row; }" + - "#display-flex .block.is-alpha { display: flex; }" + - "#display-inline-flex .block.is-alpha { display: inline-flex;height: 3em;width: + 120px; }" + actions: [] + examples: + - is_default: false + title: 'display: none;' + description: "

The element is completely removed, as if it + wasn't in the HTML code in the first place.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Hello + world

Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: inline;' + description: "

The element is turned into an inline element: + it behaves like simple text.

Any height and width + applied will have no effect.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Hello + world

Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: block;' + description: "

The element is turned into a block element: + it starts on a new line, and takes up the whole width.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Hello + world

Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: inline-block;' + description: "

The element shares properties of both an inline + and a block element:

  • inline because + the element behaves like simple text, and inserts itself in a block of text
  • Block + because you can apply height and width values

For + example, this element has:

.element{ height: 3em; width: 60px; }
" + output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hello world

Etiam semper diam at erat pulvinar, at pulvinar felis + blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: list-item;' + description: "

The element behaves like a list item: <li>. + The only difference with block is that a list item has a bullet + point.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Hello + world

Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: table;' + description: "

The element behaves like a table: <table>.

+

Its content and child elements behave like table cells.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Target + First child Second child

Etiam semper diam at + erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.
+ - is_default: false + title: 'display: table-cell;' + description: "

The element behaves like a table cell: <td> + or <th>.

Its content and child elements behave like + table cells.

" + output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Target First child Second child

Etiam + semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut.
+ - is_default: false + title: 'display: table-row;' + description: "

The element behaves like a table row: <tr>.

+

Its content and child elements behave like table cells.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

Target + First child Second child

Etiam semper diam at + erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut.
+ - is_default: false + title: 'display: flex;' + description: "

The element is turned into an flexbox container. + On its own, it behaves like a block element.

Its child elements will + be turned into flexbox items.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit.

First + child Second child

Etiam semper diam at erat pulvinar, + at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida + libero rhoncus ut.
+ - is_default: false + title: 'display: inline-flex;' + description: "

The element shares properties of both an inline + and a flexbox element:

  • inline + because the element behaves like simple text, and inserts itself in a block + of text
  • flexbox because its child element will be turned + into flexbox items

For example, this element has:

.element{
+      height: 3em; width: 120px; }
" + output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

First child Second child

Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut.
+- title: flex-basis + is_shorthand: false + description: "

Defines the initial size of a flexbox item.

" + styles: + - ".flex-basis { background: hsl(0, 0%, 95%);display: flex;padding: 1em;word-break: + break-all; }" + - "#flex-basis-auto{ flex-basis:auto;}" + - "#flex-basis-auto .block { flex-basis: auto; }" + - "#flex-basis-80px{ flex-basis:80px;}" + - "#flex-basis-80px .block { flex-basis: 80px; }" + actions: [] + examples: + - is_default: true + title: 'flex-basis: auto;' + description: "

The element will be automatically sized based on its content, + or on any height or width value if they are defined.

" + output:

Flexbox item

+ - is_default: false + title: 'flex-basis: 80px;' + description: "

You can define pixel or (r)em + values. The element will wrap its content to avoid any overflow.

" + output:

Flexbox item

+- title: flex-direction + is_shorthand: false + description: "

Defines how flexbox items are ordered within a flexbox container.

" + styles: + - ".flex-direction { display: flex; }" + - "#flex-direction-row{ flex-direction:row;}" + - "#flex-direction-row-reverse{ flex-direction:row-reverse;}" + - "#flex-direction-column{ flex-direction:column;}" + - "#flex-direction-column-reverse{ flex-direction:column-reverse;}" + actions: [] + examples: + - is_default: true + title: 'flex-direction: row;' + description: "

The flexbox items are ordered the same way as + the text direction, along the main axis.

" + output:

1. One

2. + Two

3. Three

4. Four

+ - is_default: false + title: 'flex-direction: row-reverse;' + description: "

The flexbox items are ordered the opposite way + as the text direction, along the main axis.

" + output:

1. One

2. + Two

3. Three

4. Four

+ - is_default: false + title: 'flex-direction: column;' + description: "

The flexbox items are ordered the same way as + the text direction, along the cross axis.

" + output:

1. One

2. + Two

3. Three

4. Four

+ - is_default: false + title: 'flex-direction: column-reverse;' + description: "

The flexbox items are ordered the opposite way + as the text direction, along the cross axis.

" + output:

1. One

2. + Two

3. Three

4. Four

+- title: flex-flow + is_shorthand: true + description:

Shorthand property for flex-direction and flex-flow.

+ styles: [] + actions: [] + examples: [] +- title: flex-grow + is_shorthand: false + description: "

Defines how much a flexbox item should grow if + there's space available.

" + styles: + - ".flex-grow { background: #310736;border-radius: 3px;display: flex;padding: 1em; + }" + - "#flex-grow-0{ flex-grow:0;}" + - "#flex-grow-1{ flex-grow:1;}" + - "#flex-grow-1 .block.is-alpha { flex-grow: 1; }" + - "#flex-grow-2{ flex-grow:2;}" + - "#flex-grow-2 .block.is-alpha { flex-grow: 1; }#flex-grow-2 .block.is-pink { flex-grow: + 2; }" + actions: [] + examples: + - is_default: true + title: 'flex-grow: 0;' + description: "

The element will not grow if there's space available. + It will only use the space it needs.

" + output:

Target

Item

Item

+ - is_default: false + title: 'flex-grow: 1;' + description: "

The element will grow by a factor of 1. + It will fill up the remaining space if no other flexbox item has a flex-grow + value.

" + output:

Target

Item

Item

+ - is_default: false + title: 'flex-grow: 2;' + description: "

Because the flex-grow value is relative, its + behaviour depends on the value of the flexbox item siblings.

+

In this example, the remaining space is divided in 3:

+
  • 1 third goes to the green item
  • 2 + thirds go to the pink item
  • Nothing goes to the yellow + item, who retains its initial width
" + output:

Item
1

Item
2

Item
0

+- title: flex-shrink + is_shorthand: false + description: "

Defines how much a flexbox item should shrink + if there's not enough space available.

" + styles: + - ".flex-shrink { background: #310736;border-radius: 3px;display: flex;padding: + 1em;width: 300px; }" + - ".flex-shrink .block { flex-shrink: 1; }" + - "#flex-shrink-1{ flex-shrink:1;}" + - "#flex-shrink-0{ flex-shrink:0;}" + - "#flex-shrink-0 .block.is-alpha { flex-shrink: 0; }" + - "#flex-shrink-2{ flex-shrink:2;}" + - "#flex-shrink-2 .block.is-alpha { flex-grow: 1;width: 100%; }#flex-shrink-2 .block.is-pink + { flex-shrink: 3;word-break: break-all; }#flex-shrink-2 .block.is-yellow { flex-shrink: + 1;word-break: break-all; }" + actions: [] + examples: + - is_default: true + title: 'flex-shrink: 1;' + description: "

If there's not enough space available in the + container's main axis, the element will shrink by a factor + of 1, and will wrap its content.

" + output:

This is the flex-shrink target

Foo bar

Lorem ipsum

+ - is_default: false + title: 'flex-shrink: 0;' + description: "

The element will not shrink: it will retain + the width it needs, and not wrap its content. Its siblings + will shrink to give space to the target element.

Because the target element + will not wrap its content, there is a chance for the flexbox container's content + to overflow.

" + output:

This is the flex-shrink target

Foo bar

Lorem ipsum

+ - is_default: false + title: 'flex-shrink: 2;' + description: "

Because the flex-shrink value is relative, its + behaviour depends on the value of the flexbox item siblings.

+

In this example, the green item wants to fill 100% of the width. The space + it needs is taken from its two siblings, and is divided in + 4:

  • 3 quarters are taken from the + red item
  • 1 quarter is taken from the + yellow item
" + output:

Width
100%

Shrink
3

Shrink
1

+- title: flex-wrap + is_shorthand: false + description: "

Defines if flexbox items appear on a single line + or on multiple lines within a flexbox container.

" + styles: + - ".flex-wrap { background: #310736;display: flex;max-width: 360px; }" + - "#flex-wrap-nowrap{ flex-wrap:nowrap;}" + - "#flex-wrap-wrap{ flex-wrap:wrap;}" + - "#flex-wrap-wrap-reverse{ flex-wrap:wrap-reverse;}" + actions: [] + examples: + - is_default: true + title: 'flex-wrap: nowrap;' + description: "

The flexbox items will remain on a single line, + no matter what, and will eventually overflow if needed.

" + output:

1. One

2. + Two

3. Three

4. Four

5. + Five

6. Six

+ - is_default: false + title: 'flex-wrap: wrap;' + description: "

The flexbox items will be distributed among multiple + lines if needed.

" + output:

1. One

2. + Two

3. Three

4. Four

5. + Five

6. Six

+ - is_default: false + title: 'flex-wrap: wrap-reverse;' + description: "

The flexbox items will be distributed among multiple + lines if needed. Any additional line will appear before + the previous one.

" + output:

1. One

2. + Two

3. Three

4. Four

5. + Five

6. Six

+- title: float + is_shorthand: false + description: "

Pushes the element to either the left or right + side. The following siblings will wrap around the floating element

" + styles: + - "#float-none .block.is-alpha { float: none; }" + - "#float-left .block.is-alpha { float: left; }" + - "#float-right .block.is-alpha { float: right; }" + actions: [] + examples: + - is_default: true + title: 'float: none;' + description: "

Removes any previously defined float value. The + element will remain in the natural flow of the page.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit.

Target element

Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit + sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor + lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'float: left;' + description: "

Moves the element to the left side of its container. + The following elements will wrap around it and fill the space remaining on the + right.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit.

Target element

Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit + sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor + lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'float: right;' + description: "

Moves the element to the right side of its container. + The following elements will wrap around it and fill the space remaining on the + left.

" + output:

Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit.

Target element

Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit + sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor + lorem, et sollicitudin felis neque sit amet erat.

+- title: font-family + is_shorthand: false + description: '' + styles: + - ".font-family { font-size: 1.5em;line-height: 1.2; }" + - "#font-family-source-sans-pro-arial-sans-serif{ font-family:"Source Sans + Pro", "Arial", sans-serif;}" + - "#font-family-serif{ font-family:serif;}" + - "#font-family-sans-serif{ font-family:sans-serif;}" + - "#font-family-monospace{ font-family:monospace;}" + - "#font-family-cursive{ font-family:cursive;}" + - "#font-family-fantasy{ font-family:fantasy;}" + actions: [] + examples: + - is_default: false + title: 'font-family: "Source Sans Pro", "Arial", sans-serif;' + description: "

When using multiple values, the font-family + list of font families defines the priority + in which the browser should choose the font family.

The browser will + look for each family on the user's computer and in any @font-face + resource.

The list is prioritized from left to right: + it will use the first value if it's available, or go to the next one, until + the end of the list is reached. The default font family is + defined by the browser preferences.

In this example, the browser will + try to use Source Sans Pro if it's available. If it can't find + it, it will try to use Arial. If it's not available either, it + will use the browser's sans-serif font.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'font-family: serif;' + description: "

The browser will use a serif font family: all + characters have stroke endings.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'font-family: sans-serif;' + description: "

The browser will use a sans-serif font family: + no character has stroke endings.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'font-family: monospace;' + description: "

The browser will use a monospace font family: + all characters have the same width.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'font-family: cursive;' + description: "

The browser will use a cursive font family.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'font-family: fantasy;' + description: "

The browser will use a fantasy font family.

" + output:
Hello + world
The quick brown fox jumps over the lazy dog
+- title: font-size + is_shorthand: false + description: "

Defines the size of the text.

" + styles: + - ".font-size { line-height: 1.2; }" + - "#font-size-medium{ font-size:medium;}" + - "#font-size-20px{ font-size:20px;}" + - "#font-size-12em .parent { font-size: 18px; }#font-size-12em .block { font-size: + 1.2em;margin-top: 0.25rem; }" + - "#font-size-12rem .parent { font-size: 18px; }#font-size-12rem .block { font-size: + 1.2rem;margin-top: 0.25rem; }" + - "#font-size-90 .parent { font-size: 18px; }#font-size-90 .block { font-size: 90%;margin-top: + 0.25rem; }" + - "#font-size-smaller .parent { font-size: 18px; }#font-size-smaller .block { font-size: + smaller;margin-top: 0.25rem; }" + - "#font-size-x-large .parent { font-size: 18px; }#font-size-x-large .block { font-size: + x-large;margin-top: 0.25rem; }" + actions: [] + examples: + - is_default: true + title: 'font-size: medium;' + description: "

The text will use the browser's default medium + size.

" + output:

Hello + world

The quick brown fox jumps over the lazy dog

+ - is_default: false + title: 'font-size: 20px;' + description: "

You can use pixel values.

" + output:

Hello + world

The quick brown fox jumps over the lazy dog

+ - is_default: false + title: 'font-size: 1.2em;' + description: "

You can use em values.

The value is relative + to the parent's font-size.
As a result, the + value will cascade if used on child elements.

" + output: '
Parent + container: 18px
Font-size: 1.2em + = 21.6px
Font-size: 1.2em = 25.92px
Font-size: 1.2em = 31.104px
+
' + - is_default: false + title: 'font-size: 1.2rem;' + description: "

You can use rem values.

The value is + relative to the root element's font-size, + which is the <html> element.
As a result, the value will + not vary depending on the depth of the element in + the HTML hierarchy, and will reamin context independent.

" + output: '
<html> root element: 18px
Font-size: 1.2rem = 21.6px
Font-size: 1.2rem = 21.6px
Font-size: + 1.2rem = 21.6px
' + - is_default: false + title: 'font-size: 90%;' + description: "

You can use percentage values. They act like + em values.

The value is relative to the parent's + font-size.
As a result, the value will cascade + if used on child elements.

" + output: '
Parent + container: 18px
Font-size: 90% = + 16.2
Font-size: 90% = 14.58px
Font-size: 90% = 13.122px
+
' + - is_default: false + title: 'font-size: smaller;' + description: "

You can use relative keywords. The value is + relative to the parent.

The following are available:

+
  • larger
  • smaller
" + output: '
Parent container: 18px
Font-size: + smaller
Font-size: smaller
Font-size: + smaller
' + - is_default: false + title: 'font-size: x-large;' + description: "

You can use absolute keywords. The value is + relative to the root element <html>.

+

The following are available:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
" + output: '
<html> root element: 18px
Font-size: x-large
Font-size: + x-large
Font-size: x-large
+
' +- title: font-style + is_shorthand: false + description: "

Defines how much the text is slanted.

" + styles: + - ".font-style { font-size: 1.2em; }" + - "#font-style-normal{ font-style:normal;}" + - "#font-style-italic{ font-style:italic;}" + - "#font-style-oblique{ font-style:oblique;}" + actions: [] + examples: + - is_default: true + title: 'font-style: normal;' + description: "

The text is not slanted.

" + output:
Hello + world
+ - is_default: false + title: 'font-style: italic;' + description: "

Use the italic version of the font: the letters + are slightly slanted.

" + output:
Hello + world
+ - is_default: false + title: 'font-style: oblique;' + description: "

Use the oblique version of the font: the letters + are more slanted than italic.

" + output:
Hello + world
+- title: font-variant + is_shorthand: false + description: "

Defines which glyph to use for each letter.

" + styles: + - ".font-variant { font-size: 1.2em; }" + - "#font-variant-normal{ font-variant:normal;}" + - "#font-variant-small-caps{ font-variant:small-caps;}" + actions: [] + examples: + - is_default: true + title: 'font-variant: normal;' + description: "

Each letter uses its normal glyph.

" + output:
Hello + world
+ - is_default: false + title: 'font-variant: small-caps;' + description: "

Each letter uses its small capitalized version.

" + output:
Hello + world
+- title: font-weight + is_shorthand: false + description: "

Defines the weight of the text.

" + styles: + - ".font-weight { font-size: 1.2em; }" + - "#font-weight-normal{ font-weight:normal;}" + - "#font-weight-bold{ font-weight:bold;}" + - "#font-weight-600{ font-weight:600;}" + - "#font-weight-lighter{ font-weight:lighter;}" + actions: [] + examples: + - is_default: true + title: 'font-weight: normal;' + description: "

The text is in normal weight.

" + output:
Hello + world
+ - is_default: false + title: 'font-weight: bold;' + description: "

The text becomes bold.

" + output:
Hello + world
+ - is_default: false + title: 'font-weight: 600;' + description: "

You can use numeric values. They all correspond + to a particular named weight:

  • 100 + Thin
  • 200 Extra Light
  • 300 Light
  • 400 + Normal
  • 500 Medium
  • 600 Semi + Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 + Ultra Bold

If the font family doesn't provide the requested weight, + it will use the closest available one.

" + output:
Hello + world
+ - is_default: false + title: 'font-weight: lighter;' + description: "

You can use relative keywords: lighter + or bolder. The browser will use the next available weight.

" + output:
Hello + world
+- title: font + is_shorthand: true + description:

Shorthand property for font-style font-variant + font-weight font-size + line-height and font-family.

+ styles: [] + actions: [] + examples: [] +- title: height + is_shorthand: false + description: "

Defines the height of the element.

" + styles: + - ".height { max-width: 400px; }" + - "#height-100px .block { height: 100px; }" + actions: [] + examples: + - is_default: true + title: 'height: auto;' + description: "

The element will automatically adjust its height + to allow its content to be displayed correctly.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'height: 100px;' + description:

You can use numeric values like pixels, + (r)em, percentages...

If the content + does not fit within the specified height, it will overflow. + How the container will handle this overflowing content is defined by the overflow + property.

+ output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+- title: justify-content + is_shorthand: false + description: "

Defines how flexbox items are aligned according to the main + axis, within a flexbox container.

" + styles: + - ".justify-content { background: hsl(48, 100%, 67%);background: #310736;display: + flex;padding: 0; }" + - "#justify-content-flex-start{ justify-content:flex-start;}" + - "#justify-content-flex-end{ justify-content:flex-end;}" + - "#justify-content-center{ justify-content:center;}" + - "#justify-content-space-between{ justify-content:space-between;}" + - "#justify-content-space-around{ justify-content:space-around;}" + actions: [] + examples: + - is_default: true + title: 'justify-content: flex-start;' + description: "

The flexbox items are pushed towards the start + of the container's main axis.

" + output:

1. One

2. + Two

3. Three

+ - is_default: false + title: 'justify-content: flex-end;' + description: "

The flexbox items are pushed towards the end + of the container's main axis.

" + output:

1. One

2. + Two

3. Three

+ - is_default: false + title: 'justify-content: center;' + description: "

The flexbox items are centered along the container's + main axis.

" + output:

1. One

2. + Two

3. Three

+ - is_default: false + title: 'justify-content: space-between;' + description: "

The remaining space is distributed between the + flexbox items.

" + output:

1. One

2. + Two

3. Three

+ - is_default: false + title: 'justify-content: space-around;' + description: "

The remaining space is distributed around the + flexbox items: this adds space before the first item and after + the last one.

" + output:

1. One

2. + Two

3. Three

+- title: left + is_shorthand: false + description: "

Defines the position of the element according to its left + edge.

" + styles: + - ".left { background: #310736;height: 200px;position: relative; }" + - ".left p { color: #fff; }.left .natural { width: 200px; }.left .actual { animation-direction: + alternate;animation-duration: 2s;animation-iteration-count: infinite;position: + absolute;width: 200px; }" + - "#left-auto{ left:auto;}" + - "#left-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }" + - "#left-80px .actual { animation-name: fadeIn;left: 80px;position: relative;transform: + translateY(-100%); }" + - "#left--20px .actual { animation-name: fadeIn;left: -20px;transform: translateY(-100%); + }" + actions: [] + examples: + - is_default: true + title: 'left: auto;' + description: "

The element will remain in its natural position.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'left: 80px;' + description: "

If the element is in position relative, the + element will move upwards by the amount defined by the left + value.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'left: -20px;' + description: "

If the element is in position absolute, the + element will position itself from the left of the first positioned + ancestor.

" + output:

Parent container

Natural position
Actual position
+- title: letter-spacing + is_shorthand: false + description: "

Defines the spacing between the characters of a block of text.

" + styles: + - "#letter-spacing-normal{ letter-spacing:normal;}" + - "#letter-spacing-2px{ letter-spacing:2px;}" + - "#letter-spacing-01em{ letter-spacing:0.1em;}" + actions: [] + examples: + - is_default: true + title: 'letter-spacing: normal;' + description: "

The spacing between the characters is normal.

" + output:
The + quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'letter-spacing: 2px;' + description: "

You can use pixel values.

" + output:
The + quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'letter-spacing: 0.1em;' + description: "

You can use em values: this allows the spacing + to remain relative to the font-size.

" + output:
The + quick brown fox jumps over the lazy dog
+- title: line-height + is_shorthand: false + description: "

Defines the height of a single line of text.

" + styles: + - "#line-height-normal{ line-height:normal;}" + - "#line-height-16{ line-height:1.6;}" + - "#line-height-16 .block { line-height: 1.6; }" + - "#line-height-30px{ line-height:30px;}" + - "#line-height-30px .block { line-height: 30px; }" + - "#line-height-08em{ line-height:0.8em;}" + - "#line-height-08em .block { line-height: 0.8em; }" + actions: [] + examples: + - is_default: true + title: 'line-height: normal;' + description: "

Reverts to the default value of the browser.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.

+ - is_default: false + title: 'line-height: 1.6;' + description: "

You can use unitless values: the line height + will be relative to the font size.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet.

+ - is_default: false + title: 'line-height: 30px;' + description: "

You can use pixel values.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.

+ - is_default: false + title: 'line-height: 0.8em;' + description: "

You can use em values: like with unitless values, + the line height will be relative to the font size.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.

+- title: list-style-image + is_shorthand: false + description: "

Defines the image to be used as an list item's + bullet point.

" + styles: + - ".list-style-image ul { list-style-type: disc;margin-left: 1em; }" + - "#list-style-image-none{ list-style-image:none;}" + - "#list-style-image-urlimageslist-style-imagepng{ list-style-image:url(/images/list-style-image.png);}" + - "#list-style-image-urlimageslist-style-imagepng ul { list-style-image: url(/images/list-style-image.png); + }" + actions: [] + examples: + - is_default: true + title: 'list-style-image: none;' + description:

The list items will use the bullet point defined by the list-style-type + value, which by default is a disc.

+ output:
  • One
  • Two
  • Three
+ - is_default: false + title: 'list-style-image: url(/images/list-style-image.png);' + description: "

The list items will use the image located at + the specified URL as their bullet point.
The image can not be resized.

" + output:
  • One
  • Two
  • Three
+- title: list-style-position + is_shorthand: false + description: "

Defines the position of a list's bullet points.

" + styles: + - ".list-style-position ul { list-style-type: disc;margin-left: 1em;max-width: 280px; + }.list-style-position li { background: hsl(48, 100%, 67%);line-height: 1.2; }.list-style-position + li + li { margin-top: 0.5em; }" + - "#list-style-position-outside{ list-style-position:outside;}" + - "#list-style-position-outside ul { list-style-position: outside; }" + - "#list-style-position-inside{ list-style-position:inside;}" + - "#list-style-position-inside ul { list-style-position: inside; }" + actions: [] + examples: + - is_default: true + title: 'list-style-position: outside;' + description: "

The bullet point will be outside the list item, + as if it wasn't part of the list item.

The start of each line + of a list item will be aligned vertically.

" + output:
  • Lorem + ipsum dolor sit amet, consectetur adipiscing elit.
  • Etiam semper diam + at erat pulvinar, at pulvinar felis blandit.
  • Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut.
  • Maecenas imperdiet felis + nisi, fringilla luctus felis hendrerit sit amet.
  • Pellentesque interdum, + nisl nec interdum maximus.
+ - is_default: false + title: 'list-style-position: inside;' + description: "

The bullet point will be inside the list item.

+

As it is part of the list item, it will be part of the text and + push the text at the start.

" + output:
  • Lorem + ipsum dolor sit amet, consectetur adipiscing elit.
  • Etiam semper diam + at erat pulvinar, at pulvinar felis blandit.
  • Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut.
  • Maecenas imperdiet felis + nisi, fringilla luctus felis hendrerit sit amet.
  • Pellentesque interdum, + nisl nec interdum maximus.
+- title: list-style-type + is_shorthand: false + description: "

Defines the type of a list item's bullet + point.

" + styles: + - ".list-style-type ul { margin-left: 1em; }" + - "#list-style-type-disc{ list-style-type:disc;}" + - "#list-style-type-disc ul { list-style-type: disc; }" + - "#list-style-type-circle{ list-style-type:circle;}" + - "#list-style-type-circle ul { list-style-type: circle; }" + - "#list-style-type-square{ list-style-type:square;}" + - "#list-style-type-square ul { list-style-type: square; }" + - "#list-style-type-decimal{ list-style-type:decimal;}" + - "#list-style-type-decimal ul { list-style-type: decimal; }" + - "#list-style-type-none{ list-style-type:none;}" + - "#list-style-type-none ul { list-style-type: none; }" + actions: [] + examples: + - is_default: true + title: 'list-style-type: disc;' + description: "

The list items will use a disc as their bullet + point.

" + output:
  • One
  • Two
  • Three
+ - is_default: false + title: 'list-style-type: circle;' + description: "

The list items will use a circle as their bullet + point.

" + output:
  • One
  • Two
  • Three
+ - is_default: false + title: 'list-style-type: square;' + description: "

The list items will use a square as their bullet + point.

" + output:
  • One
  • Two
  • Three
+ - is_default: false + title: 'list-style-type: decimal;' + description: "

The list items will use a decimal as their bullet + point.

" + output:
  • One
  • Two
  • Three
+ - is_default: false + title: 'list-style-type: none;' + description: "

The list items will have no bullet point.

" + output:
  • One
  • Two
  • Three
+- title: list-style + is_shorthand: true + description:

Shorthand property for list-style-type list-style-image + and list-style-position.

+ styles: [] + actions: [] + examples: [] +- title: margin-bottom + is_shorthand: false + description: "

Defines the space outside the element, on the + bottom side.

" + styles: + - ".margin-bottom { background: hsl(0, 0%, 80%);padding: 1em; }" + - ".margin-bottom .block { border-radius: 0; }.margin-bottom .block.is-alpha { position: + relative; }.margin-bottom .box { bottom: 0;left: 0;position: absolute;right: 0;transform: + translateY(100%); }" + - "#margin-bottom-0 .box { display: none; }" + - '#margin-bottom-30px .block.is-alpha { margin-bottom: 30px; }#margin-bottom-30px + .box { height: 30px; }#margin-bottom-30px .box:before { content: "30px"; }' + - '#margin-bottom-2em .block.is-alpha { margin-bottom: 2em; }#margin-bottom-2em + .box { height: 2em; }#margin-bottom-2em .box:before { content: "2em"; }' + - '#margin-bottom-10 .block.is-alpha { margin-bottom: 10%; }#margin-bottom-10 .box + { bottom: auto;height: 100px;top: 100%;transform: rotate(-90deg) translateX(-100%);transform-origin: + top left;width: 10%; }#margin-bottom-10 .box:before { content: "10%"; }' + actions: [] + examples: + - is_default: true + title: 'margin-bottom: 0;' + description: "

Removes any margin at the bottom.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-bottom: 30px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-bottom: 2em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-bottom: 10%;' + description: "

You can use percentage values.
The percentage + is based on the width of the container.

" + output:
First item
Target +
Third + item
+- title: margin-left + is_shorthand: false + description: "

Defines the space outside the element, on the + left side.

" + styles: + - ".margin-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".margin-left .block { border-radius: 0; }.margin-left .block.is-alpha { position: + relative; }.margin-left .box { bottom: 0;left: 0;position: absolute;top: 0;transform: + translateX(-100%); }" + - "#margin-left-0 .box { display: none; }" + - '#margin-left-50px .block.is-alpha { margin-left: 50px; }#margin-left-50px .box + { width: 50px; }#margin-left-50px .box:before { content: "50px"; }' + - '#margin-left-7em .block.is-alpha { margin-left: 7em; }#margin-left-7em .box { + width: 7em; }#margin-left-7em .box:before { content: "7em"; }' + - '#margin-left-30 .block.is-alpha { margin-left: 30%; }#margin-left-30 .box { height: + 2.4em;left: 0;top: 3.2em;transform: none;width: 30%; }#margin-left-30 .box:before + { content: "30%"; }' + - '#margin-left-auto .block.is-alpha { margin-left: auto;width: 200px; }#margin-left-auto + .box { height: 2.4em;left: 0;right: 200px;top: 3.2em;transform: none;width: auto; + }#margin-left-auto .box:before { content: "auto"; }' + actions: [] + examples: + - is_default: true + title: 'margin-left: 0;' + description: "

Removes any margin on the left.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin-left: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-left: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-left: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the container.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-left: auto;' + description: "

The auto keyword will give the left side a share + of the remaining space.

When combined with margin-right: + auto, it will center the element, if a fixed width is + defined.

" + output: '
First item
Target
width: + 200px
Third + item
' +- title: margin-right + is_shorthand: false + description: "

Defines the space outside the element, on the + right side.

" + styles: + - ".margin-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".margin-right .block { border-radius: 0; }.margin-right .block.is-alpha { position: + relative; }.margin-right .box { bottom: 0;position: absolute;right: 0;top: 0;transform: + translateX(100%); }" + - "#margin-right-0 .box { display: none; }" + - '#margin-right-50px .block.is-alpha { margin-right: 50px; }#margin-right-50px + .box { width: 50px; }#margin-right-50px .box:before { content: "50px"; }' + - '#margin-right-7em .block.is-alpha { margin-right: 7em; }#margin-right-7em .box + { width: 7em; }#margin-right-7em .box:before { content: "7em"; }' + - '#margin-right-30 .block.is-alpha { margin-right: 30%; }#margin-right-30 .box + { height: 2.4em;right: 0;top: 3.2em;transform: none;width: 30%; }#margin-right-30 + .box:before { content: "30%"; }' + - '#margin-right-auto .block.is-alpha { margin-right: auto;width: 200px; }#margin-right-auto + .box { height: 2.4em;left: 200px;right: 0;top: 3.2em;transform: none;width: auto; + }#margin-right-auto .box:before { content: "auto"; }' + actions: [] + examples: + - is_default: true + title: 'margin-right: 0;' + description: "

Removes any margin on the right.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-right: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-right: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-right: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the container.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-right: auto;' + description: "

The auto keyword will give the right side a + share of the remaining space.

When combined with margin-left: + auto, it will center the element, if a fixed width is + defined.

" + output: '
First item
Target
width: + 200px
Third + item
' +- title: margin-top + is_shorthand: false + description: "

Defines the space outside the element, on the + top side.

" + styles: + - ".margin-top { background: hsl(0, 0%, 80%);padding: 1em; }" + - ".margin-top .block { border-radius: 0; }.margin-top .block.is-alpha { position: + relative; }.margin-top .box { left: 0;position: absolute;right: 0;top: 0;transform: + translateY(-100%); }" + - "#margin-top-0 .box { display: none; }" + - '#margin-top-30px .block.is-alpha { margin-top: 30px; }#margin-top-30px .box { + height: 30px; }#margin-top-30px .box:before { content: "30px"; }' + - '#margin-top-2em .block.is-alpha { margin-top: 2em; }#margin-top-2em .box { height: + 2em; }#margin-top-2em .box:before { content: "2em"; }' + - '#margin-top-10 .block.is-alpha { margin-top: 10%; }#margin-top-10 .box { height: + 100%;transform: rotate(-90deg);transform-origin: top left;width: 10%; }#margin-top-10 + .box:before { content: "10%"; }' + actions: [] + examples: + - is_default: true + title: 'margin-top: 0;' + description: "

Removes any margin at the top.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin-top: 30px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'margin-top: 2em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin-top: 10%;' + description: "

You can use percentage values.
The percentage + is based on the width of the container.

" + output:
First item
Target
Third item
+- title: margin + is_shorthand: true + description:

Shorthand property for margin-top margin-right + margin-bottom and margin-left.

+ styles: + - ".margin { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".margin .block { border-radius: 0; }.margin .square { align-items: center;border-radius: + 0;display: flex;height: auto;justify-content: center;width: auto; }.margin .container + { align-items: stretch;display: flex; }.margin .block.is-alpha { flex-grow: 1;flex-shrink: + 1; }" + - "#margin-0 .box { display: none; }" + - '#margin-30px .square.is-top { height: 30px; }#margin-30px .square.is-top:before + { content: "30px"; }#margin-30px .square.is-bottom { height: 30px; }#margin-30px + .square.is-bottom:before { content: "30px"; }#margin-30px .square.is-left:before + { content: "30px";width: 30px; }#margin-30px .square.is-right:before { content: + "30px";width: 30px; }' + - '#margin-30px-60px .square.is-top { height: 30px; }#margin-30px-60px .square.is-top:before + { content: "30px"; }#margin-30px-60px .square.is-bottom { height: 30px; }#margin-30px-60px + .square.is-bottom:before { content: "30px"; }#margin-30px-60px .square.is-left:before + { content: "60px";width: 60px; }#margin-30px-60px .square.is-right:before { content: + "60px";width: 60px; }' + - '#margin-30px-60px-45px .square.is-top { height: 30px; }#margin-30px-60px-45px + .square.is-top:before { content: "30px"; }#margin-30px-60px-45px .square.is-bottom + { height: 45px; }#margin-30px-60px-45px .square.is-bottom:before { content: "45px"; + }#margin-30px-60px-45px .square.is-left:before { content: "60px";width: 60px; + }#margin-30px-60px-45px .square.is-right:before { content: "60px";width: 60px; + }' + - '#margin-30px-60px-45px-85px .square.is-top { height: 30px; }#margin-30px-60px-45px-85px + .square.is-top:before { content: "30px"; }#margin-30px-60px-45px-85px .square.is-bottom + { height: 45px; }#margin-30px-60px-45px-85px .square.is-bottom:before { content: + "45px"; }#margin-30px-60px-45px-85px .square.is-left:before { content: "85px";width: + 85px; }#margin-30px-60px-45px-85px .square.is-right:before { content: "60px";width: + 60px; }' + actions: [] + examples: + - is_default: true + title: 'margin: 0;' + description: "

Removes all margins.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin: 30px;' + description: "

When using 1 value, the margin is set for all + 4 sides.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin: 30px 60px;' + description: "

When using 2 values:

  • the first + value is for top/bottom
  • the second + value is for right/left

To remember the order + think about the values you haven't defined.

If you enter + 2 values (top/right), you omit setting bottom and + left. Because bottom is the vertical counterpart of top, it will use top’s value. + And because left is the horizontal counterpart of right, it will use right’s + value.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'margin: 30px 60px 45px;' + description: "

When using 3 values:

  • the first + value is for top
  • the second value + is for right/left
  • the third value + is for bottom

To remember the order + think about the values you haven't defined.

If you enter + 3 values (top/right/bottom), you omit setting left. As right’s + counterpart, it will use its value.

" + output:
First item
Target +
Third item
+ - is_default: false + title: 'margin: 30px 60px 45px 85px;' + description: "

When using 4 values:

  • the first + value is for top
  • the second value + is for right
  • the third value is for + bottom
  • the fourth value is for left

To + remember the order, start at the top and go + clockwise.

" + output:
First item
Target +
Third item
+- title: max-height + is_shorthand: false + description: "

Defines the maximum height the element can be.

" + styles: + - ".max-height { max-width: 400px; }" + - "#max-height-100px .block { max-height: 100px; }" + actions: [] + examples: + - is_default: true + title: 'max-height: none;' + description: "

The element has no limit in terms of height.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'max-height: 2000px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

If the maximum + height is larger than the element's actual height, + the max height has no effect.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum + maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'max-height: 100px;' + description:

If the content does not fit within the maximum height, it will + overflow. How the container will handle this overflowing content + is defined by the overflow + property.

+ output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+- title: max-width + is_shorthand: false + description: "

Defines the maximum width the element can be.

" + styles: + - "#max-width-150px .block { max-width: 150px; }" + actions: [] + examples: + - is_default: true + title: 'max-width: none;' + description: "

The element has no limit in terms of width.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'max-width: 2000px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

If the maximum + width is larger than the element's actual width, the + max width has no effect.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'max-width: 150px;' + description: "

If the content does not fit within the maximum width, it will + automatically change the height of the element to accomodate + for the wrapping of the content.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+- title: min-height + is_shorthand: false + description: "

Defines the minimum height of the element.

" + styles: + - ".min-height .block { max-width: 400px; }" + - "#min-height-200px .block { min-height: 200px; }" + - "#min-height-5px .block { min-height: 5px; }" + actions: [] + examples: + - is_default: true + title: 'min-height: 0;' + description: "

The element has no minimum height.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'min-height: 200px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

If the minimum + height is larger than the element's actual height, + the min height will be applied.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+ - is_default: false + title: 'min-height: 5px;' + description: "

If the minimum height is smaller than + the element's actual height, the min height has no effect.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus, + augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

+- title: min-width + is_shorthand: false + description: "

Defines the minimum width of the element.

" + styles: + - ".min-width .block { display: inline-block;vertical-align: top; }" + - "#min-width-300px .block { min-width: 300px; }" + - "#min-width-5px .block { min-width: 5px; }" + actions: [] + examples: + - is_default: true + title: 'min-width: 0;' + description: "

The element has no minimum width.

" + output:

Hello world

+ - is_default: false + title: 'min-width: 300px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

If the minimum + width is larger than the element's actual width, the + min width will be applied.

" + output:

Hello world

+ - is_default: false + title: 'min-width: 5px;' + description: "

If the minimum width is smaller than + the element's actual width, the min width has no effect.

" + output:

Hello world

+- title: mix-blend-mode + is_shorthand: false + description: "

Defines how the element should blend with the + background.

" + styles: + - ".mix-blend-mode { background: #310736;display: flex;padding: 1em; }" + - "#mix-blend-mode-multiply .block { mix-blend-mode: multiply; }" + - "#mix-blend-mode-screen .block { mix-blend-mode: screen; }" + - "#mix-blend-mode-overlay .block { mix-blend-mode: overlay; }" + - "#mix-blend-mode-darken .block { mix-blend-mode: darken; }" + - "#mix-blend-mode-lighten .block { mix-blend-mode: lighten; }" + - "#mix-blend-mode-color-dodge .block { mix-blend-mode: color-dodge; }" + - "#mix-blend-mode-color-burn .block { mix-blend-mode: color-burn; }" + - "#mix-blend-mode-hard-light .block { mix-blend-mode: hard-light; }" + - "#mix-blend-mode-soft-light .block { mix-blend-mode: soft-light; }" + - "#mix-blend-mode-difference .block { mix-blend-mode: difference; }" + - "#mix-blend-mode-exclusion .block { mix-blend-mode: exclusion; }" + - "#mix-blend-mode-hue .block { mix-blend-mode: hue; }" + - "#mix-blend-mode-saturation .block { mix-blend-mode: saturation; }" + - "#mix-blend-mode-color .block { mix-blend-mode: color; }" + - "#mix-blend-mode-luminosity .block { mix-blend-mode: luminosity; }" + actions: [] + examples: + - is_default: true + title: 'mix-blend-mode: normal;' + description: "

The element does not blend.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: multiply;' + description: "

The element uses the multiply blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: screen;' + description: "

The element uses the screen blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: overlay;' + description: "

The element uses the overlay blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: darken;' + description: "

The element uses the darken blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: lighten;' + description: "

The element uses the lighten blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: color-dodge;' + description: "

The element uses the color-dodge blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: color-burn;' + description: "

The element uses the color-burn blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: hard-light;' + description: "

The element uses the hard-light blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: soft-light;' + description: "

The element uses the soft-light blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: difference;' + description: "

The element uses the difference blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: exclusion;' + description: "

The element uses the exclusion blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: hue;' + description: "

The element uses the hue blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: saturation;' + description: "

The element uses the saturation blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: color;' + description: "

The element uses the color blend mode.

" + output:

Hello world

Hello world

Hello world

+ - is_default: false + title: 'mix-blend-mode: luminosity;' + description: "

The element uses the luminosity blend mode.

" + output:

Hello world

Hello world

Hello world

+- title: opacity + is_shorthand: false + description: "

Defines how opaque the element is.

" + styles: + - ".opacity { background: #310736;padding: 1em; }" + - "#opacity-0 .block { opacity: 0; }" + - "#opacity-03 .block { opacity: 0.3; }" + actions: [] + examples: + - is_default: true + title: 'opacity: 1;' + description: "

The element is fully opaque.

" + output:

Hello world

+ - is_default: false + title: 'opacity: 0;' + description: "

The element is fully transparent.

" + output:

Hello world

+ - is_default: false + title: 'opacity: 0.3;' + description: "

Any value between 0 (zero) and 1 + (one) will make the element semi transparent.

" + output:

Hello world

+- title: order + is_shorthand: false + description: "

Defines the order of a flexbox item.

" + styles: + - ".order { display: flex; }" + - ".order .block { flex-grow: 1;flex-shrink: 1; }.order em { font-style: normal; + }" + - "#order-1 .block.is-pink { order: 1; }" + - "#order--1 .block.is-pink { order: -1; }" + - "#order-9 .block.is-alpha { order: 13; }#order-9 .block.is-beta { order: -7; }#order-9 + .block.is-pink { order: 9; }#order-9 .block.is-yellow { order: 5; }" + actions: [] + examples: + - is_default: true + title: 'order: 0;' + description: "

The order of the flexbox items is the one defined in the HTML + code.

" + output: '

One
order: + 0

Two
order: 0

Target
order: 0

Four
order: + 0

' + - is_default: false + title: 'order: 1;' + description: "

The order is relative to the flexbox item's + siblings. The final order is defined when all individual flexbox item + order values are taken into account.

" + output: '

One
order: + 0

Two
order: 0

Target
order: 1

Four
order: + 0

' + - is_default: false + title: 'order: -1;' + description: "

You can use negative values.

" + output: '

One
order: 0

Two
order: + 0

Target
order: -1

Four
order: 0

' + - is_default: false + title: 'order: 9;' + description: "

You can set a different value for each flexbox + item.

" + output: '

One
order: + 13

Two
order: -7

Target
order: 9

Four
order: + 5

' +- title: outline-color + is_shorthand: false + description: "

Defines the color of the element's outlines.

" + styles: + - ".outline-color { outline-style: solid;outline-width: 4px; }" + - "#outline-color-transparent{ outline-color:transparent;}" + - "#outline-color-red{ outline-color:red;}" + - "#outline-color-05ffb0{ outline-color:#05ffb0;}" + - "#outline-color-rgb50-115-220{ outline-color:rgb(50, 115, 220);}" + - "#outline-color-rgba50-115-220-03{ outline-color:rgba(50, 115, 220, 0.3);}" + - "#outline-color-hsl14-100-53{ outline-color:hsl(14, 100%, 53%);}" + - "#outline-color-hsla14-100-53-06{ outline-color:hsla(14, 100%, 53%, 0.6);}" + actions: [] + examples: + - is_default: true + title: 'outline-color: transparent;' + description: "

Applies a transparent color to the outlines. + The outlines will still take up the space defined by the outline-width + value.

" + output:
Hello + world
+ - is_default: false + title: 'outline-color: red;' + description:

You can use one of the 140+ + color names.

+ output:
Hello + world
+ - is_default: false + title: 'outline-color: #05ffb0;' + description: "

You can use hexadecimal color codes.

" + output:
Hello + world
+ - is_default: false + title: 'outline-color: rgb(50, 115, 220);' + description: "

You can use rgb() color codes:

  • the + first value is for red
  • the second value is for green
  • the + third value is for blue

Each of them can have a value + between 0 and 255.

" + output:
Hello + world
+ - is_default: false + title: 'outline-color: rgba(50, 115, 220, 0.3);' + description: "

You can use rgba() color codes:

  • the + first 3 values are for rgb
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + world
+ - is_default: false + title: 'outline-color: hsl(14, 100%, 53%);' + description: "

You can use hsl() color codes:

  • the + first value is for hue and can go from 0 to 359
  • the + second value is for saturation and go from 0% + to 100%
  • the third value is for luminosity + and go from 0% to 100%
" + output:
Hello + world
+ - is_default: false + title: 'outline-color: hsla(14, 100%, 53%, 0.6);' + description: "

You can use hsl()a color codes:

  • the + first 3 values are for hsl
  • the 4th value is for the alpha + channel and defines the opacity of the color

The alpha value can + go from zero 0 (transparent) to one 1 (opaque).

" + output:
Hello + world
+- title: outline-style + is_shorthand: false + description: "

Defines the style of the element's outlines.

" + styles: + - ".outline-style { padding: 1em;outline-width: 4px; }" + - "#outline-style-none{ outline-style:none;}" + - "#outline-style-dotted{ outline-style:dotted;}" + - "#outline-style-dashed{ outline-style:dashed;}" + - "#outline-style-solid{ outline-style:solid;}" + - "#outline-style-double{ outline-style:double;}" + - "#outline-style-groove{ outline-style:groove;}" + actions: [] + examples: + - is_default: true + title: 'outline-style: none;' + description: "

Removes the element's outlines.

" + output:
Hello + world
+ - is_default: false + title: 'outline-style: dotted;' + description: "

Turns the outline into a sequence of dots.

" + output:
Hello + world
+ - is_default: false + title: 'outline-style: dashed;' + description: "

Turns the outline into a sequence of dashes.

" + output:
Hello + world
+ - is_default: false + title: 'outline-style: solid;' + description: "

Turns the outline into a solid line.

" + output:
Hello + world
+ - is_default: false + title: 'outline-style: double;' + description: "

Splits the outline into two lines.

" + output:
Hello + world
+ - is_default: false + title: 'outline-style: groove;' + description: "

Sets an inset style to the outlines.

" + output:
Hello + world
+- title: outline-width + is_shorthand: false + description: "

Defines the width of the element's outlines.

" + styles: + - ".outline-width { outline-style: solid; }" + - "#outline-width-medium{ outline-width:medium;}" + - "#outline-width-1px{ outline-width:1px;}" + actions: [] + examples: + - is_default: true + title: 'outline-width: medium;' + description: "

Defines the width of all outlines to medium.

" + output:
Hello + world
+ - is_default: false + title: 'outline-width: 1px;' + description: "

Defines the width of all outlines to 1px.

" + output:
Hello + world
+- title: outline + is_shorthand: true + description:

Shorthand property for outline-width outline-style + and outline-color.

+ styles: + - "#outline-4px-dotted-red{ outline:4px dotted red;}" + - "#outline-2px-solid{ outline:2px solid;}" + actions: [] + examples: + - is_default: false + title: 'outline: 4px dotted red;' + description: "

The order is important:

  • width
  • style
  • color
" + output:
Hello + world
+ - is_default: false + title: 'outline: 2px solid;' + description: "

Only the color is optional. If you + omit it, the color applied will be the color of the text.

" + output:
Hello + world
+- title: overflow-wrap + is_shorthand: false + description: "

Defines if words should break when reaching the end of a line.

" + styles: + - '.overflow-wrap { font-family: "Source Code Pro", monospace;width: 18em; }' + - "#overflow-wrap-normal{ overflow-wrap:normal;}" + - "#overflow-wrap-break-word{ overflow-wrap:break-word;}" + actions: [] + examples: + - is_default: true + title: 'overflow-wrap: normal;' + description: "

Words with no space will not break. Sequences + of uninterrupted characters will be displayed on a single line.

" + output:
Thequickbrownfoxjumpsoverthelazydog
+ - is_default: false + title: 'overflow-wrap: break-word;' + description: "

Words with no space will break as soon as they + reach the end of a line.

" + output:
Thequickbrownfoxjumpsoverthelazydog
+- title: overflow-x + is_shorthand: false + description: "

Defines how overflowing content on the horizontal axis is displayed.

" + styles: + - ".overflow-x .block { white-space: nowrap;width: 200px; }" + - "#overflow-x-visible .block { overflow-x: visible; }" + - "#overflow-x-hidden .block { overflow-x: hidden; }" + - "#overflow-x-scroll .block { overflow-x: scroll; }" + - "#overflow-x-auto .block { overflow-x: auto; }" + actions: [] + examples: + - is_default: true + title: 'overflow-x: visible;' + description: "

The overflowing content is visible, while the + element itself stays at the specified width.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ - is_default: false + title: 'overflow-x: hidden;' + description: "

The overflowing content is hidden and can not + be accessed.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ - is_default: false + title: 'overflow-x: scroll;' + description: "

The overflowing content is accessible thanks to a horizontal + scrollbar.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ - is_default: false + title: 'overflow-x: auto;' + description: "

The browser decides whether to display a horizontal scrollbar + or not.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+- title: overflow-y + is_shorthand: false + description: "

Defines how overflowing content on the vertical axis is displayed.

" + styles: + - ".overflow-y .block { height: 80px;width: 240px; }" + - "#overflow-y-visible .block { overflow-y: visible; }" + - "#overflow-y-hidden .block { overflow-y: hidden; }" + - "#overflow-y-scroll .block { overflow-y: scroll; }" + - "#overflow-y-auto .block { overflow-y: auto; }" + actions: [] + examples: + - is_default: true + title: 'overflow-y: visible;' + description: "

The overflowing content is visible, while the + element itself stays at the specified height.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut.

+ - is_default: false + title: 'overflow-y: hidden;' + description: "

The overflowing content is hidden and can not + be accessed.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut.

+ - is_default: false + title: 'overflow-y: scroll;' + description: "

The overflowing content is accessible thanks to a vertical + scrollbar.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut.

+ - is_default: false + title: 'overflow-y: auto;' + description: "

The browser decides whether to display a vertical scrollbar or + not.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut.

+- title: overflow + is_shorthand: false + description: "

Defines how overflowing content on both horizontal and vertical + axis is displayed.

" + styles: + - ".overflow { height: 120px;overflow: hidden;padding: 0; }" + - ".overflow .block { height: 80px;width: 240px; }.overflow .block span { display: + block;white-space: nowrap; }" + - "#overflow-visible .block { overflow: visible; }" + - "#overflow-hidden .block { overflow: hidden; }" + - "#overflow-scroll .block { overflow: scroll; }" + - "#overflow-auto .block { overflow: auto; }" + actions: [] + examples: + - is_default: true + title: 'overflow: visible;' + description: "

The overflowing content is visible, while the + element itself stays at the specified height.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam + semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+ - is_default: false + title: 'overflow: hidden;' + description: "

The overflowing content is hidden and can not + be accessed.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam + semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+ - is_default: false + title: 'overflow: scroll;' + description: "

The overflowing content is accessible thanks to a vertical + scrollbar.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam + semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+ - is_default: false + title: 'overflow: auto;' + description: "

The browser decides whether to display a vertical scrollbar or + not.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam + semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum + volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas + imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.Pellentesque + interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin + felis neque sit amet erat.

+- title: padding-bottom + is_shorthand: false + description: "

Defines the space inside the element, on the bottom + side.

" + styles: + - ".padding-bottom { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".padding-bottom .block { border-radius: 0;padding: 0; }.padding-bottom .block.is-alpha + { position: relative; }.padding-bottom .box { bottom: 0;left: 0;position: absolute;right: + 0; }" + - "#padding-bottom-0 .box { display: none; }" + - '#padding-bottom-50px .block.is-alpha { padding-bottom: 50px; }#padding-bottom-50px + .box { height: 50px; }#padding-bottom-50px .box:before { content: "50px"; }' + - '#padding-bottom-7em .block.is-alpha { padding-bottom: 7em; }#padding-bottom-7em + .box { height: 7em; }#padding-bottom-7em .box:before { content: "7em"; }' + - '#padding-bottom-30 .block.is-alpha { padding-bottom: 30%; }#padding-bottom-30 + .box { bottom: 1.2em;height: 60px;transform: rotate(-90deg) translateY(60px);transform-origin: + bottom left;width: 30%; }#padding-bottom-30 .box:before { content: "30%"; }' + actions: [] + examples: + - is_default: true + title: 'padding-bottom: 0;' + description: "

Removes any padding on the bottom.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-bottom: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-bottom: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-bottom: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the element.

" + output:
First item
Target +
Third item
+- title: padding-left + is_shorthand: false + description: "

Defines the space inside the element, on the left + side.

" + styles: + - ".padding-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".padding-left .block { border-radius: 0;padding-left: 0; }.padding-left .block.is-alpha + { position: relative; }.padding-left .box { bottom: 0;left: 0;position: absolute;top: + 0; }" + - "#padding-left-0 .box { display: none; }" + - '#padding-left-50px .block.is-alpha { padding-left: 50px; }#padding-left-50px + .box { width: 50px; }#padding-left-50px .box:before { content: "50px"; }' + - '#padding-left-7em .block.is-alpha { padding-left: 7em; }#padding-left-7em .box + { width: 7em; }#padding-left-7em .box:before { content: "7em"; }' + - '#padding-left-30 .block.is-alpha { padding-left: 30%; }#padding-left-30 .box + { width: 30%; }#padding-left-30 .box:before { content: "30%"; }' + actions: [] + examples: + - is_default: true + title: 'padding-left: 0;' + description: "

Removes any padding on the left.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-left: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-left: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-left: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the element.

" + output:
First item
Target +
Third + item
+- title: padding-right + is_shorthand: false + description: "

Defines the space inside the element, on the right + side.

" + styles: + - ".padding-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".padding-right .block { border-radius: 0;padding-right: 0;text-align: right; + }.padding-right .block.is-alpha { position: relative; }.padding-right .box { bottom: + 0;right: 0;position: absolute;top: 0; }" + - "#padding-right-0 .box { display: none; }" + - '#padding-right-50px .block.is-alpha { padding-right: 50px; }#padding-right-50px + .box { width: 50px; }#padding-right-50px .box:before { content: "50px"; }' + - '#padding-right-7em .block.is-alpha { padding-right: 7em; }#padding-right-7em + .box { width: 7em; }#padding-right-7em .box:before { content: "7em"; }' + - '#padding-right-30 .block.is-alpha { padding-right: 30%; }#padding-right-30 .box + { width: 30%; }#padding-right-30 .box:before { content: "30%"; }' + actions: [] + examples: + - is_default: true + title: 'padding-right: 0;' + description: "

Removes any padding on the right.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-right: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-right: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-right: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the element.

" + output:
First item
Target +
Third + item
+- title: padding-top + is_shorthand: false + description: "

Defines the space inside the element, on the top + side.

" + styles: + - ".padding-top { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding: + 0; }" + - ".padding-top .block { border-radius: 0;padding: 0; }.padding-top .block.is-alpha + { position: relative; }.padding-top .box { left: 0;position: absolute;right: 0;top: + 0; }" + - "#padding-top-0 .box { display: none; }" + - '#padding-top-50px .block.is-alpha { padding-top: 50px; }#padding-top-50px .box + { height: 50px; }#padding-top-50px .box:before { content: "50px"; }' + - '#padding-top-7em .block.is-alpha { padding-top: 7em; }#padding-top-7em .box { + height: 7em; }#padding-top-7em .box:before { content: "7em"; }' + - '#padding-top-30 .block.is-alpha { padding-top: 30%; }#padding-top-30 .box { height: + 60px;top: 1.2em;transform: rotate(-90deg) translateX(-100%);transform-origin: + top left;width: 30%; }#padding-top-30 .box:before { content: "30%"; }' + actions: [] + examples: + - is_default: true + title: 'padding-top: 0;' + description: "

Removes any padding on the top.

" + output:
First item
Target
Third item
+ - is_default: false + title: 'padding-top: 50px;' + description: "

You can use pixel values.

" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-top: 7em;' + description: "

You can use (r)em values.

The value is + relative to the font size:

  • em: + relative to the element's current font size
  • rem: + relative to <html> the root element's + font size
" + output:
First item
Target +
Third + item
+ - is_default: false + title: 'padding-top: 30%;' + description: "

You can use percentage values.
The percentage + is based on the width of the element.

" + output:
First item
Target +
Third item
+- title: padding + is_shorthand: true + description:

Shorthand property for padding-top padding-right + padding-bottom and padding-left.

+ styles: + - ".padding { background: #05ffb0;padding: 0; }" + - ".padding .block { padding: 0; }.padding .square { align-items: center;background: + rgba(0,0,0,0.3);border-radius: 0;display: flex;height: auto;justify-content: center;width: + auto; }.padding .container { align-items: stretch;display: flex; }.padding .block.is-alpha + { flex-grow: 1;flex-shrink: 1; }" + - "#padding-0 .box { display: none; }" + - '#padding-30px .square.is-top { height: 30px; }#padding-30px .square.is-top:before + { content: "30px"; }#padding-30px .square.is-bottom { height: 30px; }#padding-30px + .square.is-bottom:before { content: "30px"; }#padding-30px .square.is-left:before + { content: "30px";width: 30px; }#padding-30px .square.is-right:before { content: + "30px";width: 30px; }' + - '#padding-30px-60px .square.is-top { height: 30px; }#padding-30px-60px .square.is-top:before + { content: "30px"; }#padding-30px-60px .square.is-bottom { height: 30px; }#padding-30px-60px + .square.is-bottom:before { content: "30px"; }#padding-30px-60px .square.is-left:before + { content: "60px";width: 60px; }#padding-30px-60px .square.is-right:before { content: + "60px";width: 60px; }' + - '#padding-30px-60px-45px .square.is-top { height: 30px; }#padding-30px-60px-45px + .square.is-top:before { content: "30px"; }#padding-30px-60px-45px .square.is-bottom + { height: 45px; }#padding-30px-60px-45px .square.is-bottom:before { content: "45px"; + }#padding-30px-60px-45px .square.is-left:before { content: "60px";width: 60px; + }#padding-30px-60px-45px .square.is-right:before { content: "60px";width: 60px; + }' + - '#padding-30px-60px-45px-85px .square.is-top { height: 30px; }#padding-30px-60px-45px-85px + .square.is-top:before { content: "30px"; }#padding-30px-60px-45px-85px .square.is-bottom + { height: 45px; }#padding-30px-60px-45px-85px .square.is-bottom:before { content: + "45px"; }#padding-30px-60px-45px-85px .square.is-left:before { content: "85px";width: + 85px; }#padding-30px-60px-45px-85px .square.is-right:before { content: "60px";width: + 60px; }' + actions: [] + examples: + - is_default: true + title: 'padding: 0;' + description: "

Removes all paddings.

" + output:
Target
+ - is_default: false + title: 'padding: 30px;' + description: "

When using 1 value, the padding is set for all + 4 sides.

" + output:
Target
+ - is_default: false + title: 'padding: 30px 60px;' + description: "

When using 2 values:

  • the first + value is for top/bottom
  • the second + value is for right/left

To remember the order + think about the values you haven't defined.

If you enter + 2 values (top/right), you omit setting bottom and + left. Because bottom is the vertical counterpart of top, it will use top’s value. + And because left is the horizontal counterpart of right, it will use right’s + value.

" + output:
Target
+ - is_default: false + title: 'padding: 30px 60px 45px;' + description: "

When using 3 values:

  • the first + value is for top
  • the second value + is for right/left
  • the third value + is for bottom

To remember the order + think about the values you haven't defined.

If you enter + 3 values (top/right/bottom), you omit setting left. As right’s + counterpart, it will use its value.

" + output:
Target
+ - is_default: false + title: 'padding: 30px 60px 45px 85px;' + description: "

When using 4 values:

  • the first + value is for top
  • the second value + is for right
  • the third value is for + bottom
  • the fourth value is for left

To + remember the order, start at the top and go + clockwise.

" + output:
Target
+- title: pointer-events + is_shorthand: false + description: "

Defines if the element reacts to pointer events or not.

" + styles: + - ".pointer-events .block.is-container { cursor: default;position: relative; }.pointer-events + .block.is-alpha { cursor: pointer;opacity: 0.7;padding: 0.4em 0.5em;position: + absolute; }.pointer-events .block.is-alpha:hover { background: #310736;color: + #fff;opacity: 1; }" + - "#pointer-events-auto{ pointer-events:auto;}" + - "#pointer-events-none{ pointer-events:none;}" + - "#pointer-events-none .block { pointer-events: none; }" + actions: [] + examples: + - is_default: true + title: 'pointer-events: auto;' + description: "

The element reacts to pointer events, like :hover + or click.

" + output:

Hover me

Lorem ipsum + dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, + at pulvinar felis blandit.
+ - is_default: false + title: 'pointer-events: none;' + description: "

The element does not react to pointer events, + like :hover or click. As a result, elements that are + behind are accessible.

" + output:

Hover me

Lorem ipsum + dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, + at pulvinar felis blandit.
+- title: position + is_shorthand: false + description: "

Defines the position behavior of the element.

" + styles: + - ".position { background: #310736;color: #fff;height: 200px;position: relative; + }" + - ".position .block.is-alpha { margin-top: 1em; }.position .block.is-pink { position: + absolute;right: 5px;top: 5px; }" + - "#position-relative .block.is-alpha { position: relative; }" + - "#position-absolute .block.is-alpha { left: 0;margin-top: 0;position: absolute;top: + 0;width: 280px; }" + - "#position-fixed.is-fixed .block.is-alpha { position: fixed;z-index: 10000; }" + - "#position-fixed .block.is-alpha { left: auto;right: 0;margin-top: 0;position: + absolute;top: 0;width: 280px; }" + actions: [] + examples: + - is_default: true + title: 'position: static;' + description: "

The element will remain in the natural flow + of the page.

As a result, it will not act as anchor + point for the absolutely positioned yellow block.

Also, it will not + react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index
" + output: '

Ancestor + container

Target element
position: + static
Child element
position: absolute
right: + 5px
top: 5px
' + - is_default: false + title: 'position: relative;' + description: "

The element will remain in the natural flow + of the page.

It also makes the element positioned: it + will act as an anchor point for the absolutely positioned yellow block.

+

Also, it will react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index
" + output: '

Ancestor + container

Target element
position: + relative
Child element
position: absolute
right: + 5px
top: 5px
' + - is_default: false + title: 'position: absolute;' + description: "

The element will not remain in the natural flow + of the page. It will position itself according to the closest positioned + ancestor.

Because it's positioned, it will + act as an anchor point for the absolutely positioned yellow block.

Also, + it will react to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index
" + output: '

Ancestor + container

Target element
position: + absolute
left: 0
top: 0
Child element
right: + 5px
top: 5px
' + - is_default: false + title: 'position: fixed;' + description: "

The element will not remain in the natural flow + of the page. It will position itself according to the viewport.

+

Because it's positioned, it will act as an anchor point + for the absolutely positioned yellow block.

Also, it will react + to the following properties:

  • top
  • bottom
  • left
  • right
  • z-index
" + output: '

Ancestor + container

Target element
position: + fixed
right: 0
top: 0
Child element
position: + absolute
right: 5px
top: 5px
' +- title: resize + is_shorthand: false + description: "

Defines if the textarea is resizable or not.

" + styles: + - '.resize textarea { background: #fff;border: 1px solid hsl(0, 0%, 50%);color: + hsl(0, 0%, 20%);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + "Helvetica", "Arial", sans-serif;height: 10em;padding: 0.8em 1em;width: 25em; + }' + - "#resize-none{ resize:none;}" + - "#resize-none textarea { resize: none; }" + - "#resize-horizontal{ resize:horizontal;}" + - "#resize-horizontal textarea { resize: horizontal; }" + - "#resize-vertical{ resize:vertical;}" + - "#resize-vertical textarea { resize: vertical; }" + - "#resize-both{ resize:both;}" + - "#resize-both textarea { resize: both; }" + actions: [] + examples: + - is_default: true + title: 'resize: none;' + description: "

The textarea is not resizable.

" + output:
+ - is_default: false + title: 'resize: horizontal;' + description: "

The textarea is resizable horizontally.

" + output:
+ - is_default: false + title: 'resize: vertical;' + description: "

The textarea is resizable vertically.

" + output:
+ - is_default: false + title: 'resize: both;' + description: "

The textarea is resizable both horizontally + and vertically.

" + output:
+- title: text-align + is_shorthand: false + description: "

Defines how the text content of the element is horizontally aligned.

" + styles: + - "#text-align-left{ text-align:left;}" + - "#text-align-right{ text-align:right;}" + - "#text-align-center{ text-align:center;}" + - "#text-align-justify{ text-align:justify;}" + actions: [] + examples: + - is_default: false + title: 'text-align: left;' + description: "

The text content is aligned to the left.

" + output:

Hello world
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. + Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

+ - is_default: false + title: 'text-align: right;' + description: "

The text content is aligned to the right.

" + output:

Hello world
Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. + Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

+ - is_default: false + title: 'text-align: center;' + description: "

The text content is centered.

" + output:

Hello world
Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar + felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus + ut.

+ - is_default: false + title: 'text-align: justify;' + description: "

The text content is justified.

" + output:

Hello world
Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar + felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus + ut.

+- title: text-decoration + is_shorthand: false + description: "

Defines how the text content of the element is decorated.

" + styles: + - "#text-decoration-none{ text-decoration:none;}" + - "#text-decoration-underline{ text-decoration:underline;}" + actions: [] + examples: + - is_default: true + title: 'text-decoration: none;' + description: "

Removes any text decoration.

" + output:
Hello + world
+ - is_default: false + title: 'text-decoration: underline;' + description: "

Underlines the text content.

" + output:
Hello + world
+- title: text-indent + is_shorthand: false + description: "

Defines the indentation of the element's first line of text.

" + styles: + - "#text-indent-0{ text-indent:0;}" + - "#text-indent-40px{ text-indent:40px;}" + - "#text-indent--2em{ text-indent:-2em;}" + actions: [] + examples: + - is_default: true + title: 'text-indent: 0;' + description: "

The text is not indented.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper + diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus + diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla + luctus felis hendrerit sit amet.

+ - is_default: false + title: 'text-indent: 40px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

Notice how only + the first line is indented.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.

+ - is_default: false + title: 'text-indent: -2em;' + description: "

You can also use negative values.

" + output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.

+- title: text-overflow + is_shorthand: false + description: "

Defines how the hidden text content behaves if it's overflowing.

" + styles: + - ".text-overflow { display: flex; }" + - ".text-overflow .block { overflow: hidden;white-space: nowrap;width: 5em; }" + - "#text-overflow-clip{ text-overflow:clip;}" + - "#text-overflow-clip .block { text-overflow: clip; }" + - "#text-overflow-ellipsis{ text-overflow:ellipsis;}" + - "#text-overflow-ellipsis .block { text-overflow: ellipsis; }" + actions: [] + examples: + - is_default: true + title: 'text-overflow: clip;' + description: "

The text content is clipped and not accessible.

" + output:

Hello world

+ - is_default: false + title: 'text-overflow: ellipsis;' + description: "

The overflowing content is replaced by an ellipsis: + …

" + output:

Hello world

+- title: text-shadow + is_shorthand: false + description: "

Defines the shadow of the text content.

" + styles: + - "#text-shadow-none{ text-shadow:none;}" + - "#text-shadow-2px-6px{ text-shadow:2px 6px;}" + - "#text-shadow-2px-6px-red{ text-shadow:2px 6px red;}" + - "#text-shadow-2px-4px-10px-red{ text-shadow:2px 4px 10px red;}" + actions: [] + examples: + - is_default: true + title: 'text-shadow: none;' + description: "

The text content has no shadow.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+ - is_default: false + title: 'text-shadow: 2px 6px;' + description: "

You need at least two values:

  • the + first is the horizontal offset
  • the second is the vertical + offset

The shadow color will be inherited from the text color.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+ - is_default: false + title: 'text-shadow: 2px 6px red;' + description:

You can define a color as the last value.

+

As with color, + you can use color names, hexadecimal, rgb, hsl...

+ output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+ - is_default: false + title: 'text-shadow: 2px 4px 10px red;' + description: "

The optional third value defines the blur + of the shadow.

The color will be diffused across 10px in this example, + from opaque to transparent.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+- title: text-transform + is_shorthand: false + description: "

Defines how the text content should be transformed.

" + styles: + - "#text-transform-none{ text-transform:none;}" + - "#text-transform-capitalize{ text-transform:capitalize;}" + - "#text-transform-uppercase{ text-transform:uppercase;}" + - "#text-transform-lowercase{ text-transform:lowercase;}" + actions: [] + examples: + - is_default: true + title: 'text-transform: none;' + description: "

Removes any text transformation: the text will appear the same + as in the HTML code.

" + output:
Hello + world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.
+ - is_default: false + title: 'text-transform: capitalize;' + description: "

Turns the first letter of each word into a capital + letter.

" + output:
Hello + world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.
+ - is_default: false + title: 'text-transform: uppercase;' + description: "

Turns all letters into capital + letters.

" + output:
Hello + world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.
+ - is_default: false + title: 'text-transform: lowercase;' + description: "

Turns all letters into lowercase + letters.

" + output:
Hello + world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat + tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, + fringilla luctus felis hendrerit sit amet.
+- title: top + is_shorthand: false + description: "

Defines the position of the element according to its top edge.

" + styles: + - ".top { background: #310736;height: 200px;position: relative; }" + - ".top p { color: #fff; }.top .natural { width: 200px; }.top .actual { animation-direction: + alternate;animation-duration: 2s;animation-iteration-count: infinite;position: + absolute;width: 200px; }" + - "#top-auto{ top:auto;}" + - "#top-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }" + - "#top-20px{ top:20px;}" + - "#top-20px .actual { animation-name: fadeIn;position: relative;top: 20px;transform: + translateY(-100%); }" + - "#top-0{ top:0;}" + - "#top-0 .actual { top: 0; }" + actions: [] + examples: + - is_default: true + title: 'top: auto;' + description: "

The element will remain in its natural position.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'top: 20px;' + description: "

If the element is in position relative, the + element will move upwards by the amount defined by the top + value.

" + output:

Parent container

Natural position
Actual position
+ - is_default: false + title: 'top: 0;' + description: "

If the element is in position absolute, the + element will position itself from the top of the first positioned ancestor.

" + output:

Parent container

Natural position
Actual position
+- title: transform-origin + is_shorthand: false + description:

Defines the origin for transformations defined by the transform property.

+ styles: + - ".transform-origin.is-animated .block.is-alpha { animation-name: rotateFull; }" + - ".transform-origin .block { height: 100px;width: 100px; }.transform-origin .block.is-container + { padding: 0;position: relative; }.transform-origin .block.is-alpha { align-items: + center;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function: + linear;display: flex;justify-content: center; }.transform-origin .origin { background: + hsl(348, 100%, 61%);border-radius: 290486px;height: 10px;margin: -5px 0 0 -5px;position: + absolute;width: 10px; }" + - "#transform-origin-50-50-0{ transform-origin:50% 50% 0;}" + - "#transform-origin-50-50-0 .origin { left: 50%;top: 50%; }" + - "#transform-origin-20px-70{ transform-origin:20px 70%;}" + - "#transform-origin-20px-70 .origin { left: 20px;top: 70%; }#transform-origin-20px-70 + .block.is-alpha { transform-origin: 20px 70%; }" + - "#transform-origin-top-right{ transform-origin:top right;}" + - "#transform-origin-top-right .origin { left: 100%;top: 0; }#transform-origin-top-right + .block.is-alpha { transform-origin: top right; }" + - "#transform-origin-center-bottom{ transform-origin:center bottom;}" + - "#transform-origin-center-bottom .origin { left: 50%;top: 100%; }#transform-origin-center-bottom + .block.is-alpha { transform-origin: center bottom; }" + actions: + - + examples: + - is_default: true + title: 'transform-origin: 50% 50% 0;' + description: "

The transform origin is in the center of the + element.

" + output:

Hello + world

+ - is_default: false + title: 'transform-origin: 20px 70%;' + description: "

You can use 2 values:

  • the first + value is the horizontal axis
  • the second is the vertical + axis
" + output:

Hello + world

+ - is_default: false + title: 'transform-origin: top right;' + description: "

You can use a combination of position keywords: + center, top, bottom, left + and right.

" + output:

Hello + world

+ - is_default: false + title: 'transform-origin: center bottom;' + description: "

When using keywords, you can change the order + of the axis, as long as each keywords is unambiguous.

" + output:

Hello + world

+- title: transform + is_shorthand: false + description: "

Defines how the element is transformed.

" + styles: + - ".transform { display: flex; }" + - ".transform .natural { height: 75px;position: absolute;width: 75px; }.transform + .actual { height: 75px;position: relative;width: 75px; }" + - '#transform-none .actual:before { content: "no transform"; }' + - '#transform-translatex40px .actual { transform: translateX(40px); }#transform-translatex40px + .actual:before { content: "translateX"; }' + - '#transform-translatey20px .actual { transform: translateY(20px); }#transform-translatey20px + .actual:before { content: "translateY"; }' + - '#transform-translatey100 .actual { transform: translateY(100%); }#transform-translatey100 + .actual:before { content: "translateY"; }' + - '#transform-translate20px--10 .actual { transform: translate(20px, -10%); }#transform-translate20px--10 + .actual:before { content: "translate"; }' + - '#transform-scalex15 .actual { transform: scaleX(1.5); }#transform-scalex15 .actual:before + { content: "scaleX"; }' + - '#transform-scaley04 .actual { transform: scaleY(0.4); }#transform-scaley04 .actual:before + { content: "scaleY"; }' + - '#transform-scaley-2 .actual { transform: scaleY(-2); }#transform-scaley-2 .actual:before + { content: "scaleY"; }' + - '#transform-scale08-08 .actual { transform: scale(0.8, 0.8); }#transform-scale08-08 + .actual:before { content: "scale"; }' + - '#transform-rotate45deg .actual { transform: rotate(45deg); }#transform-rotate45deg + .actual:before { content: "rotate"; }' + - '#transform-skewx15deg .actual { transform: skewX(15deg); }#transform-skewx15deg + .actual:before { content: "skewX"; }' + - '#transform-skewy45deg .actual { transform: skewY(45deg); }#transform-skewy45deg + .actual:before { content: "skewY"; }' + - '#transform-skew10deg--20deg .actual { transform: skew(10deg, -20deg); }#transform-skew10deg--20deg + .actual:before { content: "skew"; }' + - '#transform-rotate5deg-scale11-11-translate-20-30px .actual { transform: rotate(5deg) + scale(1.1, 1.1) translate(-20%, 30px); }#transform-rotate5deg-scale11-11-translate-20-30px + .actual:before { content: "multi"; }' + actions: [] + examples: + - is_default: true + title: 'transform: none;' + description: "

Removes any transformation.

" + output:

Natural + position

+ - is_default: false + title: 'transform: translateX(40px);' + description: "

Move the element on the horizontal axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: translateY(20px);' + description: "

Move the element on the vertical axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: translateY(100%);' + description: "

You can use percentage values: the percentage + is relative to the element itself, and not the parent.

" + output:

Natural position

+ - is_default: false + title: 'transform: translate(20px, -10%);' + description: "

You can use translate() with two values:

+
  • the first value is for the horizontal axis
  • the + second value is for the vertical axis
" + output:

Natural position

+ - is_default: false + title: 'transform: scaleX(1.5);' + description: "

Scale the element on the horizontal axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: scaleY(0.4);' + description: "

Scale the element on the vertical axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: scaleY(-2);' + description: "

You can use negative values: it will invert + the element.

" + output:

Natural position

+ - is_default: false + title: 'transform: scale(0.8, 0.8);' + description: "

You can use scale() with two values:

+
  • the first value is for the horizontal axis
  • the + second value is for the vertical axis

By using + the same value for both, you can scale proportionally.

" + output:

Natural position

+ - is_default: false + title: 'transform: rotate(45deg);' + description: "

Rotate the element.

You can use:

  • degrees + from 0 to 360deg
  • gradians + from 0 to 400grad
  • radians + from 0 to 2πrad
  • turns from + 0 to 1turn
" + output:

Natural position

+ - is_default: false + title: 'transform: skewX(15deg);' + description: "

Skew the element on the horizontal axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: skewY(45deg);' + description: "

Skew the element on the vertical axis.

" + output:

Natural position

+ - is_default: false + title: 'transform: skew(10deg, -20deg);' + description: "

You can use skew() with two values:

+
  • the first value is for the horizontal axis
  • the + second value is for the vertical axis
" + output:

Natural position

+ - is_default: false + title: 'transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);' + description: "

You can combine multiple transformations by + separating them with a space.

" + output:

Natural position

+- title: transition-delay + is_shorthand: false + description: "

Defines how long the transition has to wait before starting.

" + styles: + - ".transition-delay { padding: 0; }" + - ".transition-delay:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: + translateX(200%); }" + - ".transition-delay .square { transition-duration: 1s;transition-timing-function: + linear;transition-property: background transform; }" + - "#transition-delay-12s .square { transition-delay: 1.2s; }" + - "#transition-delay-2400ms .square { transition-delay: 2400ms; }" + - "#transition-delay--500ms .square { transition-delay: -500ms; }" + actions: [] + examples: + - is_default: true + title: 'transition-delay: 0s;' + description: "

The transition will wait zero seconds, and thus + start right away.

" + output:

Hover me

+ - is_default: false + title: 'transition-delay: 1.2s;' + description: "

You can use decimal values in seconds + with the keyword s.

" + output:

Hover me

+ - is_default: false + title: 'transition-delay: 2400ms;' + description: "

You can use milliseconds instead of seconds, + with the keyword ms.

" + output:

Hover me

+ - is_default: false + title: 'transition-delay: -500ms;' + description: "

You can use negative values: the transition + will start as if it had already been playing for 500ms.

" + output:

Hover me

+- title: transition-duration + is_shorthand: false + description: "

Defines how long the transition lasts.

" + styles: + - ".transition-duration { padding: 0; }" + - ".transition-duration:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: + translateX(200%); }" + - ".transition-duration .square { transition-timing-function: linear;transition-property: + background transform; }" + - "#transition-duration-0s .square { transition-duration: 0s; }" + - "#transition-duration-12s .square { transition-duration: 1.2s; }" + - "#transition-duration-2400ms .square { transition-duration: 2400ms; }" + actions: [] + examples: + - is_default: true + title: 'transition-duration: 0s;' + description: "

The transition will last zero seconds, and is + thus instant.

" + output:

Hover me

+ - is_default: false + title: 'transition-duration: 1.2s;' + description: "

You can use decimal values in seconds + with the keyword s.

" + output:

Hover me

+ - is_default: false + title: 'transition-duration: 2400ms;' + description: "

You can use milliseconds instead of seconds, + with the keyword ms.

" + output:

Hover me

+- title: transition-property + is_shorthand: false + description: "

Defines which properties will transition.

" + styles: + - ".transition-property { padding: 0; }" + - ".transition-property:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: + translateX(200%); }" + - ".transition-property .square { transition-duration: 1s;transition-timing-function: + linear; }" + - "#transition-property-all .square { transition-property: all; }" + - "#transition-property-none .square { transition-property: none; }" + - "#transition-property-background .square { transition-property: background; }" + - "#transition-property-color .square { transition-property: color; }" + - "#transition-property-transform .square { transition-property: transform; }" + actions: [] + examples: + - is_default: true + title: 'transition-property: all;' + description:

The element will transition all properties:

+ + output:

Hover me

+ - is_default: false + title: 'transition-property: none;' + description: "

The element will transition no property: the + transition is thus instant.

" + output:

Hover me

+ - is_default: false + title: 'transition-property: background;' + description: "

The element will only transtion the background + property.

" + output:

Hover me

+ - is_default: false + title: 'transition-property: color;' + description: "

The element will only transtion the color property.

" + output:

Hover me

+ - is_default: false + title: 'transition-property: transform;' + description: "

The element will only transtion the transform + property.

" + output:

Hover me

+- title: transition-timing-function + is_shorthand: false + description: "

Defines how the values between the start and the end + of the transition are calculated.

" + styles: + - ".transition-timing-function { padding: 0; }" + - ".transition-timing-function:hover .square { background: hsl(348, 100%, 61%);color: + #fff;transform: translateX(200%); }" + - ".transition-timing-function .square { transition-duration: 1s;transition-property: + all; }" + - "#transition-timing-function-ease .square { transition-timing-function: ease; + }" + - "#transition-timing-function-ease-in .square { transition-timing-function: ease-in; + }" + - "#transition-timing-function-ease-out .square { transition-timing-function: ease-out; + }" + - "#transition-timing-function-ease-in-out .square { transition-timing-function: + ease-in-out; }" + - "#transition-timing-function-linear .square { transition-timing-function: linear; + }" + - "#transition-timing-function-step-start .square { transition-timing-function: + step-start; }" + - "#transition-timing-function-step-end .square { transition-timing-function: step-end; + }" + - "#transition-timing-function-steps4-end .square { transition-timing-function: + steps(4, end); }" + actions: [] + examples: + - is_default: true + title: 'transition-timing-function: ease;' + description: "

The transition starts slowly, accelerates in the middle, and + slows down at the end.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: ease-in;' + description: "

The transition starts slowly, and accelerates gradually until + the end.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: ease-out;' + description: "

The transition starts quickly, and decelerates gradually until + the end.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: ease-in-out;' + description: "

Like ease, but more pronounced.

The transition + starts quickly, and decelerates gradually until the end.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: linear;' + description: "

The transition has a *constant speed.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: step-start;' + description: "

The transition jumps instantly to the final + state.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: step-end;' + description: "

The transition stays at the initial state until + the end, when it instantly jumps to the final state.

" + output:

Hover me

+ - is_default: false + title: 'transition-timing-function: steps(4, end);' + description: "

By using steps() with an integer, + you can define a specific number of steps before reaching the end. + The state of the element will not vary gradually, but rather jump + from state to state in separate instants.

" + output:

Hover me

+- title: transition + is_shorthand: true + description:

Shorthand property for transition-property transition-duration transition-timing-function + and transition-delay.

Only + transition-duration is required.

+ styles: + - ".transition { padding: 0; }" + - ".transition:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform: + translateX(200%); }" + - "#transition-1s .square { transition: 1s; }" + - "#transition-1s-linear .square { transition: 1s linear; }" + - "#transition-background-1s-linear .square { transition: background 1s linear; + }" + - "#transition-background-1s-linear-500ms .square { transition: background 1s linear + 500ms; }" + - "#transition-background-4s-transform-1s .square { transition: background 4s, transform + 1s; }" + actions: [] + examples: + - is_default: false + title: 'transition: 1s;' + description: "
  • transition-duration is set + to 1s
  • transition-property defaults + to all
  • transition-timing-function defaults + to ease
  • transition-delay defaults + to 0s
" + output:

Hover me

+ - is_default: false + title: 'transition: 1s linear;' + description: "
  • transition-duration is set + to 1s
  • transition-property defaults + to all
  • transition-timing-function is set + to linear
  • transition-delay defaults + to 0s
" + output:

Hover me

+ - is_default: false + title: 'transition: background 1s linear;' + description: "
  • transition-duration is set + to 1s
  • transition-property is set + to background
  • transition-timing-function is + set to linear
  • transition-delay + defaults to 0s
" + output:

Hover me

+ - is_default: false + title: 'transition: background 1s linear 500ms;' + description: "
  • transition-duration is set + to 1s
  • transition-property is set + to background
  • transition-timing-function is + set to linear
  • transition-delay + is set to 500ms
" + output:

Hover me

+ - is_default: false + title: 'transition: background 4s, transform 1s;' + description: "

You can combine multiple properties with their + own transition duration.

" + output:

Hover me

+- title: white-space + is_shorthand: false + description: "

Defines how the element's white space is handled.

" + styles: + - '.white-space { font-family: "Source Code Pro", monospace;font-size: 0.7rem;width: + 18em; }' + - "#white-space-normal{ white-space:normal;}" + - "#white-space-nowrap{ white-space:nowrap;}" + - "#white-space-pre{ white-space:pre;}" + - "#white-space-pre-wrap{ white-space:pre-wrap;}" + - "#white-space-pre-line{ white-space:pre-line;}" + actions: [] + examples: + - is_default: true + title: 'white-space: normal;' + description: "

Sequences of spaces are combined into one.
Line breaks are + ignored.
The text content is wrapped.

" + output: '
#parent + .selector ul li blockquote{ color: red; font-size: 1rem; }
' + - is_default: false + title: 'white-space: nowrap;' + description: "

Sequences of spaces are combined into one.
Line breaks are + ignored.
The text content is not wrapped and remains on + a single line.

" + output: '
#parent + .selector ul li blockquote{ color: red; font-size: 1rem; }
' + - is_default: false + title: 'white-space: pre;' + description: "

The white space is exactly preserved.

    +
  • Sequences of spaces are preserved
  • Lines break only on new lines + and <br>
" + output: '
#parent + .selector ul li blockquote{ color: red; font-size: 1rem; }
' + - is_default: false + title: 'white-space: pre-wrap;' + description: "

The white space is mostly preserved.

    +
  • Sequences of spaces are preserved
  • Lines break on new lines, <br>, + but also when reaching the end of the element
" + output: '
#parent + .selector ul li blockquote{ color: red; font-size: 1rem; }
' + - is_default: false + title: 'white-space: pre-line;' + description: "

Only new lines are preserved.

  • Sequences + of spaces are combined into one
  • Lines break on new + lines, <br>, but also when reaching the end of the element
    • +
" + output: '
#parent + .selector ul li blockquote{ color: red; font-size: 1rem; }
' +- title: width + is_shorthand: false + description: "

Defines the width of the element.

" + styles: + - "#width-auto{ width:auto;}" + - "#width-240px{ width:240px;}" + - "#width-50{ width:50%;}" + actions: [] + examples: + - is_default: true + title: 'width: auto;' + description: "

The element will automatically adjust its width + to allow its content to be displayed correctly.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+ - is_default: false + title: 'width: 240px;' + description: "

You can use numeric values like pixels, + (r)em, percentages...

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+ - is_default: false + title: 'width: 50%;' + description: "

If you use percentages, the value is relative + to the container's width.

" + output:
Lorem + ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat + pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat + gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis + hendrerit sit amet.
+- title: will-change + is_shorthand: false + description: "

Defines which properties are expected to change in the future (either + through CSS or JavaScript).

" + styles: + - "#will-change-auto{ will-change:auto;}" + - "#will-change-scroll-position{ will-change:scroll-position;}" + - "#will-change-contents{ will-change:contents;}" + - "#will-change-box-shadow{ will-change:box-shadow;}" + actions: [] + examples: + - is_default: true + title: 'will-change: auto;' + description: "

Doesn't tell the browser to optimize any + property.

" + output:
Hello + world
+ - is_default: false + title: 'will-change: scroll-position;' + description: "

Tells the browser to optimize for the element's scroll + position, as it might change in the future.

" + output:
Hello + world
+ - is_default: false + title: 'will-change: contents;' + description: "

Tells the browser to optimize for the element's contents, + as it might change in the future.

" + output:
Hello + world
+ - is_default: false + title: 'will-change: box-shadow;' + description: "

You can specify any other CSS property. For + example, this tells the browser to optimize for the element's box-shadow, + as it might change in the future.

" + output:
Hello + world
+- title: word-break + is_shorthand: false + description: "

Defines how words should break when reaching the end of a line.

" + styles: + - '.word-break { font-family: "Source Code Pro", monospace;width: 18em; }' + - "#word-break-normal{ word-break:normal;}" + - "#word-break-break-all{ word-break:break-all;}" + actions: [] + examples: + - is_default: true + title: 'word-break: normal;' + description: "

Words with no space will not break. Sequences + of uninterrupted characters will be displayed on a single line.

" + output:
Thequickbrownfoxjumpsoverthelazydog
+ - is_default: false + title: 'word-break: break-all;' + description: "

Words with no space will break as soon as they + reach the end of a line.

" + output:
Thequickbrownfoxjumpsoverthelazydog
+- title: word-spacing + is_shorthand: false + description: "

Defines the spacing between words of a block of text.

" + styles: + - "#word-spacing-normal{ word-spacing:normal;}" + - "#word-spacing-5px{ word-spacing:5px;}" + - "#word-spacing-2em{ word-spacing:2em;}" + actions: [] + examples: + - is_default: true + title: 'word-spacing: normal;' + description: "

The spacing between the characters is normal.

" + output:
The + quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'word-spacing: 5px;' + description: "

You can use pixel values.

" + output:
The + quick brown fox jumps over the lazy dog
+ - is_default: false + title: 'word-spacing: 2em;' + description: "

You can use em values: this allows the spacing + to remain relative to the font-size.

" + output:
The + quick brown fox jumps over the lazy dog
+- title: z-index + is_shorthand: false + description: "

Defines the order of the elements on the z-axis*8. + It only works on positioned** elements (anything apart from static).

" + styles: + - ".z-index { height: 100px;padding: 0; }" + - ".z-index .block { height: 100%;left: 0;position: absolute;width: 25%; }.z-index + .block.is-alpha { height: 50%;width: 100%; }.z-index .block.is-pink { height: + 60%;left: 20%;top: 20%;width: 60%; }.z-index .block.is-beta { height: 60%;left: + 40%;top: 40%;width: 60%; }.z-index .block.is-yellow { left: 70%;width: 20%; }" + - "#z-index-1 .block.is-pink { z-index: 1; }" + - "#z-index--1 .block.is-pink { z-index: -1; }" + actions: [] + examples: + - is_default: true + title: 'z-index: auto;' + description: "

The order is defined by the order in the HTML code:

+
  • first in the code = behind
  • last in the code = in front
    • +
" + output:
One
Two
Target
Three
Four
+ - is_default: false + title: 'z-index: 1;' + description: "

The z-index value is relative to the other ones. + The target element is move in front of its siblings.

" + output:
One
Two
Target
Three
Four
+ - is_default: false + title: 'z-index: -1;' + description: "

You can use negative values. The target element + is move in behind its siblings.

" + output:
One
Two
Target
Three
Four
diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html index de19112d..ea43dc26 100644 --- a/_includes/lists/main-list.html +++ b/_includes/lists/main-list.html @@ -1,19220 +1,49 @@ -
-
- -

- #align-content -

-
-

Defines how each line is aligned within a flexbox container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox items.

- -
- -
- - - - - -
-
-

- default - - align-content: stretch; -

-
-

Each line will stretch to fill the remaining space.

-

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

- -
-
- - - -
-
-
-

- - align-content: flex-start; -

-
-

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - align-content: flex-end; -

-
-

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - align-content: center; -

-
-

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - align-content: space-between; -

-
-

Each line will only fill the space it needs. The remaining space will appear between the lines.

- -
-
- - - - -
-
-
-

- - align-content: space-around; -

-
-

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

- -
-
- - - - -
- -
- -
-
- -

- #align-items -

-
-

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

- -
- -
- - - - - -
-
-

- - align-items: flex-start; -

-
-

The flexbox items are aligned at the start of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

- -
-
- - - - -
-
-
-

- - align-items: flex-end; -

-
-

The flexbox items are aligned at the end of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

- -
-
- - - - -
-
-
-

- - align-items: center; -

-
-

The flexbox items are aligned at the center of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

- -
-
- - - - -
-
-
-

- - align-items: baseline; -

-
-

The flexbox items are aligned at the baseline of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

- -
-
- - - - -
-
-
-

- - align-items: stretch; -

-
-

The flexbox items will stretch across the whole cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

- -
-
- - - - -
- -
- -
-
- -

- #align-self -

-
-

Works like align-items, but applies only to a single flexbox item, instead of all of them.

- -
- -
- - - - - -
-
-

- - align-self: flex-start; -

-
-

If the container has align-items: center and the target has align-items: flex-start, only the target will be at the start of the cross axis.

-

By default, this means it will be aligned vertically at the top.

- -
-
- - - - -
-
-
-

- - align-self: flex-end; -

-
-

If the container has align-items: center and the target has align-items: flex-end, only the target will be at the end of the cross axis.

-

By default, this means it will be aligned vertically at the bottom.

- -
-
- - - - -
-
-
-

- - align-self: center; -

-
-

If the container has align-items: flex-start and the target has align-items: center, only the target will be at the center of the cross axis.

-

By default, this means it will be vertically centered.

- -
-
- - - - - -
-
-
-

- - align-self: baseline; -

-
-

If the container has align-items: center and the target has align-items: baseline, only the target will be at the baseline of the cross axis.

-

By default, this means it will be aligned along the basline of the text.

- -
-
- - - - -
-
-
-

- - align-self: stretch; -

-
-

If the container has align-items: center and the target has align-items: stretch, only the target will stretch along the whole cross axis.

- -
-
- - - - -
- -
- -
-
- -

- #animation-delay -

-
-

Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-delay: 0s; -

-
-

The animation will wait zero seconds, and thus start right away.

- -
-
- - - -
-
-
-

- - animation-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - animation-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
-
-
-

- - animation-delay: -500ms; -

-
-

You can use negative values: the animation will start as if it had already been playing for 500ms.

- -
-
- - - -
- -
- -
-
- -

- #animation-direction -

-
-

Defines in which direction the animation is played.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-direction: normal; -

-
-

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

- -
-
- - - -
-
-
-

- - animation-direction: reverse; -

-
-

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

- -
-
- - - -
-
-
-

- - animation-direction: alternate; -

-
-

The animation is played forwards first, then backwards:

-
    -
  • starts at the first keyframe
    • -
  • stops at the last keyframe
    • -
  • starts again, but at the last keyframe
    • -
  • stops at the first keyframe
    • -
-
-
- - - -
-
-
-

- - animation-direction: alternate-reverse; -

-
-

The animation is played backwards first, then forwards:

-
    -
  • starts at the last keyframe
    • -
  • stops at the first keyframe
    • -
  • starts again, but at the first keyframe
    • -
  • stops at the last keyframe
    • -
-
-
- - - -
- -
- -
-
- -

- #animation-duration -

-
-

Defines how long the animation lasts.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-duration: 0s; -

-
-

The default value is zero seconds: the animation will simply not play.

- -
-
- - - -
-
-
-

- - animation-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - animation-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
- -
- -
-
- -

- #animation-fill-mode -

-
-

Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-fill-mode: none; -

-
-

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

- -
-
- - - -
-
-
-

- - animation-fill-mode: forwards; -

-
-

The last styles applied at the end of the animation are retained afterwards.

- -
-
- - - -
-
-
-

- - animation-fill-mode: backwards; -

-
-

The animation's styles will already be applied before the animation actually starts.

- -
-
- - - -
-
-
-

- - animation-fill-mode: both; -

-
-

The styles are applied before and after the animation plays.

- -
-
- - - -
- -
- -
-
- -

- #animation-iteration-count -

-
-

Defines how many times the animation is played.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-iteration-count: 1; -

-
-

The animation will only play once.

- -
-
- - - -
-
-
-

- - animation-iteration-count: 2; -

-
-

You can use integer values to define a specific amount of times the animation will play.

- -
-
- - - -
-
-
-

- - animation-iteration-count: infinite; -

-
-

By using the keyword infinite, the animation will play indefinitely.

- -
-
- - - -
- -
- -
-
- -

- #animation-name -

-
-

Defines which animation keyframes to use.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-name: none; -

-
-

If no animation name is specified, no animation is played.

- -
-
- - - -
-
-
-

- - animation-name: fadeIn; -

-
-

If a name is specified, the keyframes matching that name will be used.

-

For example, the fadeIn animation looks like this:

- 

@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-

- -
-
- - - -
-
-
-

- - animation-name: moveRight; -

-
-

Another example: the moveRight animation:

- 

@keyframes moveRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100px);
-  }
-}
-

- -
-
- - - -
- -
- -
-
- -

- #animation-play-state -

-
-

Defines if an animation is playing or not.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-play-state: running; -

-
-

If the animation-duration and animation-name are defined, the animation will start playing automatically.

- -
-
- - - -
-
-
-

- - animation-play-state: paused; -

-
-

The animation is set paused at the first keyframe.

-

This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.

-

In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.

- 

@keyframes fadeAndMove {
-  from {
-    opacity: 0;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-}
-

- -
-
- - - -
- -
- -
-
- -

- #animation-timing-function -

-
-

Defines how the values between the start and the end of the animation are calculated.

- -
- -
- -
-
- - - - - -
-
-

- default - - animation-timing-function: ease; -

-
-

The animation starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - animation-timing-function: ease-in; -

-
-

The animation starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - animation-timing-function: ease-out; -

-
-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - animation-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - animation-timing-function: linear; -

-
-

The animation has a *constant speed.

- -
-
- - - -
-
-
-

- - animation-timing-function: step-start; -

-
-

The animation jumps instantly to the final state.

- -
-
- - - -
-
-
-

- - animation-timing-function: step-end; -

-
-

The animation stays at the initial state until the end, when it instantly jumps to the final state.

- -
-
- - - -
-
-
-

- - animation-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

- -
-
- - - -
- -
- -
-
- -

- #animation -

-
-

Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.

-

Only animation-duration and animation-name are required.

- -
- -
- -
- -
-
- -

- #background-attachment -

-
-

Defines how the background image will behave when scrolling the page.

- -
- -
- - - - - -
-
-

- default - - background-attachment: scroll; -

-
-

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

- -
-
- - - -
-
-
-

- - background-attachment: fixed; -

-
-

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

- -
-
- - - -
- -
- -
-
- -

- #background-clip -

-
-

Defines how far the background should extend within the element.

- -
- -
- - - -
-
-

- default - - background-clip: border-box; -

-
-

The background extends completely throughout the element, even under the border.

- -
-
- - - -
-
-
-

- - background-clip: padding-box; -

-
-

The background only extends to the edge of the border: it includes the padding but not the border.

- -
-
- - - -
-
-
-

- - background-clip: content-box; -

-
-

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

- -
-
- - - -
- -
- -
-
- -

- #background-color -

-
-

Defines the color of the element's background.

- -
- -
- -
-
-

- default - - background-color: transparent; -

-
-

By default, the background color is transparent, basically meaning that there is no background color.

- -
-
- - - -
-
-
-

- - background-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - background-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - background-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
    -
  • the first value is for red -
    • -
  • the second value is for green -
    • -
  • the third value is for blue -
    • -
-

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - background-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
    -
  • the first 3 values are for rgb -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - background-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
    -
  • the first value is for hue and can go from 0 to 359 -
    • -
  • the second value is for saturation and go from 0% to 100% -
    • -
  • the third value is for luminosity and go from 0% to 100% -
    • -
-
-
- - - -
-
-
-

- - background-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
    -
  • the first 3 values are for hsl -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
- -
-
- -

- #background-image -

-
-

Defines an image as the background of the element.

- -
- -
- - - -
-
-

- default - - background-image: none; -

-
-

Removes any background image.

- -
-
- - - -
-
-
-

- - background-image: url(/images/jt.png); -

-
-

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

- -
-
- - - - -
-
-
-

- - background-image: linear-gradient(red, blue); -

-
-

You can define a linear gradient as the background image.

-

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

-

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

- -
-
- - - -
-
-
-

- - background-image: linear-gradient(45deg, red, blue); -

-
-

You can specify an angle, either in degrees, or with keywords.

-

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

-

In this example, 45deg means 2:30, or the top right corner.

- -
-
- - - -
-
-
-

- - background-image: radial-gradient(green, purple); -

-
-

You can define a radial gradient as the background image.

-

You need to define at least two colors. The first one will be at the center, the second one at the edges.

- -
-
- - - -
-
-
-

- - background-image: radial-gradient(circle, green, purple); -

-
-

You can specify the shape of the radial gradient: circle or ellipse (default).

- -
-
- - - -
-
-
-

- - background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%); -

-
-

You can specify color stops using percentage values.

- -
-
- - - -
-
-
-

- - background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%); -

-
-

You can specify where the gradient should end:

-
    -
  • closest-side -
    • -
  • closest-corner -
    • -
  • farthest-side -
    • -
  • farthest-corner -
    • -
-
-
- - - -
-
-
-

- - background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%); -

-
-

Like with the background-position, you can specify the position of the gradient.

- -
-
- - - -
- -
- -
-
- -

- #background-origin -

-
-

Defines the origin of the background image.

- -
- -
- - - - - -
-
-

- default - - background-origin: padding-box; -

-
-

The background image starts at the edge of the border: within padding but not the border.

- -
-
- - - -
-
-
-

- - background-origin: border-box; -

-
-

The background image starts under the border.

- -
-
- - - -
-
-
-

- - background-origin: content-box; -

-
-

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

- -
-
- - - -
- -
- -
-
- -

- #background-position -

-
-

Defines the position of the background image.

- -
- -
- - - -
-
-

- default - - background-position: 0% 0%; -

-
-

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

- -
-
- - - -
-
-
-

- - background-position: bottom right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

- -
-
- - - -
-
-
-

- - background-position: center center; -

-
-

The background image will be positioned in the center of the element.

- -
-
- - - -
- -
- -
-
- -

- #background-repeat -

-
-

Defines how the background image repeats itself across the element's background, starting from the background position.

- -
- -
- - - -
-
-

- default - - background-repeat: repeat; -

-
-

The background image will repeat itself both horizontally and vertically.

- -
-
- - - -
-
-
-

- - background-repeat: repeat-x; -

-
-

The background image will only repeat itself horizontally.

- -
-
- - - -
-
-
-

- - background-repeat: repeat-y; -

-
-

The background image will only repeat itself vertically.

- -
-
- - - -
-
-
-

- - background-repeat: no-repeat; -

-
-

The background image will only appear once.

- -
-
- - - -
- -
- -
-
- -

- #background-size -

-
-

Defines the size of the background image.

- -
- -
- - - -
-
-

- default - - background-size: auto auto; -

-
-

The background image will retain its original size.

-

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

- -
-
- - - -
-
-
-

- - background-size: 120px 80px; -

-
-

You can specify a size in pixels:

-
    -
  • the first value is the horizontal size
    • -
  • the second is the vertical size
    • -
-
-
- - - -
-
-
-

- - background-size: 100% 50%; -

-
-

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

- -
-
- - - -
-
-
-

- - background-size: contain; -

-
-

The keyword contain will resize the background image to make sure it remains fully visible.

- -
-
- - - -
-
-
-

- - background-size: cover; -

-
-

The keyword cover will resize the background image to make sure the element is fully covered.

- -
-
- - - -
- -
- -
-
- -

- #background -

-
-

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

- -
- -
- -
- -
-
- -

- #border-bottom-color -

-
-

Like border-color, but for the bottom border only.

- -
- -
- - - -
-
-

- - border-bottom-color: transparent; -

-
-

Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - border-bottom-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - border-bottom-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
- -
-
- -

- #border-bottom-left-radius -

-
-

Defines the radius of the bottom left corner.

- -
- -
- - - -
-
-

- default - - border-bottom-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - border-bottom-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - border-bottom-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the left border.

- -
-
- - - -
-
-
-

- - border-bottom-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the left border.

- -
-
- - - -
- -
- -
-
- -

- #border-bottom-right-radius -

-
-

Defines the radius of the bottom right corner.

- -
- -
- - - -
-
-

- default - - border-bottom-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - border-bottom-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - border-bottom-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the right border.

- -
-
- - - -
-
-
-

- - border-bottom-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the right border.

- -
-
- - - -
- -
- -
-
- -

- #border-bottom-style -

-
-

Like border-style, but for the bottom border only.

- -
- -
- - - -
-
-

- default - - border-bottom-style: none; -

-
-

Removes the bottom border.

- -
-
- - - -
-
-
-

- - border-bottom-style: dotted; -

-
-

Turns the bottom border into a sequence of dots.

- -
-
- - - -
-
-
-

- - border-bottom-style: dashed; -

-
-

Turns the bottom border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - border-bottom-style: solid; -

-
-

Turns the bottom border into a solid line.

- -
-
- - - -
-
-
-

- - border-bottom-style: double; -

-
-

Splits the bottom border into two lines.

- -
-
- - - -
-
-
-

- - border-bottom-style: groove; -

-
-

Sets an inset style to the bottom border.

- -
-
- - - -
- -
- -
-
- -

- #border-bottom-width -

-
-

Like border-width, but for the bottom border only.

- -
- -
- - - -
-
-

- default - - border-bottom-width: 0; -

-
-

Removes the bottom border.

- -
-
- - - -
-
-
-

- - border-bottom-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
- -
-
- -

- #border-bottom -

-
-

Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.

- -
- -
- -
-
-

- - border-bottom: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - border-bottom: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #border-collapse -

-
-

Defines whether table borders should be separated or collapsed.

- -
- -
- - - -
-
-

- default - - border-collapse: separate; -

-
-

Each table cell will display its own borders.

-

In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.

- -
-
- - - - -
-
-
-

- - border-collapse: collapse; -

-
-

Adjacent table cells will merge their borders together.

-

The cell that appears first in the code will "win": its borders will mask those of the following cells.

- -
-
- - - - -
- -
- -
-
- -

- #border-color -

-
-

Defines the color of the element's borders.

- -
- -
- - - -
-
-

- default - - border-color: transparent; -

-
-

Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - border-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - border-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - border-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
    -
  • the first value is for red -
    • -
  • the second value is for green -
    • -
  • the third value is for blue -
    • -
-

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - border-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
    -
  • the first 3 values are for rgb -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - border-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
    -
  • the first value is for hue and can go from 0 to 359 -
    • -
  • the second value is for saturation and go from 0% to 100% -
    • -
  • the third value is for luminosity and go from 0% to 100% -
    • -
-
-
- - - -
-
-
-

- - border-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
    -
  • the first 3 values are for hsl -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
- -
-
- -

- #border-left-color -

-
-

Like border-color, but for the left border only.

- -
- -
- - - -
-
-

- - border-left-color: transparent; -

-
-

Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - border-left-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - border-left-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
- -
-
- -

- #border-left-style -

-
-

Like border-style, but for the left border only.

- -
- -
- - - -
-
-

- default - - border-left-style: none; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - border-left-style: dotted; -

-
-

Turns the left border into a sequence of dots.

- -
-
- - - -
-
-
-

- - border-left-style: dashed; -

-
-

Turns the left border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - border-left-style: solid; -

-
-

Turns the left border into a solid line.

- -
-
- - - -
-
-
-

- - border-left-style: double; -

-
-

Splits the left border into two lines.

- -
-
- - - -
-
-
-

- - border-left-style: groove; -

-
-

Sets an inset style to the left border.

- -
-
- - - -
- -
- -
-
- -

- #border-left-width -

-
-

Like border-width, but for the left border only.

- -
- -
- - - -
-
-

- default - - border-left-width: 0; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - border-left-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
- -
-
- -

- #border-left -

-
-

Shorthand property for border-left-width border-left-style and border-left-color.

- -
- -
- -
-
-

- - border-left: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - border-left: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #border-radius -

-
-

Defines the radius of the element's corners.

- -
- -
- - - -
-
-

- default - - border-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - border-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - border-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway through each border.

- -
-
- - - -
-
-
-

- - border-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top and bottom borders, the second one for the left and right borders.

- -
-
- - - -
- -
- -
-
- -

- #border-right-color -

-
-

Like border-color, but for the right border only.

- -
- -
- - - -
-
-

- - border-right-color: transparent; -

-
-

Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - border-right-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - border-right-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
- -
-
- -

- #border-right-style -

-
-

Like border-style, but for the right border only.

- -
- -
- - - -
-
-

- default - - border-right-style: none; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - border-right-style: dotted; -

-
-

Turns the right border into a sequence of dots.

- -
-
- - - -
-
-
-

- - border-right-style: dashed; -

-
-

Turns the right border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - border-right-style: solid; -

-
-

Turns the right border into a solid line.

- -
-
- - - -
-
-
-

- - border-right-style: double; -

-
-

Splits the right border into two lines.

- -
-
- - - -
-
-
-

- - border-right-style: groove; -

-
-

Sets an inset style to the right border.

- -
-
- - - -
- -
- -
-
- -

- #border-right-width -

-
-

Like border-width, but for the right border only.

- -
- -
- - - -
-
-

- default - - border-right-width: 0; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - border-right-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
- -
-
- -

- #border-right -

-
-

Shorthand property for border-right-width border-right-style and border-right-color.

- -
- -
- -
-
-

- - border-right: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - border-right: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #border-style -

-
-

Defines the style of the element's borders.

- -
- -
- - - -
-
-

- default - - border-style: none; -

-
-

Removes the element's borders.

- -
-
- - - -
-
-
-

- - border-style: dotted; -

-
-

Turns the border into a sequence of dots.

- -
-
- - - -
-
-
-

- - border-style: dashed; -

-
-

Turns the border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - border-style: solid; -

-
-

Turns the border into a solid line.

- -
-
- - - -
-
-
-

- - border-style: double; -

-
-

Splits the border into two lines.

- -
-
- - - -
-
-
-

- - border-style: groove; -

-
-

Sets an inset style to the borders.

- -
-
- - - -
- -
- -
-
- -

- #border-top-color -

-
-

Like border-color, but for the top border only.

- -
- -
- - - -
-
-

- - border-top-color: transparent; -

-
-

Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - border-top-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - border-top-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
- -
-
- -

- #border-top-left-radius -

-
-

Defines the radius of the top left corner.

- -
- -
- - - -
-
-

- default - - border-top-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - border-top-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - border-top-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

- -
-
- - - -
-
-
-

- - border-top-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the left border.

- -
-
- - - -
- -
- -
-
- -

- #border-top-right-radius -

-
-

Defines the radius of the top right corner.

- -
- -
- - - -
-
-

- default - - border-top-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - border-top-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - border-top-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the right border.

- -
-
- - - -
-
-
-

- - border-top-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the right border.

- -
-
- - - -
- -
- -
-
- -

- #border-top-style -

-
-

Like border-style, but for the top border only.

- -
- -
- - - -
-
-

- default - - border-top-style: none; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

- - border-top-style: dotted; -

-
-

Turns the top border into a sequence of dots.

- -
-
- - - -
-
-
-

- - border-top-style: dashed; -

-
-

Turns the top border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - border-top-style: solid; -

-
-

Turns the top border into a solid line.

- -
-
- - - -
-
-
-

- - border-top-style: double; -

-
-

Splits the top border into two lines.

- -
-
- - - -
-
-
-

- - border-top-style: groove; -

-
-

Sets an inset style to the top border.

- -
-
- - - -
- -
- -
-
- -

- #border-top-width -

-
-

Like border-width, but for the top border only.

- -
- -
- - - -
-
-

- default - - border-top-width: 0; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

- - border-top-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
- -
-
- -

- #border-top -

-
-

Shorthand property for border-top-width border-top-style and border-top-color.

- -
- -
- -
-
-

- - border-top: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - border-top: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #border-width -

-
-

Defines the width of the element's borders.

- -
- -
- - - -
-
-

- - border-width: 1px; -

-
-

Defines the width of all borders to 1px.

- -
-
- - - -
-
-
-

- - border-width: 2px 0; -

-
-

Defines the top and bottom borders to 2px, the left and right to 0.

- -
-
- - - -
- -
- -
-
- -

- #border -

-
-

Shorthand property for border-width border-style and border-color.

- -
- -
- -
-
-

- - border: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - border: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #bottom -

-
-

Defines the position of the element according to its bottom edge.

- -
- -
- - - - - -
-
-

- default - - bottom: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - bottom: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

- -
-
- - - - -
-
-
-

- - bottom: 0; -

-
-

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

- -
-
- - - - -
- -
- -
-
- -

- #box-shadow -

-
-

Defines the shadow of the element.

- -
- -
- - - -
-
-

- default - - box-shadow: none; -

-
-

Removes any box-shadow that was applied to the element.

- -
-
- - - -
-
-
-

- - box-shadow: 2px 6px; -

-
-

You need at least two values:

-
    -
  • the first is the horizontal offset
    • -
  • the second is the vertical offset
    • -
-

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

- - box-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

- -
-
- - - -
-
-
-

- - box-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

- -
-
- - - -
-
-
-

- - box-shadow: 2px 4px 10px 4px red; -

-
-

The optional fourth value defines the spread of the shadow.

-

The spread defines how much the shadow should grow: it enhances the shadow.

- -
-
- - - -
- -
- -
-
- -

- #box-sizing -

-
-

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

- -
- -
- - - -
-
-

- default - - box-sizing: content-box; -

-
-

The width and height of the element only apply to the content of the element.

-

For example, this element has

-
    -
  • border-width: 12px -
    • -
  • padding: 30px -
    • -
  • width: 200px -
    • -
-

The full width is 24px + 60px + 200px = 284px.

-

The content has the defined width. The box accomodates for those dimensions.

- -
-
- - - - -
-
-
-

- - box-sizing: border-box; -

-
-

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

-

For example, this element has

-
    -
  • border-width: 12px -
    • -
  • padding: 30px -
    • -
  • width: 200px -
    • -
-

The full width is 200px, no matter what.

-

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

- -
-
- - - - -
- -
- -
-
- -

- #clear -

-
-

Moves the element after all the preceding floating elements.

- -
- -
- - - -
-
-

- - clear: none; -

-
-

The clear property is only relevant when used with siblings that have a float value.

-

The element will sit alongside any floated element that precedes it.

- -
-
- - - -
-
-
-

- - clear: left; -

-
-

The cleared element will move after any left floating element that precedes it, but will remain alongside right float elements.

- -
-
- - - - -
-
-
-

- - clear: right; -

-
-

The cleared element will move after any right floating element that precedes it, but will remain alongside left float elements.

- -
-
- - - - -
-
-
-

- - clear: both; -

-
-

The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

- -
-
- - - - -
- -
- -
-
- -

- #color -

-
-

Defines the color of the text.

- -
- -
- - - -
-
-

- - color: transparent; -

-
-

Applies a transparent color to the text. The text will still take up the space it should.

- -
-
- - - -
-
-
-

- - color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
    -
  • the first value is for red -
    • -
  • the second value is for green -
    • -
  • the third value is for blue -
    • -
-

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - color: rgba(0, 0, 0, 0.5); -

-
-

You can use rgba() color codes:

-
    -
  • the first 3 values are for rgb -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - - -
-
-
-

- - color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
    -
  • the first value is for hue and can go from 0 to 359 -
    • -
  • the second value is for saturation and go from 0% to 100% -
    • -
  • the third value is for luminosity and go from 0% to 100% -
    • -
-
-
- - - -
-
-
-

- - color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
    -
  • the first 3 values are for hsl -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
- -
-
- -

- #column-count -

-
-

Defines the number of columns of the element.

- -
- -
- -
-
-

- default - - column-count: auto; -

-
-

Removes any columns from the element (unless another column- property was set).

- -
-
- - - -
-
-
-

- - column-count: 3; -

-
-

When using an integer value, the element will distribute its child elements across the number of columns defined.

- -
-
- - - - -
- -
- -
-
- -

- #column-gap -

-
-

Defines the gap between the columns of the element.

- -
- -
- - - -
-
-

- default - - column-gap: normal; -

-
-

The gap between the columns is set to the browser's default value, which usually is 1em.

- -
-
- - - -
-
-
-

- - column-gap: 2px; -

-
-

You can use pixel values for the gap.

-

Note that the gap only appears between columns, and not on the exterior sides of the edge columns.

- -
-
- - - - -
- -
- -
-
- -

- #column-width -

-
-

Defines the number of columns of the element.

- -
- -
- -
-
-

- default - - column-width: auto; -

-
-

The element will not distribute its child elements into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.

- -
-
- - - -
-
-
-

- - column-width: 10px; -

-
-

You can use pixel values for the column width.

-

The number of columns will be the minimum needed to distribute all the content across the element.

- -
-
- - - - -
- -
- -
-
- -

- #content -

-
-

Defines the text content of the :before and :after pseudo-elements.

- -
- -
- - - -
-
-

- default - - content: normal; -

-
-

No content is added to the element.

- -
-
- - - -
-
-
-

- - content: "Foo bar"; -

-
-

Considering this HTML element:

- 
<p class="element">
-  Hello world
-</p>
-

And this CSS:

- 
.element:before {
-  content: "Foo bar";
-}
-

The text content will be prepended to the element's content.

-

Notice how the end result combines text from the HTML and text from the CSS.

- -
-
- - - - -
-
-
-

- - content: url(/images/jt.png); -

-
-

You can insert images by using the url() function.

- -
-
- - - -
-
-
-

- - content: attr(data-something); -

-
-

Considering this HTML element:

- 
<p class="element" data-something="cssreference">
-  Hello world
-</p>
-

And this CSS:

- 
.element:before {
-  content: attr(data-something);
-}
-

The element will grab the text content from the HTML attribute.

- -
-
- - - - -
- -
- -
-
- -

- #cursor -

-
-

Sets the mouse cursor when hovering the element.

- -
- -
- -
-
-

- - cursor: default; -

-
-

Sets the cursor to the element's default value. For a link, it would be a pointer. For text it would be a selection cursor.

- -
-
- - - -
-
-
-

- - cursor: auto; -

-
-

auto

- -
-
- - - -
-
-
-

- - cursor: pointer; -

-
-

pointer

- -
-
- - - -
-
-
-

- - cursor: move; -

-
-

move

- -
-
- - - -
-
-
-

- - cursor: crosshair; -

-
-

crosshair

- -
-
- - - -
-
-
-

- - cursor: text; -

-
-

text

- -
-
- - - -
-
-
-

- - cursor: wait; -

-
-

wait

- -
-
- - - -
-
-
-

- - cursor: helpe-resize; -

-
-

helpe-resize

- -
-
- - - -
-
-
-

- - cursor: ne-resize; -

-
-

ne-resize

- -
-
- - - -
-
-
-

- - cursor: nw-resize; -

-
-

nw-resize

- -
-
- - - -
-
-
-

- - cursor: n-resize; -

-
-

n-resize

- -
-
- - - -
-
-
-

- - cursor: se-resize; -

-
-

se-resize

- -
-
- - - -
-
-
-

- - cursor: sw-resize; -

-
-

sw-resize

- -
-
- - - -
-
-
-

- - cursor: s-resize; -

-
-

s-resize

- -
-
- - - -
-
-
-

- - cursor: w-resize; -

-
-

w-resize

- -
-
- - - -
- -
- -
-
- -

- #display -

-
-

Sets the display behavior of the element.

- -
- -
- - - -
-
-

- - display: none; -

-
-

The element is completely removed, as if it wasn't in the HTML code in the first place.

- -
-
- - - -
-
-
-

- - display: inline; -

-
-

The element is turned into an inline element: it behaves like simple text.

-

Any height and width applied will have no effect.

- -
-
- - - -
-
-
-

- - display: block; -

-
-

The element is turned into a block element: it starts on a new line, and takes up the whole width.

- -
-
- - - -
-
-
-

- - display: inline-block; -

-
-

The element shares properties of both an inline and a block element:

-
    -
  • inline because the element behaves like simple text, and inserts itself in a block of text
    • -
  • Block because you can apply height and width values
-

For example, this element has:

- 
.element{
-  height: 3em;
-  width: 60px;
-}
-
-
- - - -
-
-
-

- - display: list-item; -

-
-

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

- -
-
- - - -
-
-
-

- - display: table; -

-
-

The element behaves like a table: <table>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - display: table-cell; -

-
-

The element behaves like a table cell: <td> or <th>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - display: table-row; -

-
-

The element behaves like a table row: <tr>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - display: flex; -

-
-

The element is turned into an flexbox container. On its own, it behaves like a block element.

-

Its child elements will be turned into flexbox items.

- -
-
- - - -
-
-
-

- - display: inline-flex; -

-
-

The element shares properties of both an inline and a flexbox element:

-
    -
  • inline because the element behaves like simple text, and inserts itself in a block of text
    • -
  • flexbox because its child element will be turned into flexbox items
-

For example, this element has:

- 
.element{
-  height: 3em;
-  width: 120px;
-}
-
-
- - - -
- -
- -
-
- -

- #flex-basis -

-
-

Defines the initial size of a flexbox item.

- -
- -
- - - -
-
-

- default - - flex-basis: auto; -

-
-

The element will be automatically sized based on its content, or on any height or width value if they are defined.

- -
-
- - - - -
-
-
-

- - flex-basis: 80px; -

-
-

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

- -
-
- - - - -
- -
- -
-
- -

- #flex-direction -

-
-

Defines how flexbox items are ordered within a flexbox container.

- -
- -
- - - -
-
-

- default - - flex-direction: row; -

-
-

The flexbox items are ordered the same way as the text direction, along the main axis.

- -
-
- - - -
-
-
-

- - flex-direction: row-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the main axis.

- -
-
- - - -
-
-
-

- - flex-direction: column; -

-
-

The flexbox items are ordered the same way as the text direction, along the cross axis.

- -
-
- - - -
-
-
-

- - flex-direction: column-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

- -
-
- - - -
- -
- -
-
- -

- #flex-flow -

-
-

Shorthand property for flex-direction and flex-flow.

- -
- -
- -
- -
-
- -

- #flex-grow -

-
-

Defines how much a flexbox item should grow if there's space available.

- -
- -
- - - -
-
-

- default - - flex-grow: 0; -

-
-

The element will not grow if there's space available. It will only use the space it needs.

- -
-
- - - -
-
-
-

- - flex-grow: 1; -

-
-

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

- -
-
- - - - -
-
-
-

- - flex-grow: 2; -

-
-

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the remaining space is divided in 3:

-
    -
  • 1 third goes to the green item
    • -
  • 2 thirds go to the pink item
    • -
  • Nothing goes to the yellow item, who retains its initial width
    • -
-
-
- - - - -
- -
- -
-
- -

- #flex-shrink -

-
-

Defines how much a flexbox item should shrink if there's not enough space available.

- -
- -
- - - - - -
-
-

- default - - flex-shrink: 1; -

-
-

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

- -
-
- - - -
-
-
-

- - flex-shrink: 0; -

-
-

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

-

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

- -
-
- - - - -
-
-
-

- - flex-shrink: 2; -

-
-

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

-
    -
  • 3 quarters are taken from the red item
    • -
  • 1 quarter is taken from the yellow item
    • -
-
-
- - - - -
- -
- -
-
- -

- #flex-wrap -

-
-

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

- -
- -
- - - -
-
-

- default - - flex-wrap: nowrap; -

-
-

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

- -
-
- - - -
-
-
-

- - flex-wrap: wrap; -

-
-

The flexbox items will be distributed among multiple lines if needed.

- -
-
- - - -
-
-
-

- - flex-wrap: wrap-reverse; -

-
-

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

- -
-
- - - -
- -
- -
-
- -

- #float -

-
-

Pushes the element to either the left or right side. The following siblings will wrap around the floating element

- -
- -
- -
-
-

- default - - float: none; -

-
-

Removes any previously defined float value. The element will remain in the natural flow of the page.

- -
-
- - - -
-
-
-

- - float: left; -

-
-

Moves the element to the left side of its container. The following elements will wrap around it and fill the space remaining on the right.

- -
-
- - - -
-
-
-

- - float: right; -

-
-

Moves the element to the right side of its container. The following elements will wrap around it and fill the space remaining on the left.

- -
-
- - - -
- -
- -
-
- -

- #font-family -

-
- -
- -
- - - -
-
-

- - font-family: "Source Sans Pro", "Arial", sans-serif; -

-
-

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

-

The browser will look for each family on the user's computer and in any @font-face resource.

-

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

-

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

- -
-
- - - -
-
-
-

- - font-family: serif; -

-
-

The browser will use a serif font family: all characters have stroke endings.

- -
-
- - - -
-
-
-

- - font-family: sans-serif; -

-
-

The browser will use a sans-serif font family: no character has stroke endings.

- -
-
- - - -
-
-
-

- - font-family: monospace; -

-
-

The browser will use a monospace font family: all characters have the same width.

- -
-
- - - -
-
-
-

- - font-family: cursive; -

-
-

The browser will use a cursive font family.

- -
-
- - - -
-
-
-

- - font-family: fantasy; -

-
-

The browser will use a fantasy font family.

- -
-
- - - -
- -
- -
-
- -

- #font-size -

-
-

Defines the size of the text.

- -
- -
- - - -
-
-

- default - - font-size: medium; -

-
-

The text will use the browser's default medium size.

- -
-
- - - -
-
-
-

- - font-size: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - font-size: 1.2em; -

-
-

You can use em values.

-

The value is relative to the parent's font-size. -
As a result, the value will cascade if used on child elements.

- -
-
- - - -
-
-
-

- - font-size: 1.2rem; -

-
-

You can use rem values.

-

The value is relative to the root element's font-size, which is the <html> element. -
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

- -
-
- - - -
-
-
-

- - font-size: 90%; -

-
-

You can use percentage values. They act like em values.

-

The value is relative to the parent's font-size. -
As a result, the value will cascade if used on child elements.

- -
-
- - - -
-
-
-

- - font-size: smaller; -

-
-

You can use relative keywords. The value is relative to the parent.

-

The following are available:

-
    -
  • larger -
    • -
  • smaller -
    • -
-
-
- - - -
-
-
-

- - font-size: x-large; -

-
-

You can use absolute keywords. The value is relative to the root element <html>.

-

The following are available:

-
    -
  • xx-small -
    • -
  • x-small -
    • -
  • small -
    • -
  • medium -
    • -
  • large -
    • -
  • x-large -
    • -
  • xx-large -
    • -
-
-
- - - -
- -
- -
-
- -

- #font-style -

-
-

Defines how much the text is slanted.

- -
- -
- - - -
-
-

- default - - font-style: normal; -

-
-

The text is not slanted.

- -
-
- - - -
-
-
-

- - font-style: italic; -

-
-

Use the italic version of the font: the letters are slightly slanted.

- -
-
- - - -
-
-
-

- - font-style: oblique; -

-
-

Use the oblique version of the font: the letters are more slanted than italic.

- -
-
- - - -
- -
- -
-
- -

- #font-variant -

-
-

Defines which glyph to use for each letter.

- -
- -
- - - -
-
-

- default - - font-variant: normal; -

-
-

Each letter uses its normal glyph.

- -
-
- - - -
-
-
-

- - font-variant: small-caps; -

-
-

Each letter uses its small capitalized version.

- -
-
- - - -
- -
- -
-
- -

- #font-weight -

-
-

Defines the weight of the text.

- -
- -
- - - -
-
-

- default - - font-weight: normal; -

-
-

The text is in normal weight.

- -
-
- - - -
-
-
-

- - font-weight: bold; -

-
-

The text becomes bold.

- -
-
- - - -
-
-
-

- - font-weight: 600; -

-
-

You can use numeric values. They all correspond to a particular named weight:

-
    -
  • 100 Thin
    • -
  • 200 Extra Light
    • -
  • 300 Light
    • -
  • 400 Normal
    • -
  • 500 Medium
    • -
  • 600 Semi Bold
    • -
  • 700 Bold
    • -
  • 800 Extra Bold
    • -
  • 900 Ultra Bold
    • -
-

If the font family doesn't provide the requested weight, it will use the closest available one.

- -
-
- - - -
-
-
-

- - font-weight: lighter; -

-
-

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

- -
-
- - - -
- -
- -
-
- -

- #font -

-
-

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

- -
- -
- -
- -
-
- -

- #height -

-
-

Defines the height of the element.

- -
- -
- - - -
-
-

- default - - height: auto; -

-
-

The element will automatically adjust its height to allow its content to be displayed correctly.

- -
-
- - -
-
-
-

- - height: 100px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

- -
-
- - - -
- -
- -
-
- -

- #justify-content -

-
-

Defines how flexbox items are aligned according to the main axis, within a flexbox container.

- -
- -
- - - -
-
-

- default - - justify-content: flex-start; -

-
-

The flexbox items are pushed towards the start of the container's main axis.

- -
-
- - - -
-
-
-

- - justify-content: flex-end; -

-
-

The flexbox items are pushed towards the end of the container's main axis.

- -
-
- - - -
-
-
-

- - justify-content: center; -

-
-

The flexbox items are centered along the container's main axis.

- -
-
- - - -
-
-
-

- - justify-content: space-between; -

-
-

The remaining space is distributed between the flexbox items.

- -
-
- - - -
-
-
-

- - justify-content: space-around; -

-
-

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

- -
-
- - - -
- -
- -
-
- -

- #left -

-
-

Defines the position of the element according to its left edge.

- -
- -
- - - - - -
-
-

- default - - left: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - left: 80px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the left value.

- -
-
- - - -
-
-
-

- - left: -20px; -

-
-

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

- -
-
- - - -
- -
- -
-
- -

- #letter-spacing -

-
-

Defines the spacing between the characters of a block of text.

- -
- -
- -
-
-

- default - - letter-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - letter-spacing: 2px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - letter-spacing: 0.1em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

- -
-
- - - -
- -
- -
-
- -

- #line-height -

-
-

Defines the height of a single line of text.

- -
- -
- -
-
-

- default - - line-height: normal; -

-
-

Reverts to the default value of the browser.

- -
-
- - - -
-
-
-

- - recommended - - line-height: 1.6; -

-
-

You can use unitless values: the line height will be relative to the font size.

- -
-
- - - - -
-
-
-

- - line-height: 30px; -

-
-

You can use pixel values.

- -
-
- - - - -
-
-
-

- - line-height: 0.8em; -

-
-

You can use em values: like with unitless values, the line height will be relative to the font size.

- -
-
- - - - -
- -
- -
-
- -

- #list-style-image -

-
-

Defines the image to be used as an list item's bullet point.

- -
- -
- - - -
-
-

- default - - list-style-image: none; -

-
-

The list items will use the bullet point defined by the list-style-type value, which by default is a disc.

- -
-
- - - -
-
-
-

- - list-style-image: url(/images/list-style-image.png); -

-
-

The list items will use the image located at the specified URL as their bullet point. -
The image can not be resized.

- -
-
- - - - -
- -
- -
-
- -

- #list-style-position -

-
-

Defines the position of a list's bullet points.

- -
- -
- - - -
-
-

- default - - list-style-position: outside; -

-
-

The bullet point will be outside the list item, as if it wasn't part of the list item.

-

The start of each line of a list item will be aligned vertically.

- -
-
- - - - -
-
-
-

- - list-style-position: inside; -

-
-

The bullet point will be inside the list item.

-

As it is part of the list item, it will be part of the text and push the text at the start.

- -
-
- - - - -
- -
- -
-
- -

- #list-style-type -

-
-

Defines the type of a list item's bullet point.

- -
- -
- - - -
-
-

- default - - list-style-type: disc; -

-
-

The list items will use a disc as their bullet point.

- -
-
- - - - -
-
-
-

- - list-style-type: circle; -

-
-

The list items will use a circle as their bullet point.

- -
-
- - - - -
-
-
-

- - list-style-type: square; -

-
-

The list items will use a square as their bullet point.

- -
-
- - - - -
-
-
-

- - list-style-type: decimal; -

-
-

The list items will use a decimal as their bullet point.

- -
-
- - - - -
-
-
-

- - list-style-type: none; -

-
-

The list items will have no bullet point.

- -
-
- - - - -
- -
- -
-
- -

- #list-style -

-
-

Shorthand property for list-style-type list-style-image and list-style-position.

- -
- -
- -
- -
-
- -

- #margin-bottom -

-
-

Defines the space outside the element, on the bottom side.

- -
- -
- - - - - -
-
-

- default - - margin-bottom: 0; -

-
-

Removes any margin at the bottom.

- -
-
- - - -
-
-
-

- - margin-bottom: 30px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - margin-bottom: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - margin-bottom: 10%; -

-
-

You can use percentage values. -
The percentage is based on the width of the container.

- -
-
- - - -
- -
- -
-
- -

- #margin-left -

-
-

Defines the space outside the element, on the left side.

- -
- -
- - - - - -
-
-

- default - - margin-left: 0; -

-
-

Removes any margin on the left.

- -
-
- - - -
-
-
-

- - margin-left: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - margin-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - margin-left: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the container.

- -
-
- - - -
-
-
-

- - margin-left: auto; -

-
-

The auto keyword will give the left side a share of the remaining space.

-

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

- -
-
- - - -
- -
- -
-
- -

- #margin-right -

-
-

Defines the space outside the element, on the right side.

- -
- -
- - - - - -
-
-

- default - - margin-right: 0; -

-
-

Removes any margin on the right.

- -
-
- - - -
-
-
-

- - margin-right: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - margin-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - margin-right: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the container.

- -
-
- - - -
-
-
-

- - margin-right: auto; -

-
-

The auto keyword will give the right side a share of the remaining space.

-

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

- -
-
- - - -
- -
- -
-
- -

- #margin-top -

-
-

Defines the space outside the element, on the top side.

- -
- -
- - - - - -
-
-

- default - - margin-top: 0; -

-
-

Removes any margin at the top.

- -
-
- - - -
-
-
-

- - margin-top: 30px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - margin-top: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - margin-top: 10%; -

-
-

You can use percentage values. -
The percentage is based on the width of the container.

- -
-
- - - -
- -
- -
-
- -

- #margin -

-
-

Shorthand property for margin-top margin-right margin-bottom and margin-left.

- -
- -
- - - - - -
-
-

- default - - margin: 0; -

-
-

Removes all margins.

- -
-
- - - -
-
-
-

- - margin: 30px; -

-
-

When using 1 value, the margin is set for all 4 sides.

- -
-
- - - -
-
-
-

- - margin: 30px 60px; -

-
-

When using 2 values:

-
    -
  • the first value is for top/bottom -
    • -
  • the second value is for right/left -
    • -
-

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

- -
-
- - - -
-
-
-

- - margin: 30px 60px 45px; -

-
-

When using 3 values:

-
    -
  • the first value is for top -
    • -
  • the second value is for right/left -
    • -
  • the third value is for bottom -
    • -
-

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

- -
-
- - - -
-
-
-

- - margin: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
    -
  • the first value is for top -
    • -
  • the second value is for right -
    • -
  • the third value is for bottom -
    • -
  • the fourth value is for left -
    • -
-

To remember the order, start at the top and go clockwise.

- -
-
- - - -
- -
- -
-
- -

- #max-height -

-
-

Defines the maximum height the element can be.

- -
- -
- - - -
-
-

- default - - max-height: none; -

-
-

The element has no limit in terms of height.

- -
-
- - -
-
-
-

- - max-height: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum height is larger than the element's actual height, the max height has no effect.

- -
-
- - -
-
-
-

- - max-height: 100px; -

-
-

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

- -
-
- - - -
- -
- -
-
- -

- #max-width -

-
-

Defines the maximum width the element can be.

- -
- -
- -
-
-

- default - - max-width: none; -

-
-

The element has no limit in terms of width.

- -
-
- - -
-
-
-

- - max-width: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum width is larger than the element's actual width, the max width has no effect.

- -
-
- - -
-
-
-

- - max-width: 150px; -

-
-

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

- -
-
- - - -
- -
- -
-
- -

- #min-height -

-
-

Defines the minimum height of the element.

- -
- -
- - - -
-
-

- default - - min-height: 0; -

-
-

The element has no minimum height.

- -
-
- - -
-
-
-

- - min-height: 200px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum height is larger than the element's actual height, the min height will be applied.

- -
-
- - - -
-
-
-

- - min-height: 5px; -

-
-

If the minimum height is smaller than the element's actual height, the min height has no effect.

- -
-
- - - -
- -
- -
-
- -

- #min-width -

-
-

Defines the minimum width of the element.

- -
- -
- - - -
-
-

- default - - min-width: 0; -

-
-

The element has no minimum width.

- -
-
- - -
-
-
-

- - min-width: 300px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum width is larger than the element's actual width, the min width will be applied.

- -
-
- - - -
-
-
-

- - min-width: 5px; -

-
-

If the minimum width is smaller than the element's actual width, the min width has no effect.

- -
-
- - - -
- -
- -
-
- -

- #mix-blend-mode -

-
-

Defines how the element should blend with the background.

- -
- -
- - - -
-
-

- default - - mix-blend-mode: normal; -

-
-

The element does not blend.

- -
-
- - -
-
-
-

- - mix-blend-mode: multiply; -

-
-

The element uses the multiply blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: screen; -

-
-

The element uses the screen blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: overlay; -

-
-

The element uses the overlay blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: darken; -

-
-

The element uses the darken blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: lighten; -

-
-

The element uses the lighten blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: color-dodge; -

-
-

The element uses the color-dodge blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: color-burn; -

-
-

The element uses the color-burn blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: hard-light; -

-
-

The element uses the hard-light blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: soft-light; -

-
-

The element uses the soft-light blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: difference; -

-
-

The element uses the difference blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: exclusion; -

-
-

The element uses the exclusion blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: hue; -

-
-

The element uses the hue blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: saturation; -

-
-

The element uses the saturation blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: color; -

-
-

The element uses the color blend mode.

- -
-
- - - -
-
-
-

- - mix-blend-mode: luminosity; -

-
-

The element uses the luminosity blend mode.

- -
-
- - - -
- -
- -
-
- -

- #opacity -

-
-

Defines how opaque the element is.

- -
- -
- - - -
-
-

- default - - opacity: 1; -

-
-

The element is fully opaque.

- -
-
- - -
-
-
-

- - opacity: 0; -

-
-

The element is fully transparent.

- -
-
- - - -
-
-
-

- - opacity: 0.3; -

-
-

Any value between 0 (zero) and 1 (one) will make the element semi transparent.

- -
-
- - - -
- -
- -
-
- -

- #order -

-
-

Defines the order of a flexbox item.

- -
- -
- - - - - -
-
-

- default - - order: 0; -

-
-

The order of the flexbox items is the one defined in the HTML code.

- -
-
- - -
-
-
-

- - order: 1; -

-
-

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

- -
-
- - - -
-
-
-

- - order: -1; -

-
-

You can use negative values.

- -
-
- - - -
-
-
-

- - order: 9; -

-
-

You can set a different value for each flexbox item.

- -
-
- - - -
- -
- -
-
- -

- #outline-color -

-
-

Defines the color of the element's outlines.

- -
- -
- - - -
-
-

- default - - outline-color: transparent; -

-
-

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

- -
-
- - - -
-
-
-

- - outline-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - outline-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - outline-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
    -
  • the first value is for red -
    • -
  • the second value is for green -
    • -
  • the third value is for blue -
    • -
-

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - outline-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
    -
  • the first 3 values are for rgb -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - outline-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
    -
  • the first value is for hue and can go from 0 to 359 -
    • -
  • the second value is for saturation and go from 0% to 100% -
    • -
  • the third value is for luminosity and go from 0% to 100% -
    • -
-
-
- - - -
-
-
-

- - outline-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
    -
  • the first 3 values are for hsl -
    • -
  • the 4th value is for the alpha channel and defines the opacity of the color
    • -
-

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
- -
-
- -

- #outline-style -

-
-

Defines the style of the element's outlines.

- -
- -
- - - -
-
-

- default - - outline-style: none; -

-
-

Removes the element's outlines.

- -
-
- - - -
-
-
-

- - outline-style: dotted; -

-
-

Turns the outline into a sequence of dots.

- -
-
- - - -
-
-
-

- - outline-style: dashed; -

-
-

Turns the outline into a sequence of dashes.

- -
-
- - - -
-
-
-

- - outline-style: solid; -

-
-

Turns the outline into a solid line.

- -
-
- - - -
-
-
-

- - outline-style: double; -

-
-

Splits the outline into two lines.

- -
-
- - - -
-
-
-

- - outline-style: groove; -

-
-

Sets an inset style to the outlines.

- -
-
- - - -
- -
- -
-
- -

- #outline-width -

-
-

Defines the width of the element's outlines.

- -
- -
- - - -
-
-

- default - - outline-width: medium; -

-
-

Defines the width of all outlines to medium.

- -
-
- - - -
-
-
-

- - outline-width: 1px; -

-
-

Defines the width of all outlines to 1px.

- -
-
- - - -
- -
- -
-
- -

- #outline -

-
-

Shorthand property for outline-width outline-style and outline-color.

- -
- -
- -
-
-

- - outline: 4px dotted red; -

-
-

The order is important:

-
    -
  • width
    • -
  • style
    • -
  • color
    • -
-
-
- - - -
-
-
-

- - outline: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
- -
-
- -

- #overflow-wrap -

-
-

Defines if words should break when reaching the end of a line.

- -
- -
- - - -
-
-

- default - - overflow-wrap: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

- -
-
- - - -
-
-
-

- - overflow-wrap: break-word; -

-
-

Words with no space will break as soon as they reach the end of a line.

- -
-
- - - -
- -
- -
-
- -

- #overflow-x -

-
-

Defines how overflowing content on the horizontal axis is displayed.

- -
- -
- - - -
-
-

- default - - overflow-x: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified width.

- -
-
- - - -
-
-
-

- - overflow-x: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - overflow-x: scroll; -

-
-

The overflowing content is accessible thanks to a horizontal scrollbar.

- -
-
- - - -
-
-
-

- - overflow-x: auto; -

-
-

The browser decides whether to display a horizontal scrollbar or not.

- -
-
- - - -
- -
- -
-
- -

- #overflow-y -

-
-

Defines how overflowing content on the vertical axis is displayed.

- -
- -
- - - -
-
-

- default - - overflow-y: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

- -
-
- - - -
-
-
-

- - overflow-y: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - overflow-y: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

- -
-
- - - -
-
-
-

- - overflow-y: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

- -
-
- - - -
- -
- -
-
- -

- #overflow -

-
-

Defines how overflowing content on both horizontal and vertical axis is displayed.

- -
- -
- - - - - -
-
-

- default - - overflow: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

- -
-
- - - -
-
-
-

- - overflow: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - overflow: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

- -
-
- - - -
-
-
-

- - overflow: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

- -
-
- - - -
- -
- -
-
- -

- #padding-bottom -

-
-

Defines the space inside the element, on the bottom side.

- -
- -
- - - - - -
-
-

- default - - padding-bottom: 0; -

-
-

Removes any padding on the bottom.

- -
-
- - - -
-
-
-

- - padding-bottom: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - padding-bottom: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - padding-bottom: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the element.

- -
-
- - - -
- -
- -
-
- -

- #padding-left -

-
-

Defines the space inside the element, on the left side.

- -
- -
- - - - - -
-
-

- default - - padding-left: 0; -

-
-

Removes any padding on the left.

- -
-
- - - -
-
-
-

- - padding-left: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - padding-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - padding-left: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the element.

- -
-
- - - -
- -
- -
-
- -

- #padding-right -

-
-

Defines the space inside the element, on the right side.

- -
- -
- - - - - -
-
-

- default - - padding-right: 0; -

-
-

Removes any padding on the right.

- -
-
- - - -
-
-
-

- - padding-right: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - padding-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - padding-right: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the element.

- -
-
- - - -
- -
- -
-
- -

- #padding-top -

-
-

Defines the space inside the element, on the top side.

- -
- -
- - - - - -
-
-

- default - - padding-top: 0; -

-
-

Removes any padding on the top.

- -
-
- - - -
-
-
-

- - padding-top: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - padding-top: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
    -
  • em: relative to the element's current font size
    • -
  • rem: relative to <html> the root element's font size
    • -
-
-
- - - -
-
-
-

- - padding-top: 30%; -

-
-

You can use percentage values. -
The percentage is based on the width of the element.

- -
-
- - - -
- -
- -
-
- -

- #padding -

-
-

Shorthand property for padding-top padding-right padding-bottom and padding-left.

- -
- -
- - - - - -
-
-

- default - - padding: 0; -

-
-

Removes all paddings.

- -
-
- - - -
-
-
-

- - padding: 30px; -

-
-

When using 1 value, the padding is set for all 4 sides.

- -
-
- - - -
-
-
-

- - padding: 30px 60px; -

-
-

When using 2 values:

-
    -
  • the first value is for top/bottom -
    • -
  • the second value is for right/left -
    • -
-

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

- -
-
- - - -
-
-
-

- - padding: 30px 60px 45px; -

-
-

When using 3 values:

-
    -
  • the first value is for top -
    • -
  • the second value is for right/left -
    • -
  • the third value is for bottom -
    • -
-

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

- -
-
- - - -
-
-
-

- - padding: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
    -
  • the first value is for top -
    • -
  • the second value is for right -
    • -
  • the third value is for bottom -
    • -
  • the fourth value is for left -
    • -
-

To remember the order, start at the top and go clockwise.

- -
-
- - - -
- -
- -
-
- -

- #pointer-events -

-
-

Defines if the element reacts to pointer events or not.

- -
- -
- - - -
-
-

- default - - pointer-events: auto; -

-
-

The element reacts to pointer events, like :hover or click.

- -
-
- - - -
-
-
-

- - pointer-events: none; -

-
-

The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.

- -
-
- - - - -
- -
- -
-
- -

- #position -

-
-

Defines the position behavior of the element.

- -
- -
- - - - - -
-
-

- default - - position: static; -

-
-

The element will remain in the natural flow of the page.

-

As a result, it will not act as anchor point for the absolutely positioned yellow block.

-

Also, it will not react to the following properties:

-
    -
  • top -
    • -
  • bottom -
    • -
  • left -
    • -
  • right -
    • -
  • z-index -
    • -
-
-
- - -
-
-
-

- - position: relative; -

-
-

The element will remain in the natural flow of the page.

-

It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
    -
  • top -
    • -
  • bottom -
    • -
  • left -
    • -
  • right -
    • -
  • z-index -
    • -
-
-
- - - -
-
-
-

- - position: absolute; -

-
-

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

-

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
    -
  • top -
    • -
  • bottom -
    • -
  • left -
    • -
  • right -
    • -
  • z-index -
    • -
-
-
- - - -
-
-
-

- - position: fixed; -

-
- -
-
-

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

-

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
    -
  • top -
    • -
  • bottom -
    • -
  • left -
    • -
  • right -
    • -
  • z-index -
    • -
-
-
- - - - -
- -
- -
-
- -

- #resize -

-
-

Defines if the textarea is resizable or not.

- -
- -
- - - -
-
-

- default - - resize: none; -

-
-

The textarea is not resizable.

- -
-
- - - - -
-
-
-

- - resize: horizontal; -

-
-

The textarea is resizable horizontally.

- -
-
- - - - -
-
-
-

- - resize: vertical; -

-
-

The textarea is resizable vertically.

- -
-
- - - - -
-
-
-

- - resize: both; -

-
-

The textarea is resizable both horizontally and vertically.

- -
-
- - - - -
- -
- -
-
- -

- #text-align -

-
-

Defines how the text content of the element is horizontally aligned.

- -
- -
- -
-
-

- - text-align: left; -

-
-

The text content is aligned to the left.

- -
-
- - - -
-
-
-

- - text-align: right; -

-
-

The text content is aligned to the right.

- -
-
- - - -
-
-
-

- - text-align: center; -

-
-

The text content is centered.

- -
-
- - - -
-
-
-

- - text-align: justify; -

-
-

The text content is justified.

- -
-
- - - -
- -
- -
-
- -

- #text-decoration -

-
-

Defines how the text content of the element is decorated.

- -
- -
- -
-
-

- default - - text-decoration: none; -

-
-

Removes any text decoration.

- -
-
- - - -
-
-
-

- - text-decoration: underline; -

-
-

Underlines the text content.

- -
-
- - - -
- -
- -
-
- -

- #text-indent -

-
-

Defines the indentation of the element's first line of text.

- -
- -
- -
-
-

- default - - text-indent: 0; -

-
-

The text is not indented.

- -
-
- - - -
-
-
-

- - text-indent: 40px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

Notice how only the first line is indented.

- -
-
- - - -
-
-
-

- - text-indent: -2em; -

-
-

You can also use negative values.

- -
-
- - - -
- -
- -
-
- -

- #text-overflow -

-
-

Defines how the hidden text content behaves if it's overflowing.

- -
- -
- - - - - -
-
-

- default - - text-overflow: clip; -

-
-

The text content is clipped and not accessible.

- -
-
- - - - -
-
-
-

- - text-overflow: ellipsis; -

-
-

The overflowing content is replaced by an ellipsis: … -

- -
-
- - - - -
- -
- -
-
- -

- #text-shadow -

-
-

Defines the shadow of the text content.

- -
- -
- -
-
-

- default - - text-shadow: none; -

-
-

The text content has no shadow.

- -
-
- - - -
-
-
-

- - text-shadow: 2px 6px; -

-
-

You need at least two values:

-
    -
  • the first is the horizontal offset
    • -
  • the second is the vertical offset
    • -
-

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

- - text-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

- -
-
- - - -
-
-
-

- - text-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

- -
-
- - - -
- -
- -
-
- -

- #text-transform -

-
-

Defines how the text content should be transformed.

- -
- -
- -
-
-

- default - - text-transform: none; -

-
-

Removes any text transformation: the text will appear the same as in the HTML code.

- -
-
- - - -
-
-
-

- - text-transform: capitalize; -

-
-

Turns the first letter of each word into a capital letter.

- -
-
- - - -
-
-
-

- - text-transform: uppercase; -

-
-

Turns all letters into capital letters.

- -
-
- - - -
-
-
-

- - text-transform: lowercase; -

-
-

Turns all letters into lowercase letters.

- -
-
- - - -
- -
- -
-
- -

- #top -

-
-

Defines the position of the element according to its top edge.

- -
- -
- - - - - -
-
-

- default - - top: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - top: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the top value.

- -
-
- - - - -
-
-
-

- - top: 0; -

-
-

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

- -
-
- - - - -
- -
- -
-
- -

- #transform-origin -

-
-

Defines the origin for transformations defined by the transform property.

- -
- -
- -
-
- - - - - -
-
-

- default - - transform-origin: 50% 50% 0; -

-
-

The transform origin is in the center of the element.

- -
-
- - - - -
-
-
-

- - transform-origin: 20px 70%; -

-
-

You can use 2 values:

-
    -
  • the first value is the horizontal axis
    • -
  • the second is the vertical axis
    • -
-
-
- - - - -
-
-
-

- - transform-origin: top right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

- -
-
- - - - -
-
-
-

- - transform-origin: center bottom; -

-
-

When using keywords, you can change the order of the axis, as long as each keywords is unambiguous.

- -
-
- - - - -
- -
- -
-
- -

- #transform -

-
-

Defines how the element is transformed.

- -
- -
- - - - - -
-
-

- default - - transform: none; -

-
-

Removes any transformation.

- -
-
- - - -
-
-
-

- - transform: translateX(40px); -

-
-

Move the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - transform: translateY(20px); -

-
-

Move the element on the vertical axis.

- -
-
- - - -
-
-
-

- - transform: translateY(100%); -

-
-

You can use percentage values: the percentage is relative to the element itself, and not the parent.

- -
-
- - - -
-
-
-

- - transform: translate(20px, -10%); -

-
-

You can use translate() with two values:

-
    -
  • the first value is for the horizontal axis
    • -
  • the second value is for the vertical axis
    • -
-
-
- - - -
-
-
-

- - transform: scaleX(1.5); -

-
-

Scale the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - transform: scaleY(0.4); -

-
-

Scale the element on the vertical axis.

- -
-
- - - -
-
-
-

- - transform: scaleY(-2); -

-
-

You can use negative values: it will invert the element.

- -
-
- - - -
-
-
-

- - transform: scale(0.8, 0.8); -

-
-

You can use scale() with two values:

-
    -
  • the first value is for the horizontal axis
    • -
  • the second value is for the vertical axis
    • -
-

By using the same value for both, you can scale proportionally.

- -
-
- - - -
-
-
-

- - transform: rotate(45deg); -

-
-

Rotate the element.

-

You can use:

-
    -
  • degrees from 0 to 360deg -
    • -
  • gradians from 0 to 400grad -
    • -
  • radians from 0 to 2πrad -
    • -
  • turns from 0 to 1turn -
    • -
-
-
- - - -
-
-
-

- - transform: skewX(15deg); -

-
-

Skew the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - transform: skewY(45deg); -

-
-

Skew the element on the vertical axis.

- -
-
- - - -
-
-
-

- - transform: skew(10deg, -20deg); -

-
-

You can use skew() with two values:

-
    -
  • the first value is for the horizontal axis
    • -
  • the second value is for the vertical axis
    • -
-
-
- - - -
-
-
-

- - transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px); -

-
-

You can combine multiple transformations by separating them with a space.

- -
-
- - - -
- - -
- -
-
- -

- #transition-delay -

-
-

Defines how long the transition has to wait before starting.

- -
- -
- - - - - - - -
-
-

- default - - transition-delay: 0s; -

-
-

The transition will wait zero seconds, and thus start right away.

- -
-
- - -
-
-
-

- - transition-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - transition-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
-
-
-

- - transition-delay: -500ms; -

-
-

You can use negative values: the transition will start as if it had already been playing for 500ms.

- -
-
- - - -
- -
- -
-
- -

- #transition-duration -

-
-

Defines how long the transition lasts.

- -
- -
- - - - - - - -
-
-

- default - - transition-duration: 0s; -

-
-

The transition will last zero seconds, and is thus instant.

- -
-
- - - -
-
-
-

- - transition-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - transition-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
- -
- -
-
- -

- #transition-property -

-
-

Defines which properties will transition.

- -
- -
- - - - - - - -
-
-

- default - - transition-property: all; -

-
-

The element will transition all properties:

- -
-
- - - -
-
-
-

- - transition-property: none; -

-
-

The element will transition no property: the transition is thus instant.

- -
-
- - - -
-
-
-

- - transition-property: background; -

-
-

The element will only transtion the background property.

- -
-
- - - -
-
-
-

- - transition-property: color; -

-
-

The element will only transtion the color property.

- -
-
- - - -
-
-
-

- - transition-property: transform; -

-
-

The element will only transtion the transform property.

- -
-
- - - -
- -
- -
-
- -

- #transition-timing-function -

-
-

Defines how the values between the start and the end of the transition are calculated.

- -
- -
- - - - - - - -
-
-

- default - - transition-timing-function: ease; -

-
-

The transition starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - transition-timing-function: ease-in; -

-
-

The transition starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - transition-timing-function: ease-out; -

-
-

The transition starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - transition-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The transition starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - transition-timing-function: linear; -

-
-

The transition has a *constant speed.

- -
-
- - - -
-
-
-

- - transition-timing-function: step-start; -

-
-

The transition jumps instantly to the final state.

- -
-
- - - -
-
-
-

- - transition-timing-function: step-end; -

-
-

The transition stays at the initial state until the end, when it instantly jumps to the final state.

- -
-
- - - -
-
-
-

- - transition-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

- -
-
- - - -
- -
- -
-
- -

- #transition -

-
-

Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

-

Only transition-duration is required.

- -
- -
- - - - - -
-
-

- - transition: 1s; -

-
-
    -
  • transition-duration is set to 1s -
    • -
  • transition-property defaults to all -
    • -
  • transition-timing-function defaults to ease -
    • -
  • transition-delay defaults to 0s -
    • -
-
-
- - - -
-
-
-

- - transition: 1s linear; -

-
-
    -
  • transition-duration is set to 1s -
    • -
  • transition-property defaults to all -
    • -
  • transition-timing-function is set to linear -
    • -
  • transition-delay defaults to 0s -
    • -
-
-
- - - -
-
-
-

- - transition: background 1s linear; -

-
-
    -
  • transition-duration is set to 1s -
    • -
  • transition-property is set to background -
    • -
  • transition-timing-function is set to linear -
    • -
  • transition-delay defaults to 0s -
    • -
-
-
- - - -
-
-
-

- - transition: background 1s linear 500ms; -

-
-
    -
  • transition-duration is set to 1s -
    • -
  • transition-property is set to background -
    • -
  • transition-timing-function is set to linear -
    • -
  • transition-delay is set to 500ms -
    • -
-
-
- - - -
-
-
-

- - transition: background 4s, transform 1s; -

-
-

You can combine multiple properties with their own transition duration.

- -
-
- - - -
- -
- -
-
- -

- #white-space -

-
-

Defines how the element's white space is handled.

- -
- -
- - - -
-
-

- default - - white-space: normal; -

-
-

Sequences of spaces are combined into one. -
Line breaks are ignored. -
The text content is wrapped.

- -
-
- - - -
-
-
-

- - white-space: nowrap; -

-
-

Sequences of spaces are combined into one. -
Line breaks are ignored. -
The text content is not wrapped and remains on a single line.

- -
-
- - - -
-
-
-

- - white-space: pre; -

-
-

The white space is exactly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break only on new lines and <br> -
    • -
- -
-
- - - -
-
-
-

- - white-space: pre-wrap; -

-
-

The white space is mostly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
- -
-
- - - -
-
-
-

- - white-space: pre-line; -

-
-

Only new lines are preserved.

-
    -
  • Sequences of spaces are combined into one
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
- -
-
- - - -
- -
- -
-
- -

- #width -

-
-

Defines the width of the element.

- -
- -
- -
-
-

- default - - width: auto; -

-
-

The element will automatically adjust its width to allow its content to be displayed correctly.

- -
-
- - - -
-
-
-

- - width: 240px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

- -
-
- - - -
-
-
-

- - width: 50%; -

-
-

If you use percentages, the value is relative to the container's width.

- -
-
- - - -
- -
- -
-
- -

- #will-change -

-
-

Defines which properties are expected to change in the future (either through CSS or JavaScript).

- -
- -
- -
-
-

- default - - will-change: auto; -

-
-

Doesn't tell the browser to optimize any property.

- +{% for property in site.data.properties %} +
+
+ +

+ #{{property.name}} +

+
+ {{property.description}}
-
- - - -
-
-
-

- - will-change: scroll-position; -

-
-

Tells the browser to optimize for the element's scroll position, as it might change in the future.

- -
-
- - - -
-
-
-

- - will-change: contents; -

-
-

Tells the browser to optimize for the element's contents, as it might change in the future.

- -
-
- - - -
-
-
-

- - will-change: box-shadow; -

-
-

You can specify any other CSS property. For example, this tells the browser to optimize for the element's box-shadow, as it might change in the future.

- -
-
- - - -
- -
- -
-
- -

- #word-break -

-
-

Defines how words should break when reaching the end of a line.

- -
- -
- - - -
-
-

- default - - word-break: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

- -
-
- - - -
-
-
-

- - word-break: break-all; -

-
-

Words with no space will break as soon as they reach the end of a line.

- -
-
- - - -
- -
- -
-
- -

- #word-spacing -

-
-

Defines the spacing between words of a block of text.

- -
- -
- -
-
-

- default - - word-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - word-spacing: 5px; -

-
-

You can use pixel values.

- +
+ {% for action in property.actions %} + {{action}} + {% endfor %}
- - - -
-
-
-

- - word-spacing: 2em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

- -
-
- - -
- -
- -
-
- -

- #z-index -

-
-

Defines the order of the elements on the z-axis*8. It only works on positioned** elements (anything apart from static).

+ {% for example in property.examples %} +
+
+

+ {% if example.is_default %}default{% endif %} -

- -
- - - - - -
-
-

- default - - z-index: auto; -

-
-

The order is defined by the order in the HTML code:

-
    -
  • first in the code = behind
    • -
  • last in the code = in front
    • -
- -
-
- - -
-
-
-

- - z-index: 1; -

-
-

The z-index value is relative to the other ones. The target element is move in front of its siblings.

- -
-
+ - - -
-
-
-

- - z-index: -1; -

-
-

You can use negative values. The target element is move in behind its siblings.

- -
-
- - - + +
+ {% endfor %}
- -
+{% endfor %} From 62b529fd638f3afab7fb4c9312a67b73881a75bd Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 18:32:57 +0000 Subject: [PATCH 3/8] Remove explicit single page templates --- property/align-content/index.html | 163 -------- property/align-items/index.html | 145 ------- property/align-self/index.html | 145 ------- property/animation-delay/index.html | 118 ------ property/animation-direction/index.html | 118 ------ property/animation-duration/index.html | 97 ----- property/animation-fill-mode/index.html | 118 ------ property/animation-iteration-count/index.html | 97 ----- property/animation-name/index.html | 114 ------ property/animation-play-state/index.html | 88 ----- property/animation-timing-function/index.html | 203 ---------- property/animation/index.html | 29 -- property/background-attachment/index.html | 73 ---- property/background-clip/index.html | 93 ----- property/background-color/index.html | 179 --------- property/background-image/index.html | 225 ----------- property/background-origin/index.html | 94 ----- property/background-position/index.html | 93 ----- property/background-repeat/index.html | 114 ------ property/background-size/index.html | 136 ------- property/background/index.html | 28 -- property/border-bottom-color/index.html | 92 ----- property/border-bottom-left-radius/index.html | 114 ------ .../border-bottom-right-radius/index.html | 114 ------ property/border-bottom-style/index.html | 156 -------- property/border-bottom-width/index.html | 72 ---- property/border-bottom/index.html | 70 ---- property/border-collapse/index.html | 76 ---- property/border-color/index.html | 180 --------- property/border-left-color/index.html | 92 ----- property/border-left-style/index.html | 156 -------- property/border-left-width/index.html | 72 ---- property/border-left/index.html | 70 ---- property/border-radius/index.html | 114 ------ property/border-right-color/index.html | 92 ----- property/border-right-style/index.html | 156 -------- property/border-right-width/index.html | 72 ---- property/border-right/index.html | 70 ---- property/border-style/index.html | 156 -------- property/border-top-color/index.html | 92 ----- property/border-top-left-radius/index.html | 114 ------ property/border-top-right-radius/index.html | 114 ------ property/border-top-style/index.html | 156 -------- property/border-top-width/index.html | 72 ---- property/border-top/index.html | 70 ---- property/border-width/index.html | 71 ---- property/border/index.html | 70 ---- property/bottom/index.html | 97 ----- property/box-shadow/index.html | 139 ------- property/box-sizing/index.html | 80 ---- property/clear/index.html | 117 ------ property/color/index.html | 180 --------- property/column-count/index.html | 72 ---- property/column-gap/index.html | 74 ---- property/column-width/index.html | 73 ---- property/content/index.html | 129 ------- property/cursor/index.html | 343 ---------------- property/display/index.html | 252 ------------ property/flex-basis/index.html | 74 ---- property/flex-direction/index.html | 114 ------ property/flex-flow/index.html | 28 -- property/flex-grow/index.html | 96 ----- property/flex-shrink/index.html | 98 ----- property/flex-wrap/index.html | 93 ----- property/float/index.html | 92 ----- property/font-family/index.html | 157 -------- property/font-size/index.html | 182 --------- property/font-style/index.html | 93 ----- property/font-variant/index.html | 72 ---- property/font-weight/index.html | 115 ------ property/font/index.html | 28 -- property/height/index.html | 72 ---- property/justify-content/index.html | 135 ------- property/left/index.html | 95 ----- property/letter-spacing/index.html | 92 ----- property/line-height/index.html | 117 ------ property/list-style-image/index.html | 73 ---- property/list-style-position/index.html | 76 ---- property/list-style-type/index.html | 140 ------- property/list-style/index.html | 28 -- property/margin-bottom/index.html | 116 ------ property/margin-left/index.html | 138 ------- property/margin-right/index.html | 138 ------- property/margin-top/index.html | 116 ------ property/margin/index.html | 141 ------- property/max-height/index.html | 92 ----- property/max-width/index.html | 91 ----- property/min-height/index.html | 93 ----- property/min-width/index.html | 93 ----- property/mix-blend-mode/index.html | 365 ------------------ property/opacity/index.html | 92 ----- property/order/index.html | 114 ------ property/outline-color/index.html | 180 --------- property/outline-style/index.html | 156 -------- property/outline-width/index.html | 72 ---- property/outline/index.html | 70 ---- property/overflow-wrap/index.html | 72 ---- property/overflow-x/index.html | 114 ------ property/overflow-y/index.html | 114 ------ property/overflow/index.html | 115 ------ property/padding-bottom/index.html | 116 ------ property/padding-left/index.html | 116 ------ property/padding-right/index.html | 116 ------ property/padding-top/index.html | 116 ------ property/padding/index.html | 141 ------- property/pointer-events/index.html | 73 ---- property/position/index.html | 126 ------ property/resize/index.html | 118 ------ property/text-align/index.html | 112 ------ property/text-decoration/index.html | 71 ---- property/text-indent/index.html | 93 ----- property/text-overflow/index.html | 75 ---- property/text-shadow/index.html | 116 ------ property/text-transform/index.html | 113 ------ property/top/index.html | 97 ----- property/transform-origin/index.html | 122 ------ property/transform/index.html | 330 ---------------- property/transition-delay/index.html | 115 ------ property/transition-duration/index.html | 95 ----- property/transition-property/index.html | 137 ------- .../transition-timing-function/index.html | 201 ---------- property/transition/index.html | 132 ------- property/white-space/index.html | 162 -------- property/width/index.html | 92 ----- property/will-change/index.html | 113 ------ property/word-break/index.html | 72 ---- property/word-spacing/index.html | 92 ----- property/z-index/index.html | 97 ----- 128 files changed, 14620 deletions(-) delete mode 100644 property/align-content/index.html delete mode 100644 property/align-items/index.html delete mode 100644 property/align-self/index.html delete mode 100644 property/animation-delay/index.html delete mode 100644 property/animation-direction/index.html delete mode 100644 property/animation-duration/index.html delete mode 100644 property/animation-fill-mode/index.html delete mode 100644 property/animation-iteration-count/index.html delete mode 100644 property/animation-name/index.html delete mode 100644 property/animation-play-state/index.html delete mode 100644 property/animation-timing-function/index.html delete mode 100644 property/animation/index.html delete mode 100644 property/background-attachment/index.html delete mode 100644 property/background-clip/index.html delete mode 100644 property/background-color/index.html delete mode 100644 property/background-image/index.html delete mode 100644 property/background-origin/index.html delete mode 100644 property/background-position/index.html delete mode 100644 property/background-repeat/index.html delete mode 100644 property/background-size/index.html delete mode 100644 property/background/index.html delete mode 100644 property/border-bottom-color/index.html delete mode 100644 property/border-bottom-left-radius/index.html delete mode 100644 property/border-bottom-right-radius/index.html delete mode 100644 property/border-bottom-style/index.html delete mode 100644 property/border-bottom-width/index.html delete mode 100644 property/border-bottom/index.html delete mode 100644 property/border-collapse/index.html delete mode 100644 property/border-color/index.html delete mode 100644 property/border-left-color/index.html delete mode 100644 property/border-left-style/index.html delete mode 100644 property/border-left-width/index.html delete mode 100644 property/border-left/index.html delete mode 100644 property/border-radius/index.html delete mode 100644 property/border-right-color/index.html delete mode 100644 property/border-right-style/index.html delete mode 100644 property/border-right-width/index.html delete mode 100644 property/border-right/index.html delete mode 100644 property/border-style/index.html delete mode 100644 property/border-top-color/index.html delete mode 100644 property/border-top-left-radius/index.html delete mode 100644 property/border-top-right-radius/index.html delete mode 100644 property/border-top-style/index.html delete mode 100644 property/border-top-width/index.html delete mode 100644 property/border-top/index.html delete mode 100644 property/border-width/index.html delete mode 100644 property/border/index.html delete mode 100644 property/bottom/index.html delete mode 100644 property/box-shadow/index.html delete mode 100644 property/box-sizing/index.html delete mode 100644 property/clear/index.html delete mode 100644 property/color/index.html delete mode 100644 property/column-count/index.html delete mode 100644 property/column-gap/index.html delete mode 100644 property/column-width/index.html delete mode 100644 property/content/index.html delete mode 100644 property/cursor/index.html delete mode 100644 property/display/index.html delete mode 100644 property/flex-basis/index.html delete mode 100644 property/flex-direction/index.html delete mode 100644 property/flex-flow/index.html delete mode 100644 property/flex-grow/index.html delete mode 100644 property/flex-shrink/index.html delete mode 100644 property/flex-wrap/index.html delete mode 100644 property/float/index.html delete mode 100644 property/font-family/index.html delete mode 100644 property/font-size/index.html delete mode 100644 property/font-style/index.html delete mode 100644 property/font-variant/index.html delete mode 100644 property/font-weight/index.html delete mode 100644 property/font/index.html delete mode 100644 property/height/index.html delete mode 100644 property/justify-content/index.html delete mode 100644 property/left/index.html delete mode 100644 property/letter-spacing/index.html delete mode 100644 property/line-height/index.html delete mode 100644 property/list-style-image/index.html delete mode 100644 property/list-style-position/index.html delete mode 100644 property/list-style-type/index.html delete mode 100644 property/list-style/index.html delete mode 100644 property/margin-bottom/index.html delete mode 100644 property/margin-left/index.html delete mode 100644 property/margin-right/index.html delete mode 100644 property/margin-top/index.html delete mode 100644 property/margin/index.html delete mode 100644 property/max-height/index.html delete mode 100644 property/max-width/index.html delete mode 100644 property/min-height/index.html delete mode 100644 property/min-width/index.html delete mode 100644 property/mix-blend-mode/index.html delete mode 100644 property/opacity/index.html delete mode 100644 property/order/index.html delete mode 100644 property/outline-color/index.html delete mode 100644 property/outline-style/index.html delete mode 100644 property/outline-width/index.html delete mode 100644 property/outline/index.html delete mode 100644 property/overflow-wrap/index.html delete mode 100644 property/overflow-x/index.html delete mode 100644 property/overflow-y/index.html delete mode 100644 property/overflow/index.html delete mode 100644 property/padding-bottom/index.html delete mode 100644 property/padding-left/index.html delete mode 100644 property/padding-right/index.html delete mode 100644 property/padding-top/index.html delete mode 100644 property/padding/index.html delete mode 100644 property/pointer-events/index.html delete mode 100644 property/position/index.html delete mode 100644 property/resize/index.html delete mode 100644 property/text-align/index.html delete mode 100644 property/text-decoration/index.html delete mode 100644 property/text-indent/index.html delete mode 100644 property/text-overflow/index.html delete mode 100644 property/text-shadow/index.html delete mode 100644 property/text-transform/index.html delete mode 100644 property/top/index.html delete mode 100644 property/transform-origin/index.html delete mode 100644 property/transform/index.html delete mode 100644 property/transition-delay/index.html delete mode 100644 property/transition-duration/index.html delete mode 100644 property/transition-property/index.html delete mode 100644 property/transition-timing-function/index.html delete mode 100644 property/transition/index.html delete mode 100644 property/white-space/index.html delete mode 100644 property/width/index.html delete mode 100644 property/will-change/index.html delete mode 100644 property/word-break/index.html delete mode 100644 property/word-spacing/index.html delete mode 100644 property/z-index/index.html diff --git a/property/align-content/index.html b/property/align-content/index.html deleted file mode 100644 index e216e4c6..00000000 --- a/property/align-content/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -layout: single -property_name: align-content ---- - -
-
- -

- #align-content -

-
-

Defines how each line is aligned within a flexbox container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox items.

- -
- -
- - - - - - - -
-
-

- default - - - align-content: stretch; -

-
-

Each line will stretch to fill the remaining space.

-

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

- -
-
- - - -
-
-
-

- - - align-content: flex-start; -

-
-

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - - align-content: flex-end; -

-
-

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - - align-content: center; -

-
-

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

- -
-
- - - - -
-
-
-

- - - align-content: space-between; -

-
-

Each line will only fill the space it needs. The remaining space will appear between the lines.

- -
-
- - - - -
-
-
-

- - - align-content: space-around; -

-
-

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

- -
-
- - - - -
- -
diff --git a/property/align-items/index.html b/property/align-items/index.html deleted file mode 100644 index 160f580e..00000000 --- a/property/align-items/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -layout: single -property_name: align-items ---- - -
-
- -

- #align-items -

-
-

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

- -
- -
- - - - - - - -
-
-

- - - align-items: flex-start; -

-
-

The flexbox items are aligned at the start of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

- -
-
- - - - -
-
-
-

- - - align-items: flex-end; -

-
-

The flexbox items are aligned at the end of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

- -
-
- - - - -
-
-
-

- - - align-items: center; -

-
-

The flexbox items are aligned at the center of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

- -
-
- - - - -
-
-
-

- - - align-items: baseline; -

-
-

The flexbox items are aligned at the baseline of the cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

- -
-
- - - - -
-
-
-

- - - align-items: stretch; -

-
-

The flexbox items will stretch across the whole cross axis.

-

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

- -
-
- - - - -
- -
diff --git a/property/align-self/index.html b/property/align-self/index.html deleted file mode 100644 index fec214ae..00000000 --- a/property/align-self/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -layout: single -property_name: align-self ---- - -
-
- -

- #align-self -

-
-

Works like align-items, but applies only to a single flexbox item, instead of all of them.

- -
- -
- - - - - - - -
-
-

- - - align-self: flex-start; -

-
-

If the container has align-items: center and the target has align-items: flex-start, only the target will be at the start of the cross axis.

-

By default, this means it will be aligned vertically at the top.

- -
-
- - - - -
-
-
-

- - - align-self: flex-end; -

-
-

If the container has align-items: center and the target has align-items: flex-end, only the target will be at the end of the cross axis.

-

By default, this means it will be aligned vertically at the bottom.

- -
-
- - - - -
-
-
-

- - - align-self: center; -

-
-

If the container has align-items: flex-start and the target has align-items: center, only the target will be at the center of the cross axis.

-

By default, this means it will be vertically centered.

- -
-
- - - - - -
-
-
-

- - - align-self: baseline; -

-
-

If the container has align-items: center and the target has align-items: baseline, only the target will be at the baseline of the cross axis.

-

By default, this means it will be aligned along the basline of the text.

- -
-
- - - - -
-
-
-

- - - align-self: stretch; -

-
-

If the container has align-items: center and the target has align-items: stretch, only the target will stretch along the whole cross axis.

- -
-
- - - - -
- -
diff --git a/property/animation-delay/index.html b/property/animation-delay/index.html deleted file mode 100644 index c1e8c8ed..00000000 --- a/property/animation-delay/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -layout: single -property_name: animation-delay ---- - -
-
- -

- #animation-delay -

-
-

Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-delay: 0s; -

-
-

The animation will wait zero seconds, and thus start right away.

- -
-
- - - -
-
-
-

- - - animation-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - - animation-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
-
-
-

- - - animation-delay: -500ms; -

-
-

You can use negative values: the animation will start as if it had already been playing for 500ms.

- -
-
- - - -
- -
diff --git a/property/animation-direction/index.html b/property/animation-direction/index.html deleted file mode 100644 index 19cf567d..00000000 --- a/property/animation-direction/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -layout: single -property_name: animation-direction ---- - -
-
- -

- #animation-direction -

-
-

Defines in which direction the animation is played.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-direction: normal; -

-
-

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

- -
-
- - - -
-
-
-

- - - animation-direction: reverse; -

-
-

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

- -
-
- - - -
-
-
-

- - - animation-direction: alternate; -

-
-

The animation is played forwards first, then backwards:

-
  • starts at the first keyframe
  • stops at the last keyframe
  • starts again, but at the last keyframe
  • stops at the first keyframe
-
-
- - - -
-
-
-

- - - animation-direction: alternate-reverse; -

-
-

The animation is played backwards first, then forwards:

-
  • starts at the last keyframe
  • stops at the first keyframe
  • starts again, but at the first keyframe
  • stops at the last keyframe
-
-
- - - -
- -
diff --git a/property/animation-duration/index.html b/property/animation-duration/index.html deleted file mode 100644 index f260a26a..00000000 --- a/property/animation-duration/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: single -property_name: animation-duration ---- - -
-
- -

- #animation-duration -

-
-

Defines how long the animation lasts.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-duration: 0s; -

-
-

The default value is zero seconds: the animation will simply not play.

- -
-
- - - -
-
-
-

- - - animation-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - - animation-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
- -
diff --git a/property/animation-fill-mode/index.html b/property/animation-fill-mode/index.html deleted file mode 100644 index 53095c46..00000000 --- a/property/animation-fill-mode/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -layout: single -property_name: animation-fill-mode ---- - -
-
- -

- #animation-fill-mode -

-
-

Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-fill-mode: none; -

-
-

The animation styles do not affect the default style: the element is set to its default state before the animation starts, and returns to that default state after the animation ends.

- -
-
- - - -
-
-
-

- - - animation-fill-mode: forwards; -

-
-

The last styles applied at the end of the animation are retained afterwards.

- -
-
- - - -
-
-
-

- - - animation-fill-mode: backwards; -

-
-

The animation's styles will already be applied before the animation actually starts.

- -
-
- - - -
-
-
-

- - - animation-fill-mode: both; -

-
-

The styles are applied before and after the animation plays.

- -
-
- - - -
- -
diff --git a/property/animation-iteration-count/index.html b/property/animation-iteration-count/index.html deleted file mode 100644 index dc3de769..00000000 --- a/property/animation-iteration-count/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: single -property_name: animation-iteration-count ---- - -
-
- -

- #animation-iteration-count -

-
-

Defines how many times the animation is played.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-iteration-count: 1; -

-
-

The animation will only play once.

- -
-
- - - -
-
-
-

- - - animation-iteration-count: 2; -

-
-

You can use integer values to define a specific amount of times the animation will play.

- -
-
- - - -
-
-
-

- - - animation-iteration-count: infinite; -

-
-

By using the keyword infinite, the animation will play indefinitely.

- -
-
- - - -
- -
diff --git a/property/animation-name/index.html b/property/animation-name/index.html deleted file mode 100644 index eb404f50..00000000 --- a/property/animation-name/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: animation-name ---- - -
-
- -

- #animation-name -

-
-

Defines which animation keyframes to use.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-name: none; -

-
-

If no animation name is specified, no animation is played.

- -
-
- - - -
-
-
-

- - - animation-name: fadeIn; -

-
-

If a name is specified, the keyframes matching that name will be used.

-

For example, the fadeIn animation looks like this:

-

@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

- -
-
- - - -
-
-
-

- - - animation-name: moveRight; -

-
-

Another example: the moveRight animation:

-

@keyframes moveRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100px);
-  }
-}

- -
-
- - - -
- -
diff --git a/property/animation-play-state/index.html b/property/animation-play-state/index.html deleted file mode 100644 index 0335820d..00000000 --- a/property/animation-play-state/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -layout: single -property_name: animation-play-state ---- - -
-
- -

- #animation-play-state -

-
-

Defines if an animation is playing or not.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-play-state: running; -

-
-

If the animation-duration and animation-name are defined, the animation will start playing automatically.

- -
-
- - - -
-
-
-

- - - animation-play-state: paused; -

-
-

The animation is set paused at the first keyframe.

-

This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.

-

In this example, the square is visible by default, but the on the first keyframe of fadeAndMove, the opacity is set to 0. When paused, the animation will be "stuck" on this first keyframe, and will thus be invisible.

-

@keyframes fadeAndMove {
-  from {
-    opacity: 0;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-}

- -
-
- - - -
- -
diff --git a/property/animation-timing-function/index.html b/property/animation-timing-function/index.html deleted file mode 100644 index 2fb7ac0c..00000000 --- a/property/animation-timing-function/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -layout: single -property_name: animation-timing-function ---- - -
-
- -

- #animation-timing-function -

-
-

Defines how the values between the start and the end of the animation are calculated.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - animation-timing-function: ease; -

-
-

The animation starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-in; -

-
-

The animation starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-out; -

-
-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The animation starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - animation-timing-function: linear; -

-
-

The animation has a *constant speed.

- -
-
- - - -
-
-
-

- - - animation-timing-function: step-start; -

-
-

The animation jumps instantly to the final state.

- -
-
- - - -
-
-
-

- - - animation-timing-function: step-end; -

-
-

The animation stays at the initial state until the end, when it instantly jumps to the final state.

- -
-
- - - -
-
-
-

- - - animation-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

- -
-
- - - -
- -
diff --git a/property/animation/index.html b/property/animation/index.html deleted file mode 100644 index c84e2175..00000000 --- a/property/animation/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: single -property_name: animation ---- - -
-
- -

- #animation -

-
-

Shorthand property for animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode and animation-play-state.

-

Only animation-duration and animation-name are required.

- -
- -
- - - - - - -
diff --git a/property/background-attachment/index.html b/property/background-attachment/index.html deleted file mode 100644 index d6769da3..00000000 --- a/property/background-attachment/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: single -property_name: background-attachment ---- - -
-
- -

- #background-attachment -

-
-

Defines how the background image will behave when scrolling the page.

- -
- -
- - - - - - - -
-
-

- default - - - background-attachment: scroll; -

-
-

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

- -
-
- - - -
-
-
-

- - - background-attachment: fixed; -

-
-

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

- -
-
- - - -
- -
diff --git a/property/background-clip/index.html b/property/background-clip/index.html deleted file mode 100644 index 85d4000b..00000000 --- a/property/background-clip/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: background-clip ---- - -
-
- -

- #background-clip -

-
-

Defines how far the background should extend within the element.

- -
- -
- - - - - - -
-
-

- default - - - background-clip: border-box; -

-
-

The background extends completely throughout the element, even under the border.

- -
-
- - - -
-
-
-

- - - background-clip: padding-box; -

-
-

The background only extends to the edge of the border: it includes the padding but not the border.

- -
-
- - - -
-
-
-

- - - background-clip: content-box; -

-
-

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

- -
-
- - - -
- -
diff --git a/property/background-color/index.html b/property/background-color/index.html deleted file mode 100644 index eee2e172..00000000 --- a/property/background-color/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -layout: single -property_name: background-color ---- - -
-
- -

- #background-color -

-
-

Defines the color of the element's background.

- -
- -
- - - - - -
-
-

- default - - - background-color: transparent; -

-
-

By default, the background color is transparent, basically meaning that there is no background color.

- -
-
- - - -
-
-
-

- - - background-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - background-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - - background-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - - background-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - - background-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
-
- - - -
-
-
-

- - - background-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
diff --git a/property/background-image/index.html b/property/background-image/index.html deleted file mode 100644 index 515bbc98..00000000 --- a/property/background-image/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -layout: single -property_name: background-image ---- - -
-
- -

- #background-image -

-
-

Defines an image as the background of the element.

- -
- -
- - - - - - -
-
-

- default - - - background-image: none; -

-
-

Removes any background image.

- -
-
- - - -
-
-
-

- - - background-image: url(/images/jt.png); -

-
-

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

- -
-
- - - - -
-
-
-

- - - background-image: linear-gradient(red, blue); -

-
-

You can define a linear gradient as the background image.

-

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

-

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

- -
-
- - - -
-
-
-

- - - background-image: linear-gradient(45deg, red, blue); -

-
-

You can specify an angle, either in degrees, or with keywords.

-

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

-

In this example, 45deg means 2:30, or the top right corner.

- -
-
- - - -
-
-
-

- - - background-image: radial-gradient(green, purple); -

-
-

You can define a radial gradient as the background image.

-

You need to define at least two colors. The first one will be at the center, the second one at the edges.

- -
-
- - - -
-
-
-

- - - background-image: radial-gradient(circle, green, purple); -

-
-

You can specify the shape of the radial gradient: circle or ellipse (default).

- -
-
- - - -
-
-
-

- - - background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%); -

-
-

You can specify color stops using percentage values.

- -
-
- - - -
-
-
-

- - - background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%); -

-
-

You can specify where the gradient should end:

-
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
-
-
- - - -
-
-
-

- - - background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%); -

-
-

Like with the background-position, you can specify the position of the gradient.

- -
-
- - - -
- -
diff --git a/property/background-origin/index.html b/property/background-origin/index.html deleted file mode 100644 index c17da41e..00000000 --- a/property/background-origin/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -layout: single -property_name: background-origin ---- - -
-
- -

- #background-origin -

-
-

Defines the origin of the background image.

- -
- -
- - - - - - - -
-
-

- default - - - background-origin: padding-box; -

-
-

The background image starts at the edge of the border: within padding but not the border.

- -
-
- - - -
-
-
-

- - - background-origin: border-box; -

-
-

The background image starts under the border.

- -
-
- - - -
-
-
-

- - - background-origin: content-box; -

-
-

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

- -
-
- - - -
- -
diff --git a/property/background-position/index.html b/property/background-position/index.html deleted file mode 100644 index 0a76fe37..00000000 --- a/property/background-position/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: background-position ---- - -
-
- -

- #background-position -

-
-

Defines the position of the background image.

- -
- -
- - - - - - -
-
-

- default - - - background-position: 0% 0%; -

-
-

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

- -
-
- - - -
-
-
-

- - - background-position: bottom right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

- -
-
- - - -
-
-
-

- - - background-position: center center; -

-
-

The background image will be positioned in the center of the element.

- -
-
- - - -
- -
diff --git a/property/background-repeat/index.html b/property/background-repeat/index.html deleted file mode 100644 index 24792749..00000000 --- a/property/background-repeat/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: background-repeat ---- - -
-
- -

- #background-repeat -

-
-

Defines how the background image repeats itself across the element's background, starting from the background position.

- -
- -
- - - - - - -
-
-

- default - - - background-repeat: repeat; -

-
-

The background image will repeat itself both horizontally and vertically.

- -
-
- - - -
-
-
-

- - - background-repeat: repeat-x; -

-
-

The background image will only repeat itself horizontally.

- -
-
- - - -
-
-
-

- - - background-repeat: repeat-y; -

-
-

The background image will only repeat itself vertically.

- -
-
- - - -
-
-
-

- - - background-repeat: no-repeat; -

-
-

The background image will only appear once.

- -
-
- - - -
- -
diff --git a/property/background-size/index.html b/property/background-size/index.html deleted file mode 100644 index 2f3f33c5..00000000 --- a/property/background-size/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -layout: single -property_name: background-size ---- - -
-
- -

- #background-size -

-
-

Defines the size of the background image.

- -
- -
- - - - - - -
-
-

- default - - - background-size: auto auto; -

-
-

The background image will retain its original size.

-

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

- -
-
- - - -
-
-
-

- - - background-size: 120px 80px; -

-
-

You can specify a size in pixels:

-
  • the first value is the horizontal size
  • the second is the vertical size
-
-
- - - -
-
-
-

- - - background-size: 100% 50%; -

-
-

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

- -
-
- - - -
-
-
-

- - - background-size: contain; -

-
-

The keyword contain will resize the background image to make sure it remains fully visible.

- -
-
- - - -
-
-
-

- - - background-size: cover; -

-
-

The keyword cover will resize the background image to make sure the element is fully covered.

- -
-
- - - -
- -
diff --git a/property/background/index.html b/property/background/index.html deleted file mode 100644 index 5ae208e2..00000000 --- a/property/background/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: single -property_name: background ---- - -
-
- -

- #background -

-
-

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

- -
- -
- - - - - - -
diff --git a/property/border-bottom-color/index.html b/property/border-bottom-color/index.html deleted file mode 100644 index c9911169..00000000 --- a/property/border-bottom-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: border-bottom-color ---- - -
-
- -

- #border-bottom-color -

-
-

Like border-color, but for the bottom border only.

- -
- -
- - - - - - -
-
-

- - - border-bottom-color: transparent; -

-
-

Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-bottom-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-bottom-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
diff --git a/property/border-bottom-left-radius/index.html b/property/border-bottom-left-radius/index.html deleted file mode 100644 index b5866104..00000000 --- a/property/border-bottom-left-radius/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: border-bottom-left-radius ---- - -
-
- -

- #border-bottom-left-radius -

-
-

Defines the radius of the bottom left corner.

- -
- -
- - - - - - -
-
-

- default - - - border-bottom-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-bottom-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - border-bottom-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the left border.

- -
-
- - - -
-
-
-

- - - border-bottom-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the left border.

- -
-
- - - -
- -
diff --git a/property/border-bottom-right-radius/index.html b/property/border-bottom-right-radius/index.html deleted file mode 100644 index 7038a163..00000000 --- a/property/border-bottom-right-radius/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: border-bottom-right-radius ---- - -
-
- -

- #border-bottom-right-radius -

-
-

Defines the radius of the bottom right corner.

- -
- -
- - - - - - -
-
-

- default - - - border-bottom-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-bottom-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - border-bottom-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the right border.

- -
-
- - - -
-
-
-

- - - border-bottom-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the bottom border, the second one for the right border.

- -
-
- - - -
- -
diff --git a/property/border-bottom-style/index.html b/property/border-bottom-style/index.html deleted file mode 100644 index 3cf66b68..00000000 --- a/property/border-bottom-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: border-bottom-style ---- - -
-
- -

- #border-bottom-style -

-
-

Like border-style, but for the bottom border only.

- -
- -
- - - - - - -
-
-

- default - - - border-bottom-style: none; -

-
-

Removes the bottom border.

- -
-
- - - -
-
-
-

- - - border-bottom-style: dotted; -

-
-

Turns the bottom border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-bottom-style: dashed; -

-
-

Turns the bottom border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - border-bottom-style: solid; -

-
-

Turns the bottom border into a solid line.

- -
-
- - - -
-
-
-

- - - border-bottom-style: double; -

-
-

Splits the bottom border into two lines.

- -
-
- - - -
-
-
-

- - - border-bottom-style: groove; -

-
-

Sets an inset style to the bottom border.

- -
-
- - - -
- -
diff --git a/property/border-bottom-width/index.html b/property/border-bottom-width/index.html deleted file mode 100644 index 069d9e62..00000000 --- a/property/border-bottom-width/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: border-bottom-width ---- - -
-
- -

- #border-bottom-width -

-
-

Like border-width, but for the bottom border only.

- -
- -
- - - - - - -
-
-

- default - - - border-bottom-width: 0; -

-
-

Removes the bottom border.

- -
-
- - - -
-
-
-

- - - border-bottom-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
diff --git a/property/border-bottom/index.html b/property/border-bottom/index.html deleted file mode 100644 index 1afbc049..00000000 --- a/property/border-bottom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: border-bottom ---- - -
-
- -

- #border-bottom -

-
-

Shorthand property for border-bottom-width border-bottom-style and border-bottom-color.

- -
- -
- - - - - -
-
-

- - - border-bottom: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-bottom: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/border-collapse/index.html b/property/border-collapse/index.html deleted file mode 100644 index 852419f7..00000000 --- a/property/border-collapse/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: single -property_name: border-collapse ---- - -
-
- -

- #border-collapse -

-
-

Defines whether table borders should be separated or collapsed.

- -
- -
- - - - - - -
-
-

- default - - - border-collapse: separate; -

-
-

Each table cell will display its own borders.

-

In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.

- -
-
- - - - -
-
-
-

- - - border-collapse: collapse; -

-
-

Adjacent table cells will merge their borders together.

-

The cell that appears first in the code will "win": its borders will mask those of the following cells.

- -
-
- - - - -
- -
diff --git a/property/border-color/index.html b/property/border-color/index.html deleted file mode 100644 index 117679b1..00000000 --- a/property/border-color/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -layout: single -property_name: border-color ---- - -
-
- -

- #border-color -

-
-

Defines the color of the element's borders.

- -
- -
- - - - - - -
-
-

- default - - - border-color: transparent; -

-
-

Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - - border-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - - border-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - - border-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
-
- - - -
-
-
-

- - - border-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
diff --git a/property/border-left-color/index.html b/property/border-left-color/index.html deleted file mode 100644 index c4abd6c3..00000000 --- a/property/border-left-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: border-left-color ---- - -
-
- -

- #border-left-color -

-
-

Like border-color, but for the left border only.

- -
- -
- - - - - - -
-
-

- - - border-left-color: transparent; -

-
-

Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-left-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-left-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
diff --git a/property/border-left-style/index.html b/property/border-left-style/index.html deleted file mode 100644 index 75f0581c..00000000 --- a/property/border-left-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: border-left-style ---- - -
-
- -

- #border-left-style -

-
-

Like border-style, but for the left border only.

- -
- -
- - - - - - -
-
-

- default - - - border-left-style: none; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - - border-left-style: dotted; -

-
-

Turns the left border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-left-style: dashed; -

-
-

Turns the left border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - border-left-style: solid; -

-
-

Turns the left border into a solid line.

- -
-
- - - -
-
-
-

- - - border-left-style: double; -

-
-

Splits the left border into two lines.

- -
-
- - - -
-
-
-

- - - border-left-style: groove; -

-
-

Sets an inset style to the left border.

- -
-
- - - -
- -
diff --git a/property/border-left-width/index.html b/property/border-left-width/index.html deleted file mode 100644 index 00e1fc19..00000000 --- a/property/border-left-width/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: border-left-width ---- - -
-
- -

- #border-left-width -

-
-

Like border-width, but for the left border only.

- -
- -
- - - - - - -
-
-

- default - - - border-left-width: 0; -

-
-

Removes the left border.

- -
-
- - - -
-
-
-

- - - border-left-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
diff --git a/property/border-left/index.html b/property/border-left/index.html deleted file mode 100644 index f65786e4..00000000 --- a/property/border-left/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: border-left ---- - -
-
- -

- #border-left -

-
-

Shorthand property for border-left-width border-left-style and border-left-color.

- -
- -
- - - - - -
-
-

- - - border-left: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-left: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/border-radius/index.html b/property/border-radius/index.html deleted file mode 100644 index 71985b68..00000000 --- a/property/border-radius/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: border-radius ---- - -
-
- -

- #border-radius -

-
-

Defines the radius of the element's corners.

- -
- -
- - - - - - -
-
-

- default - - - border-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - border-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway through each border.

- -
-
- - - -
-
-
-

- - - border-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top and bottom borders, the second one for the left and right borders.

- -
-
- - - -
- -
diff --git a/property/border-right-color/index.html b/property/border-right-color/index.html deleted file mode 100644 index ca1e0117..00000000 --- a/property/border-right-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: border-right-color ---- - -
-
- -

- #border-right-color -

-
-

Like border-color, but for the right border only.

- -
- -
- - - - - - -
-
-

- - - border-right-color: transparent; -

-
-

Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-right-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-right-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
diff --git a/property/border-right-style/index.html b/property/border-right-style/index.html deleted file mode 100644 index 32a23580..00000000 --- a/property/border-right-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: border-right-style ---- - -
-
- -

- #border-right-style -

-
-

Like border-style, but for the right border only.

- -
- -
- - - - - - -
-
-

- default - - - border-right-style: none; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - - border-right-style: dotted; -

-
-

Turns the right border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-right-style: dashed; -

-
-

Turns the right border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - border-right-style: solid; -

-
-

Turns the right border into a solid line.

- -
-
- - - -
-
-
-

- - - border-right-style: double; -

-
-

Splits the right border into two lines.

- -
-
- - - -
-
-
-

- - - border-right-style: groove; -

-
-

Sets an inset style to the right border.

- -
-
- - - -
- -
diff --git a/property/border-right-width/index.html b/property/border-right-width/index.html deleted file mode 100644 index 475690af..00000000 --- a/property/border-right-width/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: border-right-width ---- - -
-
- -

- #border-right-width -

-
-

Like border-width, but for the right border only.

- -
- -
- - - - - - -
-
-

- default - - - border-right-width: 0; -

-
-

Removes the right border.

- -
-
- - - -
-
-
-

- - - border-right-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
diff --git a/property/border-right/index.html b/property/border-right/index.html deleted file mode 100644 index f2f9d605..00000000 --- a/property/border-right/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: border-right ---- - -
-
- -

- #border-right -

-
-

Shorthand property for border-right-width border-right-style and border-right-color.

- -
- -
- - - - - -
-
-

- - - border-right: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-right: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/border-style/index.html b/property/border-style/index.html deleted file mode 100644 index 2d0a4bf5..00000000 --- a/property/border-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: border-style ---- - -
-
- -

- #border-style -

-
-

Defines the style of the element's borders.

- -
- -
- - - - - - -
-
-

- default - - - border-style: none; -

-
-

Removes the element's borders.

- -
-
- - - -
-
-
-

- - - border-style: dotted; -

-
-

Turns the border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-style: dashed; -

-
-

Turns the border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - border-style: solid; -

-
-

Turns the border into a solid line.

- -
-
- - - -
-
-
-

- - - border-style: double; -

-
-

Splits the border into two lines.

- -
-
- - - -
-
-
-

- - - border-style: groove; -

-
-

Sets an inset style to the borders.

- -
-
- - - -
- -
diff --git a/property/border-top-color/index.html b/property/border-top-color/index.html deleted file mode 100644 index a81e55f4..00000000 --- a/property/border-top-color/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: border-top-color ---- - -
-
- -

- #border-top-color -

-
-

Like border-color, but for the top border only.

- -
- -
- - - - - - -
-
-

- - - border-top-color: transparent; -

-
-

Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.

- -
-
- - - -
-
-
-

- - - border-top-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - border-top-color: #05ffb0; -

-
-

You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

- -
-
- - - -
- -
diff --git a/property/border-top-left-radius/index.html b/property/border-top-left-radius/index.html deleted file mode 100644 index 5fb4258c..00000000 --- a/property/border-top-left-radius/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: border-top-left-radius ---- - -
-
- -

- #border-top-left-radius -

-
-

Defines the radius of the top left corner.

- -
- -
- - - - - - -
-
-

- default - - - border-top-left-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-top-left-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - border-top-left-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

- -
-
- - - -
-
-
-

- - - border-top-left-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the left border.

- -
-
- - - -
- -
diff --git a/property/border-top-right-radius/index.html b/property/border-top-right-radius/index.html deleted file mode 100644 index 53bffea9..00000000 --- a/property/border-top-right-radius/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: border-top-right-radius ---- - -
-
- -

- #border-top-right-radius -

-
-

Defines the radius of the top right corner.

- -
- -
- - - - - - -
-
-

- default - - - border-top-right-radius: 0; -

-
-

Removes any border radius.

- -
-
- - - -
-
-
-

- - - border-top-right-radius: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - border-top-right-radius: 50%; -

-
-

You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the right border.

- -
-
- - - -
-
-
-

- - - border-top-right-radius: 20px 50%; -

-
-

If you set two values, the first one is for the top border, the second one for the right border.

- -
-
- - - -
- -
diff --git a/property/border-top-style/index.html b/property/border-top-style/index.html deleted file mode 100644 index 8f54f338..00000000 --- a/property/border-top-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: border-top-style ---- - -
-
- -

- #border-top-style -

-
-

Like border-style, but for the top border only.

- -
- -
- - - - - - -
-
-

- default - - - border-top-style: none; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

- - - border-top-style: dotted; -

-
-

Turns the top border into a sequence of dots.

- -
-
- - - -
-
-
-

- - - border-top-style: dashed; -

-
-

Turns the top border into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - border-top-style: solid; -

-
-

Turns the top border into a solid line.

- -
-
- - - -
-
-
-

- - - border-top-style: double; -

-
-

Splits the top border into two lines.

- -
-
- - - -
-
-
-

- - - border-top-style: groove; -

-
-

Sets an inset style to the top border.

- -
-
- - - -
- -
diff --git a/property/border-top-width/index.html b/property/border-top-width/index.html deleted file mode 100644 index 88d17bce..00000000 --- a/property/border-top-width/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: border-top-width ---- - -
-
- -

- #border-top-width -

-
-

Like border-width, but for the top border only.

- -
- -
- - - - - - -
-
-

- default - - - border-top-width: 0; -

-
-

Removes the top border.

- -
-
- - - -
-
-
-

- - - border-top-width: 4px; -

-
-

You can use pixel values.

- -
-
- - - -
- -
diff --git a/property/border-top/index.html b/property/border-top/index.html deleted file mode 100644 index 46cc5b35..00000000 --- a/property/border-top/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: border-top ---- - -
-
- -

- #border-top -

-
-

Shorthand property for border-top-width border-top-style and border-top-color.

- -
- -
- - - - - -
-
-

- - - border-top: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border-top: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/border-width/index.html b/property/border-width/index.html deleted file mode 100644 index 36130b0f..00000000 --- a/property/border-width/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: single -property_name: border-width ---- - -
-
- -

- #border-width -

-
-

Defines the width of the element's borders.

- -
- -
- - - - - - -
-
-

- - - border-width: 1px; -

-
-

Defines the width of all borders to 1px.

- -
-
- - - -
-
-
-

- - - border-width: 2px 0; -

-
-

Defines the top and bottom borders to 2px, the left and right to 0.

- -
-
- - - -
- -
diff --git a/property/border/index.html b/property/border/index.html deleted file mode 100644 index 0b045e63..00000000 --- a/property/border/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: border ---- - -
-
- -

- #border -

-
-

Shorthand property for border-width border-style and border-color.

- -
- -
- - - - - -
-
-

- - - border: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - border: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/bottom/index.html b/property/bottom/index.html deleted file mode 100644 index da12bf16..00000000 --- a/property/bottom/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: single -property_name: bottom ---- - -
-
- -

- #bottom -

-
-

Defines the position of the element according to its bottom edge.

- -
- -
- - - - - - - -
-
-

- default - - - bottom: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - - bottom: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

- -
-
- - - - -
-
-
-

- - - bottom: 0; -

-
-

If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

- -
-
- - - - -
- -
diff --git a/property/box-shadow/index.html b/property/box-shadow/index.html deleted file mode 100644 index 8777914d..00000000 --- a/property/box-shadow/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -layout: single -property_name: box-shadow ---- - -
-
- -

- #box-shadow -

-
-

Defines the shadow of the element.

- -
- -
- - - - - - -
-
-

- default - - - box-shadow: none; -

-
-

Removes any box-shadow that was applied to the element.

- -
-
- - - -
-
-
-

- - - box-shadow: 2px 6px; -

-
-

You need at least two values:

-
  • the first is the horizontal offset
  • the second is the vertical offset

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

- - - box-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

- -
-
- - - -
-
-
-

- - - box-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

- -
-
- - - -
-
-
-

- - - box-shadow: 2px 4px 10px 4px red; -

-
-

The optional fourth value defines the spread of the shadow.

-

The spread defines how much the shadow should grow: it enhances the shadow.

- -
-
- - - -
- -
diff --git a/property/box-sizing/index.html b/property/box-sizing/index.html deleted file mode 100644 index 7669e357..00000000 --- a/property/box-sizing/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -layout: single -property_name: box-sizing ---- - -
-
- -

- #box-sizing -

-
-

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

- -
- -
- - - - - - -
-
-

- default - - - box-sizing: content-box; -

-
-

The width and height of the element only apply to the content of the element.

-

For example, this element has

-
  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 24px + 60px + 200px = 284px.

-

The content has the defined width. The box accomodates for those dimensions.

- -
-
- - - - -
-
-
-

- - - box-sizing: border-box; -

-
-

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

-

For example, this element has

-
  • border-width: 12px
  • padding: 30px
  • width: 200px

The full width is 200px, no matter what.

-

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

- -
-
- - - - -
- -
diff --git a/property/clear/index.html b/property/clear/index.html deleted file mode 100644 index d96fd72c..00000000 --- a/property/clear/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: single -property_name: clear ---- - -
-
- -

- #clear -

-
-

Moves the element after all the preceding floating elements.

- -
- -
- - - - - - -
-
-

- - - clear: none; -

-
-

The clear property is only relevant when used with siblings that have a float value.

-

The element will sit alongside any floated element that precedes it.

- -
-
- - - -
-
-
-

- - - clear: left; -

-
-

The cleared element will move after any left floating element that precedes it, but will remain alongside right float elements.

- -
-
- - - - -
-
-
-

- - - clear: right; -

-
-

The cleared element will move after any right floating element that precedes it, but will remain alongside left float elements.

- -
-
- - - - -
-
-
-

- - - clear: both; -

-
-

The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

- -
-
- - - - -
- -
diff --git a/property/color/index.html b/property/color/index.html deleted file mode 100644 index 6bd2fa38..00000000 --- a/property/color/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -layout: single -property_name: color ---- - -
-
- -

- #color -

-
-

Defines the color of the text.

- -
- -
- - - - - - -
-
-

- - - color: transparent; -

-
-

Applies a transparent color to the text. The text will still take up the space it should.

- -
-
- - - -
-
-
-

- - - color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - - color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - - color: rgba(0, 0, 0, 0.5); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - - -
-
-
-

- - - color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
-
- - - -
-
-
-

- - - color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
diff --git a/property/column-count/index.html b/property/column-count/index.html deleted file mode 100644 index 80052a51..00000000 --- a/property/column-count/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: column-count ---- - -
-
- -

- #column-count -

-
-

Defines the number of columns of the element.

- -
- -
- - - - - -
-
-

- default - - - column-count: auto; -

-
-

Removes any columns from the element (unless another column- property was set).

- -
-
- - - -
-
-
-

- - - column-count: 3; -

-
-

When using an integer value, the element will distribute its child elements across the number of columns defined.

- -
-
- - - - -
- -
diff --git a/property/column-gap/index.html b/property/column-gap/index.html deleted file mode 100644 index c502a48d..00000000 --- a/property/column-gap/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: single -property_name: column-gap ---- - -
-
- -

- #column-gap -

-
-

Defines the gap between the columns of the element.

- -
- -
- - - - - - -
-
-

- default - - - column-gap: normal; -

-
-

The gap between the columns is set to the browser's default value, which usually is 1em.

- -
-
- - - -
-
-
-

- - - column-gap: 2px; -

-
-

You can use pixel values for the gap.

-

Note that the gap only appears between columns, and not on the exterior sides of the edge columns.

- -
-
- - - - -
- -
diff --git a/property/column-width/index.html b/property/column-width/index.html deleted file mode 100644 index 69249f98..00000000 --- a/property/column-width/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: single -property_name: column-width ---- - -
-
- -

- #column-width -

-
-

Defines the number of columns of the element.

- -
- -
- - - - - -
-
-

- default - - - column-width: auto; -

-
-

The element will not distribute its child elements into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.

- -
-
- - - -
-
-
-

- - - column-width: 10px; -

-
-

You can use pixel values for the column width.

-

The number of columns will be the minimum needed to distribute all the content across the element.

- -
-
- - - - -
- -
diff --git a/property/content/index.html b/property/content/index.html deleted file mode 100644 index 4cc5fb23..00000000 --- a/property/content/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -layout: single -property_name: content ---- - -
-
- -

- #content -

-
-

Defines the text content of the :before and :after pseudo-elements.

- -
- -
- - - - - - -
-
-

- default - - - content: normal; -

-
-

No content is added to the element.

- -
-
- - - -
-
-
-

- - - content: "Foo bar"; -

-
-

Considering this HTML element:

-
<p class="element">
-  Hello world
-</p>

And this CSS:

-
.element:before {
-  content: "Foo bar";
-}

The text content will be prepended to the element's content.

-

Notice how the end result combines text from the HTML and text from the CSS.

- -
-
- - - - -
-
-
-

- - - content: url(/images/jt.png); -

-
-

You can insert images by using the url() function.

- -
-
- - - -
-
-
-

- - - content: attr(data-something); -

-
-

Considering this HTML element:

-
<p class="element" data-something="cssreference">
-  Hello world
-</p>

And this CSS:

-
.element:before {
-  content: attr(data-something);
-}

The element will grab the text content from the HTML attribute.

- -
-
- - - - -
- -
diff --git a/property/cursor/index.html b/property/cursor/index.html deleted file mode 100644 index 987b5c66..00000000 --- a/property/cursor/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -layout: single -property_name: cursor ---- - -
-
- -

- #cursor -

-
-

Sets the mouse cursor when hovering the element.

- -
- -
- - - - - -
-
-

- - - cursor: default; -

-
-

Sets the cursor to the element's default value. For a link, it would be a pointer. For text it would be a selection cursor.

- -
-
- - - -
-
-
-

- - - cursor: auto; -

-
-

auto

- -
-
- - - -
-
-
-

- - - cursor: pointer; -

-
-

pointer

- -
-
- - - -
-
-
-

- - - cursor: move; -

-
-

move

- -
-
- - - -
-
-
-

- - - cursor: crosshair; -

-
-

crosshair

- -
-
- - - -
-
-
-

- - - cursor: text; -

-
-

text

- -
-
- - - -
-
-
-

- - - cursor: wait; -

-
-

wait

- -
-
- - - -
-
-
-

- - - cursor: helpe-resize; -

-
-

helpe-resize

- -
-
- - - -
-
-
-

- - - cursor: ne-resize; -

-
-

ne-resize

- -
-
- - - -
-
-
-

- - - cursor: nw-resize; -

-
-

nw-resize

- -
-
- - - -
-
-
-

- - - cursor: n-resize; -

-
-

n-resize

- -
-
- - - -
-
-
-

- - - cursor: se-resize; -

-
-

se-resize

- -
-
- - - -
-
-
-

- - - cursor: sw-resize; -

-
-

sw-resize

- -
-
- - - -
-
-
-

- - - cursor: s-resize; -

-
-

s-resize

- -
-
- - - -
-
-
-

- - - cursor: w-resize; -

-
-

w-resize

- -
-
- - - -
- -
diff --git a/property/display/index.html b/property/display/index.html deleted file mode 100644 index f46903ca..00000000 --- a/property/display/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: single -property_name: display ---- - -
-
- -

- #display -

-
-

Sets the display behavior of the element.

- -
- -
- - - - - - -
-
-

- - - display: none; -

-
-

The element is completely removed, as if it wasn't in the HTML code in the first place.

- -
-
- - - -
-
-
-

- - - display: inline; -

-
-

The element is turned into an inline element: it behaves like simple text.

-

Any height and width applied will have no effect.

- -
-
- - - -
-
-
-

- - - display: block; -

-
-

The element is turned into a block element: it starts on a new line, and takes up the whole width.

- -
-
- - - -
-
-
-

- - - display: inline-block; -

-
-

The element shares properties of both an inline and a block element:

-
  • inline because the element behaves like simple text, and inserts itself in a block of text
  • Block because you can apply height and width values

For example, this element has:

-
.element{
-  height: 3em;
-  width: 60px;
-}
-
-
- - - -
-
-
-

- - - display: list-item; -

-
-

The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

- -
-
- - - -
-
-
-

- - - display: table; -

-
-

The element behaves like a table: <table>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - - display: table-cell; -

-
-

The element behaves like a table cell: <td> or <th>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - - display: table-row; -

-
-

The element behaves like a table row: <tr>.

-

Its content and child elements behave like table cells.

- -
-
- - - -
-
-
-

- - - display: flex; -

-
-

The element is turned into an flexbox container. On its own, it behaves like a block element.

-

Its child elements will be turned into flexbox items.

- -
-
- - - -
-
-
-

- - - display: inline-flex; -

-
-

The element shares properties of both an inline and a flexbox element:

-
  • inline because the element behaves like simple text, and inserts itself in a block of text
  • flexbox because its child element will be turned into flexbox items

For example, this element has:

-
.element{
-  height: 3em;
-  width: 120px;
-}
-
-
- - - -
- -
diff --git a/property/flex-basis/index.html b/property/flex-basis/index.html deleted file mode 100644 index c583ac3b..00000000 --- a/property/flex-basis/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: single -property_name: flex-basis ---- - -
-
- -

- #flex-basis -

-
-

Defines the initial size of a flexbox item.

- -
- -
- - - - - - -
-
-

- default - - - flex-basis: auto; -

-
-

The element will be automatically sized based on its content, or on any height or width value if they are defined.

- -
-
- - - - -
-
-
-

- - - flex-basis: 80px; -

-
-

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

- -
-
- - - - -
- -
diff --git a/property/flex-direction/index.html b/property/flex-direction/index.html deleted file mode 100644 index 7f4c83e5..00000000 --- a/property/flex-direction/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: flex-direction ---- - -
-
- -

- #flex-direction -

-
-

Defines how flexbox items are ordered within a flexbox container.

- -
- -
- - - - - - -
-
-

- default - - - flex-direction: row; -

-
-

The flexbox items are ordered the same way as the text direction, along the main axis.

- -
-
- - - -
-
-
-

- - - flex-direction: row-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the main axis.

- -
-
- - - -
-
-
-

- - - flex-direction: column; -

-
-

The flexbox items are ordered the same way as the text direction, along the cross axis.

- -
-
- - - -
-
-
-

- - - flex-direction: column-reverse; -

-
-

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

- -
-
- - - -
- -
diff --git a/property/flex-flow/index.html b/property/flex-flow/index.html deleted file mode 100644 index 149033ef..00000000 --- a/property/flex-flow/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: single -property_name: flex-flow ---- - -
-
- -

- #flex-flow -

-
-

Shorthand property for flex-direction and flex-flow.

- -
- -
- - - - - - -
diff --git a/property/flex-grow/index.html b/property/flex-grow/index.html deleted file mode 100644 index 8b65aa8c..00000000 --- a/property/flex-grow/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -layout: single -property_name: flex-grow ---- - -
-
- -

- #flex-grow -

-
-

Defines how much a flexbox item should grow if there's space available.

- -
- -
- - - - - - -
-
-

- default - - - flex-grow: 0; -

-
-

The element will not grow if there's space available. It will only use the space it needs.

- -
-
- - - -
-
-
-

- - - flex-grow: 1; -

-
-

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

- -
-
- - - - -
-
-
-

- - - flex-grow: 2; -

-
-

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the remaining space is divided in 3:

-
  • 1 third goes to the green item
  • 2 thirds go to the pink item
  • Nothing goes to the yellow item, who retains its initial width
-
-
- - - - -
- -
diff --git a/property/flex-shrink/index.html b/property/flex-shrink/index.html deleted file mode 100644 index f3a6b7b6..00000000 --- a/property/flex-shrink/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -layout: single -property_name: flex-shrink ---- - -
-
- -

- #flex-shrink -

-
-

Defines how much a flexbox item should shrink if there's not enough space available.

- -
- -
- - - - - - - -
-
-

- default - - - flex-shrink: 1; -

-
-

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

- -
-
- - - -
-
-
-

- - - flex-shrink: 0; -

-
-

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

-

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

- -
-
- - - - -
-
-
-

- - - flex-shrink: 2; -

-
-

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

-

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

-
  • 3 quarters are taken from the red item
  • 1 quarter is taken from the yellow item
-
-
- - - - -
- -
diff --git a/property/flex-wrap/index.html b/property/flex-wrap/index.html deleted file mode 100644 index 619c65cc..00000000 --- a/property/flex-wrap/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: flex-wrap ---- - -
-
- -

- #flex-wrap -

-
-

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

- -
- -
- - - - - - -
-
-

- default - - - flex-wrap: nowrap; -

-
-

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

- -
-
- - - -
-
-
-

- - - flex-wrap: wrap; -

-
-

The flexbox items will be distributed among multiple lines if needed.

- -
-
- - - -
-
-
-

- - - flex-wrap: wrap-reverse; -

-
-

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

- -
-
- - - -
- -
diff --git a/property/float/index.html b/property/float/index.html deleted file mode 100644 index 22970967..00000000 --- a/property/float/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: float ---- - -
-
- -

- #float -

-
-

Pushes the element to either the left or right side. The following siblings will wrap around the floating element

- -
- -
- - - - - -
-
-

- default - - - float: none; -

-
-

Removes any previously defined float value. The element will remain in the natural flow of the page.

- -
-
- - - -
-
-
-

- - - float: left; -

-
-

Moves the element to the left side of its container. The following elements will wrap around it and fill the space remaining on the right.

- -
-
- - - -
-
-
-

- - - float: right; -

-
-

Moves the element to the right side of its container. The following elements will wrap around it and fill the space remaining on the left.

- -
-
- - - -
- -
diff --git a/property/font-family/index.html b/property/font-family/index.html deleted file mode 100644 index 8d86cbb3..00000000 --- a/property/font-family/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -layout: single -property_name: font-family ---- - -
-
- -

- #font-family -

-
- -
- -
- - - - - - -
-
-

- - - font-family: "Source Sans Pro", "Arial", sans-serif; -

-
-

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

-

The browser will look for each family on the user's computer and in any @font-face resource.

-

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

-

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

- -
-
- - - -
-
-
-

- - - font-family: serif; -

-
-

The browser will use a serif font family: all characters have stroke endings.

- -
-
- - - -
-
-
-

- - - font-family: sans-serif; -

-
-

The browser will use a sans-serif font family: no character has stroke endings.

- -
-
- - - -
-
-
-

- - - font-family: monospace; -

-
-

The browser will use a monospace font family: all characters have the same width.

- -
-
- - - -
-
-
-

- - - font-family: cursive; -

-
-

The browser will use a cursive font family.

- -
-
- - - -
-
-
-

- - - font-family: fantasy; -

-
-

The browser will use a fantasy font family.

- -
-
- - - -
- -
diff --git a/property/font-size/index.html b/property/font-size/index.html deleted file mode 100644 index 533f0984..00000000 --- a/property/font-size/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -layout: single -property_name: font-size ---- - -
-
- -

- #font-size -

-
-

Defines the size of the text.

- -
- -
- - - - - - -
-
-

- default - - - font-size: medium; -

-
-

The text will use the browser's default medium size.

- -
-
- - - -
-
-
-

- - - font-size: 20px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - font-size: 1.2em; -

-
-

You can use em values.

-

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

- -
-
- - - -
-
-
-

- - - font-size: 1.2rem; -

-
-

You can use rem values.

-

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

- -
-
- - - -
-
-
-

- - - font-size: 90%; -

-
-

You can use percentage values. They act like em values.

-

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

- -
-
- - - -
-
-
-

- - - font-size: smaller; -

-
-

You can use relative keywords. The value is relative to the parent.

-

The following are available:

-
  • larger
  • smaller
-
-
- - - -
-
-
-

- - - font-size: x-large; -

-
-

You can use absolute keywords. The value is relative to the root element <html>.

-

The following are available:

-
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
-
-
- - - -
- -
diff --git a/property/font-style/index.html b/property/font-style/index.html deleted file mode 100644 index 15082076..00000000 --- a/property/font-style/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: font-style ---- - -
-
- -

- #font-style -

-
-

Defines how much the text is slanted.

- -
- -
- - - - - - -
-
-

- default - - - font-style: normal; -

-
-

The text is not slanted.

- -
-
- - - -
-
-
-

- - - font-style: italic; -

-
-

Use the italic version of the font: the letters are slightly slanted.

- -
-
- - - -
-
-
-

- - - font-style: oblique; -

-
-

Use the oblique version of the font: the letters are more slanted than italic.

- -
-
- - - -
- -
diff --git a/property/font-variant/index.html b/property/font-variant/index.html deleted file mode 100644 index 72f3207e..00000000 --- a/property/font-variant/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: font-variant ---- - -
-
- -

- #font-variant -

-
-

Defines which glyph to use for each letter.

- -
- -
- - - - - - -
-
-

- default - - - font-variant: normal; -

-
-

Each letter uses its normal glyph.

- -
-
- - - -
-
-
-

- - - font-variant: small-caps; -

-
-

Each letter uses its small capitalized version.

- -
-
- - - -
- -
diff --git a/property/font-weight/index.html b/property/font-weight/index.html deleted file mode 100644 index c598236d..00000000 --- a/property/font-weight/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: single -property_name: font-weight ---- - -
-
- -

- #font-weight -

-
-

Defines the weight of the text.

- -
- -
- - - - - - -
-
-

- default - - - font-weight: normal; -

-
-

The text is in normal weight.

- -
-
- - - -
-
-
-

- - - font-weight: bold; -

-
-

The text becomes bold.

- -
-
- - - -
-
-
-

- - - font-weight: 600; -

-
-

You can use numeric values. They all correspond to a particular named weight:

-
  • 100 Thin
  • 200 Extra Light
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

- -
-
- - - -
-
-
-

- - - font-weight: lighter; -

-
-

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

- -
-
- - - -
- -
diff --git a/property/font/index.html b/property/font/index.html deleted file mode 100644 index f0f17be8..00000000 --- a/property/font/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: single -property_name: font ---- - -
-
- -

- #font -

-
-

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

- -
- -
- - - - - - -
diff --git a/property/height/index.html b/property/height/index.html deleted file mode 100644 index 3ddf121f..00000000 --- a/property/height/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: height ---- - -
-
- -

- #height -

-
-

Defines the height of the element.

- -
- -
- - - - - - -
-
-

- default - - - height: auto; -

-
-

The element will automatically adjust its height to allow its content to be displayed correctly.

- -
-
- - -
-
-
-

- - - height: 100px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

- -
-
- - - -
- -
diff --git a/property/justify-content/index.html b/property/justify-content/index.html deleted file mode 100644 index 60a2ec03..00000000 --- a/property/justify-content/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -layout: single -property_name: justify-content ---- - -
-
- -

- #justify-content -

-
-

Defines how flexbox items are aligned according to the main axis, within a flexbox container.

- -
- -
- - - - - - -
-
-

- default - - - justify-content: flex-start; -

-
-

The flexbox items are pushed towards the start of the container's main axis.

- -
-
- - - -
-
-
-

- - - justify-content: flex-end; -

-
-

The flexbox items are pushed towards the end of the container's main axis.

- -
-
- - - -
-
-
-

- - - justify-content: center; -

-
-

The flexbox items are centered along the container's main axis.

- -
-
- - - -
-
-
-

- - - justify-content: space-between; -

-
-

The remaining space is distributed between the flexbox items.

- -
-
- - - -
-
-
-

- - - justify-content: space-around; -

-
-

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

- -
-
- - - -
- -
diff --git a/property/left/index.html b/property/left/index.html deleted file mode 100644 index bb84e731..00000000 --- a/property/left/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -layout: single -property_name: left ---- - -
-
- -

- #left -

-
-

Defines the position of the element according to its left edge.

- -
- -
- - - - - - - -
-
-

- default - - - left: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - - left: 80px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the left value.

- -
-
- - - -
-
-
-

- - - left: -20px; -

-
-

If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

- -
-
- - - -
- -
diff --git a/property/letter-spacing/index.html b/property/letter-spacing/index.html deleted file mode 100644 index fe92ebd9..00000000 --- a/property/letter-spacing/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: letter-spacing ---- - -
-
- -

- #letter-spacing -

-
-

Defines the spacing between the characters of a block of text.

- -
- -
- - - - - -
-
-

- default - - - letter-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - - letter-spacing: 2px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - letter-spacing: 0.1em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

- -
-
- - - -
- -
diff --git a/property/line-height/index.html b/property/line-height/index.html deleted file mode 100644 index e27fcf8d..00000000 --- a/property/line-height/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -layout: single -property_name: line-height ---- - -
-
- -

- #line-height -

-
-

Defines the height of a single line of text.

- -
- -
- - - - - -
-
-

- default - - - line-height: normal; -

-
-

Reverts to the default value of the browser.

- -
-
- - - -
-
-
-

- - recommended - - line-height: 1.6; -

-
-

You can use unitless values: the line height will be relative to the font size.

- -
-
- - - - -
-
-
-

- - - line-height: 30px; -

-
-

You can use pixel values.

- -
-
- - - - -
-
-
-

- - - line-height: 0.8em; -

-
-

You can use em values: like with unitless values, the line height will be relative to the font size.

- -
-
- - - - -
- -
diff --git a/property/list-style-image/index.html b/property/list-style-image/index.html deleted file mode 100644 index dcba1e97..00000000 --- a/property/list-style-image/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: single -property_name: list-style-image ---- - -
-
- -

- #list-style-image -

-
-

Defines the image to be used as an list item's bullet point.

- -
- -
- - - - - - -
-
-

- default - - - list-style-image: none; -

-
-

The list items will use the bullet point defined by the list-style-type value, which by default is a disc.

- -
-
- - - -
-
-
-

- - - list-style-image: url(/images/list-style-image.png); -

-
-

The list items will use the image located at the specified URL as their bullet point.
The image can not be resized.

- -
-
- - - - -
- -
diff --git a/property/list-style-position/index.html b/property/list-style-position/index.html deleted file mode 100644 index 7059e3d7..00000000 --- a/property/list-style-position/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: single -property_name: list-style-position ---- - -
-
- -

- #list-style-position -

-
-

Defines the position of a list's bullet points.

- -
- -
- - - - - - -
-
-

- default - - - list-style-position: outside; -

-
-

The bullet point will be outside the list item, as if it wasn't part of the list item.

-

The start of each line of a list item will be aligned vertically.

- -
-
- - - - -
-
-
-

- - - list-style-position: inside; -

-
-

The bullet point will be inside the list item.

-

As it is part of the list item, it will be part of the text and push the text at the start.

- -
-
- - - - -
- -
diff --git a/property/list-style-type/index.html b/property/list-style-type/index.html deleted file mode 100644 index 3a5d6e0c..00000000 --- a/property/list-style-type/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -layout: single -property_name: list-style-type ---- - -
-
- -

- #list-style-type -

-
-

Defines the type of a list item's bullet point.

- -
- -
- - - - - - -
-
-

- default - - - list-style-type: disc; -

-
-

The list items will use a disc as their bullet point.

- -
-
- - - - -
-
-
-

- - - list-style-type: circle; -

-
-

The list items will use a circle as their bullet point.

- -
-
- - - - -
-
-
-

- - - list-style-type: square; -

-
-

The list items will use a square as their bullet point.

- -
-
- - - - -
-
-
-

- - - list-style-type: decimal; -

-
-

The list items will use a decimal as their bullet point.

- -
-
- - - - -
-
-
-

- - - list-style-type: none; -

-
-

The list items will have no bullet point.

- -
-
- - - - -
- -
diff --git a/property/list-style/index.html b/property/list-style/index.html deleted file mode 100644 index 553b38ec..00000000 --- a/property/list-style/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: single -property_name: list-style ---- - -
-
- -

- #list-style -

-
-

Shorthand property for list-style-type list-style-image and list-style-position.

- -
- -
- - - - - - -
diff --git a/property/margin-bottom/index.html b/property/margin-bottom/index.html deleted file mode 100644 index f3ea5ba0..00000000 --- a/property/margin-bottom/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: margin-bottom ---- - -
-
- -

- #margin-bottom -

-
-

Defines the space outside the element, on the bottom side.

- -
- -
- - - - - - - -
-
-

- default - - - margin-bottom: 0; -

-
-

Removes any margin at the bottom.

- -
-
- - - -
-
-
-

- - - margin-bottom: 30px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - margin-bottom: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - margin-bottom: 10%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

- -
-
- - - -
- -
diff --git a/property/margin-left/index.html b/property/margin-left/index.html deleted file mode 100644 index 9c426e6b..00000000 --- a/property/margin-left/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -layout: single -property_name: margin-left ---- - -
-
- -

- #margin-left -

-
-

Defines the space outside the element, on the left side.

- -
- -
- - - - - - - -
-
-

- default - - - margin-left: 0; -

-
-

Removes any margin on the left.

- -
-
- - - -
-
-
-

- - - margin-left: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - margin-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - margin-left: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

- -
-
- - - -
-
-
-

- - - margin-left: auto; -

-
-

The auto keyword will give the left side a share of the remaining space.

-

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

- -
-
- - - -
- -
diff --git a/property/margin-right/index.html b/property/margin-right/index.html deleted file mode 100644 index 73e52290..00000000 --- a/property/margin-right/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -layout: single -property_name: margin-right ---- - -
-
- -

- #margin-right -

-
-

Defines the space outside the element, on the right side.

- -
- -
- - - - - - - -
-
-

- default - - - margin-right: 0; -

-
-

Removes any margin on the right.

- -
-
- - - -
-
-
-

- - - margin-right: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - margin-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - margin-right: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

- -
-
- - - -
-
-
-

- - - margin-right: auto; -

-
-

The auto keyword will give the right side a share of the remaining space.

-

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

- -
-
- - - -
- -
diff --git a/property/margin-top/index.html b/property/margin-top/index.html deleted file mode 100644 index 1c07bb3a..00000000 --- a/property/margin-top/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: margin-top ---- - -
-
- -

- #margin-top -

-
-

Defines the space outside the element, on the top side.

- -
- -
- - - - - - - -
-
-

- default - - - margin-top: 0; -

-
-

Removes any margin at the top.

- -
-
- - - -
-
-
-

- - - margin-top: 30px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - margin-top: 2em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - margin-top: 10%; -

-
-

You can use percentage values.
The percentage is based on the width of the container.

- -
-
- - - -
- -
diff --git a/property/margin/index.html b/property/margin/index.html deleted file mode 100644 index cc7960c4..00000000 --- a/property/margin/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: single -property_name: margin ---- - -
-
- -

- #margin -

-
-

Shorthand property for margin-top margin-right margin-bottom and margin-left.

- -
- -
- - - - - - - -
-
-

- default - - - margin: 0; -

-
-

Removes all margins.

- -
-
- - - -
-
-
-

- - - margin: 30px; -

-
-

When using 1 value, the margin is set for all 4 sides.

- -
-
- - - -
-
-
-

- - - margin: 30px 60px; -

-
-

When using 2 values:

-
  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

- -
-
- - - -
-
-
-

- - - margin: 30px 60px 45px; -

-
-

When using 3 values:

-
  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

- -
-
- - - -
-
-
-

- - - margin: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

- -
-
- - - -
- -
diff --git a/property/max-height/index.html b/property/max-height/index.html deleted file mode 100644 index 4811a454..00000000 --- a/property/max-height/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: max-height ---- - -
-
- -

- #max-height -

-
-

Defines the maximum height the element can be.

- -
- -
- - - - - - -
-
-

- default - - - max-height: none; -

-
-

The element has no limit in terms of height.

- -
-
- - -
-
-
-

- - - max-height: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum height is larger than the element's actual height, the max height has no effect.

- -
-
- - -
-
-
-

- - - max-height: 100px; -

-
-

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

- -
-
- - - -
- -
diff --git a/property/max-width/index.html b/property/max-width/index.html deleted file mode 100644 index 1e1fcb52..00000000 --- a/property/max-width/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: single -property_name: max-width ---- - -
-
- -

- #max-width -

-
-

Defines the maximum width the element can be.

- -
- -
- - - - - -
-
-

- default - - - max-width: none; -

-
-

The element has no limit in terms of width.

- -
-
- - -
-
-
-

- - - max-width: 2000px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the maximum width is larger than the element's actual width, the max width has no effect.

- -
-
- - -
-
-
-

- - - max-width: 150px; -

-
-

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

- -
-
- - - -
- -
diff --git a/property/min-height/index.html b/property/min-height/index.html deleted file mode 100644 index a0c52926..00000000 --- a/property/min-height/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: min-height ---- - -
-
- -

- #min-height -

-
-

Defines the minimum height of the element.

- -
- -
- - - - - - -
-
-

- default - - - min-height: 0; -

-
-

The element has no minimum height.

- -
-
- - -
-
-
-

- - - min-height: 200px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum height is larger than the element's actual height, the min height will be applied.

- -
-
- - - -
-
-
-

- - - min-height: 5px; -

-
-

If the minimum height is smaller than the element's actual height, the min height has no effect.

- -
-
- - - -
- -
diff --git a/property/min-width/index.html b/property/min-width/index.html deleted file mode 100644 index cb4be730..00000000 --- a/property/min-width/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: min-width ---- - -
-
- -

- #min-width -

-
-

Defines the minimum width of the element.

- -
- -
- - - - - - -
-
-

- default - - - min-width: 0; -

-
-

The element has no minimum width.

- -
-
- - -
-
-
-

- - - min-width: 300px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

If the minimum width is larger than the element's actual width, the min width will be applied.

- -
-
- - - -
-
-
-

- - - min-width: 5px; -

-
-

If the minimum width is smaller than the element's actual width, the min width has no effect.

- -
-
- - - -
- -
diff --git a/property/mix-blend-mode/index.html b/property/mix-blend-mode/index.html deleted file mode 100644 index b879a167..00000000 --- a/property/mix-blend-mode/index.html +++ /dev/null @@ -1,365 +0,0 @@ ---- -layout: single -property_name: mix-blend-mode ---- - -
-
- -

- #mix-blend-mode -

-
-

Defines how the element should blend with the background.

- -
- -
- - - - - - -
-
-

- default - - - mix-blend-mode: normal; -

-
-

The element does not blend.

- -
-
- - -
-
-
-

- - - mix-blend-mode: multiply; -

-
-

The element uses the multiply blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: screen; -

-
-

The element uses the screen blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: overlay; -

-
-

The element uses the overlay blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: darken; -

-
-

The element uses the darken blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: lighten; -

-
-

The element uses the lighten blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: color-dodge; -

-
-

The element uses the color-dodge blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: color-burn; -

-
-

The element uses the color-burn blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: hard-light; -

-
-

The element uses the hard-light blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: soft-light; -

-
-

The element uses the soft-light blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: difference; -

-
-

The element uses the difference blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: exclusion; -

-
-

The element uses the exclusion blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: hue; -

-
-

The element uses the hue blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: saturation; -

-
-

The element uses the saturation blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: color; -

-
-

The element uses the color blend mode.

- -
-
- - - -
-
-
-

- - - mix-blend-mode: luminosity; -

-
-

The element uses the luminosity blend mode.

- -
-
- - - -
- -
diff --git a/property/opacity/index.html b/property/opacity/index.html deleted file mode 100644 index f3ee1756..00000000 --- a/property/opacity/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: opacity ---- - -
-
- -

- #opacity -

-
-

Defines how opaque the element is.

- -
- -
- - - - - - -
-
-

- default - - - opacity: 1; -

-
-

The element is fully opaque.

- -
-
- - -
-
-
-

- - - opacity: 0; -

-
-

The element is fully transparent.

- -
-
- - - -
-
-
-

- - - opacity: 0.3; -

-
-

Any value between 0 (zero) and 1 (one) will make the element semi transparent.

- -
-
- - - -
- -
diff --git a/property/order/index.html b/property/order/index.html deleted file mode 100644 index db19bbaf..00000000 --- a/property/order/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: order ---- - -
-
- -

- #order -

-
-

Defines the order of a flexbox item.

- -
- -
- - - - - - - -
-
-

- default - - - order: 0; -

-
-

The order of the flexbox items is the one defined in the HTML code.

- -
-
- - -
-
-
-

- - - order: 1; -

-
-

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

- -
-
- - - -
-
-
-

- - - order: -1; -

-
-

You can use negative values.

- -
-
- - - -
-
-
-

- - - order: 9; -

-
-

You can set a different value for each flexbox item.

- -
-
- - - -
- -
diff --git a/property/outline-color/index.html b/property/outline-color/index.html deleted file mode 100644 index 183c5da1..00000000 --- a/property/outline-color/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -layout: single -property_name: outline-color ---- - -
-
- -

- #outline-color -

-
-

Defines the color of the element's outlines.

- -
- -
- - - - - - -
-
-

- default - - - outline-color: transparent; -

-
-

Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

- -
-
- - - -
-
-
-

- - - outline-color: red; -

-
-

You can use one of the 140+ color names.

- -
-
- - - -
-
-
-

- - - outline-color: #05ffb0; -

-
-

You can use hexadecimal color codes.

- -
-
- - - -
-
-
-

- - - outline-color: rgb(50, 115, 220); -

-
-

You can use rgb() color codes:

-
  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

- -
-
- - - -
-
-
-

- - - outline-color: rgba(50, 115, 220, 0.3); -

-
-

You can use rgba() color codes:

-
  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
-
-
-

- - - outline-color: hsl(14, 100%, 53%); -

-
-

You can use hsl() color codes:

-
  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
-
-
- - - -
-
-
-

- - - outline-color: hsla(14, 100%, 53%, 0.6); -

-
-

You can use hsl()a color codes:

-
  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

- -
-
- - - -
- -
diff --git a/property/outline-style/index.html b/property/outline-style/index.html deleted file mode 100644 index fa95d660..00000000 --- a/property/outline-style/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -layout: single -property_name: outline-style ---- - -
-
- -

- #outline-style -

-
-

Defines the style of the element's outlines.

- -
- -
- - - - - - -
-
-

- default - - - outline-style: none; -

-
-

Removes the element's outlines.

- -
-
- - - -
-
-
-

- - - outline-style: dotted; -

-
-

Turns the outline into a sequence of dots.

- -
-
- - - -
-
-
-

- - - outline-style: dashed; -

-
-

Turns the outline into a sequence of dashes.

- -
-
- - - -
-
-
-

- - - outline-style: solid; -

-
-

Turns the outline into a solid line.

- -
-
- - - -
-
-
-

- - - outline-style: double; -

-
-

Splits the outline into two lines.

- -
-
- - - -
-
-
-

- - - outline-style: groove; -

-
-

Sets an inset style to the outlines.

- -
-
- - - -
- -
diff --git a/property/outline-width/index.html b/property/outline-width/index.html deleted file mode 100644 index 045519e9..00000000 --- a/property/outline-width/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: outline-width ---- - -
-
- -

- #outline-width -

-
-

Defines the width of the element's outlines.

- -
- -
- - - - - - -
-
-

- default - - - outline-width: medium; -

-
-

Defines the width of all outlines to medium.

- -
-
- - - -
-
-
-

- - - outline-width: 1px; -

-
-

Defines the width of all outlines to 1px.

- -
-
- - - -
- -
diff --git a/property/outline/index.html b/property/outline/index.html deleted file mode 100644 index 5f258566..00000000 --- a/property/outline/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: single -property_name: outline ---- - -
-
- -

- #outline -

-
-

Shorthand property for outline-width outline-style and outline-color.

- -
- -
- - - - - -
-
-

- - - outline: 4px dotted red; -

-
-

The order is important:

-
  • width
  • style
  • color
-
-
- - - -
-
-
-

- - - outline: 2px solid; -

-
-

Only the color is optional. If you omit it, the color applied will be the color of the text.

- -
-
- - - -
- -
diff --git a/property/overflow-wrap/index.html b/property/overflow-wrap/index.html deleted file mode 100644 index ea362e62..00000000 --- a/property/overflow-wrap/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: overflow-wrap ---- - -
-
- -

- #overflow-wrap -

-
-

Defines if words should break when reaching the end of a line.

- -
- -
- - - - - - -
-
-

- default - - - overflow-wrap: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

- -
-
- - - -
-
-
-

- - - overflow-wrap: break-word; -

-
-

Words with no space will break as soon as they reach the end of a line.

- -
-
- - - -
- -
diff --git a/property/overflow-x/index.html b/property/overflow-x/index.html deleted file mode 100644 index fb140b38..00000000 --- a/property/overflow-x/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: overflow-x ---- - -
-
- -

- #overflow-x -

-
-

Defines how overflowing content on the horizontal axis is displayed.

- -
- -
- - - - - - -
-
-

- default - - - overflow-x: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified width.

- -
-
- - - -
-
-
-

- - - overflow-x: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - - overflow-x: scroll; -

-
-

The overflowing content is accessible thanks to a horizontal scrollbar.

- -
-
- - - -
-
-
-

- - - overflow-x: auto; -

-
-

The browser decides whether to display a horizontal scrollbar or not.

- -
-
- - - -
- -
diff --git a/property/overflow-y/index.html b/property/overflow-y/index.html deleted file mode 100644 index f91d4c6c..00000000 --- a/property/overflow-y/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: single -property_name: overflow-y ---- - -
-
- -

- #overflow-y -

-
-

Defines how overflowing content on the vertical axis is displayed.

- -
- -
- - - - - - -
-
-

- default - - - overflow-y: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

- -
-
- - - -
-
-
-

- - - overflow-y: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - - overflow-y: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

- -
-
- - - -
-
-
-

- - - overflow-y: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

- -
-
- - - -
- -
diff --git a/property/overflow/index.html b/property/overflow/index.html deleted file mode 100644 index ec16e709..00000000 --- a/property/overflow/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: single -property_name: overflow ---- - -
-
- -

- #overflow -

-
-

Defines how overflowing content on both horizontal and vertical axis is displayed.

- -
- -
- - - - - - - -
-
-

- default - - - overflow: visible; -

-
-

The overflowing content is visible, while the element itself stays at the specified height.

- -
-
- - - -
-
-
-

- - - overflow: hidden; -

-
-

The overflowing content is hidden and can not be accessed.

- -
-
- - - -
-
-
-

- - - overflow: scroll; -

-
-

The overflowing content is accessible thanks to a vertical scrollbar.

- -
-
- - - -
-
-
-

- - - overflow: auto; -

-
-

The browser decides whether to display a vertical scrollbar or not.

- -
-
- - - -
- -
diff --git a/property/padding-bottom/index.html b/property/padding-bottom/index.html deleted file mode 100644 index 88607279..00000000 --- a/property/padding-bottom/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: padding-bottom ---- - -
-
- -

- #padding-bottom -

-
-

Defines the space inside the element, on the bottom side.

- -
- -
- - - - - - - -
-
-

- default - - - padding-bottom: 0; -

-
-

Removes any padding on the bottom.

- -
-
- - - -
-
-
-

- - - padding-bottom: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - padding-bottom: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - padding-bottom: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

- -
-
- - - -
- -
diff --git a/property/padding-left/index.html b/property/padding-left/index.html deleted file mode 100644 index 9e9bb1f8..00000000 --- a/property/padding-left/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: padding-left ---- - -
-
- -

- #padding-left -

-
-

Defines the space inside the element, on the left side.

- -
- -
- - - - - - - -
-
-

- default - - - padding-left: 0; -

-
-

Removes any padding on the left.

- -
-
- - - -
-
-
-

- - - padding-left: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - padding-left: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - padding-left: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

- -
-
- - - -
- -
diff --git a/property/padding-right/index.html b/property/padding-right/index.html deleted file mode 100644 index 3a3ad707..00000000 --- a/property/padding-right/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: padding-right ---- - -
-
- -

- #padding-right -

-
-

Defines the space inside the element, on the right side.

- -
- -
- - - - - - - -
-
-

- default - - - padding-right: 0; -

-
-

Removes any padding on the right.

- -
-
- - - -
-
-
-

- - - padding-right: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - padding-right: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - padding-right: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

- -
-
- - - -
- -
diff --git a/property/padding-top/index.html b/property/padding-top/index.html deleted file mode 100644 index 1e07e4ab..00000000 --- a/property/padding-top/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: padding-top ---- - -
-
- -

- #padding-top -

-
-

Defines the space inside the element, on the top side.

- -
- -
- - - - - - - -
-
-

- default - - - padding-top: 0; -

-
-

Removes any padding on the top.

- -
-
- - - -
-
-
-

- - - padding-top: 50px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - padding-top: 7em; -

-
-

You can use (r)em values.

-

The value is relative to the font size:

-
  • em: relative to the element's current font size
  • rem: relative to <html> the root element's font size
-
-
- - - -
-
-
-

- - - padding-top: 30%; -

-
-

You can use percentage values.
The percentage is based on the width of the element.

- -
-
- - - -
- -
diff --git a/property/padding/index.html b/property/padding/index.html deleted file mode 100644 index a562e3a4..00000000 --- a/property/padding/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: single -property_name: padding ---- - -
-
- -

- #padding -

-
-

Shorthand property for padding-top padding-right padding-bottom and padding-left.

- -
- -
- - - - - - - -
-
-

- default - - - padding: 0; -

-
-

Removes all paddings.

- -
-
- - - -
-
-
-

- - - padding: 30px; -

-
-

When using 1 value, the padding is set for all 4 sides.

- -
-
- - - -
-
-
-

- - - padding: 30px 60px; -

-
-

When using 2 values:

-
  • the first value is for top/bottom
  • the second value is for right/left

To remember the order think about the values you haven't defined.

-

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

- -
-
- - - -
-
-
-

- - - padding: 30px 60px 45px; -

-
-

When using 3 values:

-
  • the first value is for top
  • the second value is for right/left
  • the third value is for bottom

To remember the order think about the values you haven't defined.

-

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

- -
-
- - - -
-
-
-

- - - padding: 30px 60px 45px 85px; -

-
-

When using 4 values:

-
  • the first value is for top
  • the second value is for right
  • the third value is for bottom
  • the fourth value is for left

To remember the order, start at the top and go clockwise.

- -
-
- - - -
- -
diff --git a/property/pointer-events/index.html b/property/pointer-events/index.html deleted file mode 100644 index 9aa7ffd1..00000000 --- a/property/pointer-events/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: single -property_name: pointer-events ---- - -
-
- -

- #pointer-events -

-
-

Defines if the element reacts to pointer events or not.

- -
- -
- - - - - - -
-
-

- default - - - pointer-events: auto; -

-
-

The element reacts to pointer events, like :hover or click.

- -
-
- - - -
-
-
-

- - - pointer-events: none; -

-
-

The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.

- -
-
- - - - -
- -
diff --git a/property/position/index.html b/property/position/index.html deleted file mode 100644 index 037be33a..00000000 --- a/property/position/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -layout: single -property_name: position ---- - -
-
- -

- #position -

-
-

Defines the position behavior of the element.

- -
- -
- - - - - - - -
-
-

- default - - - position: static; -

-
-

The element will remain in the natural flow of the page.

-

As a result, it will not act as anchor point for the absolutely positioned yellow block.

-

Also, it will not react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - -
-
-
-

- - - position: relative; -

-
-

The element will remain in the natural flow of the page.

-

It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - - -
-
-
-

- - - position: absolute; -

-
-

The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.

-

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - - -
-
-
-

- - - position: fixed; -

-
- -
-
-

The element will not remain in the natural flow of the page. It will position itself according to the viewport.

-

Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

-

Also, it will react to the following properties:

-
  • top
  • bottom
  • left
  • right
  • z-index
-
-
- - - - -
- -
diff --git a/property/resize/index.html b/property/resize/index.html deleted file mode 100644 index 7609e579..00000000 --- a/property/resize/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -layout: single -property_name: resize ---- - -
-
- -

- #resize -

-
-

Defines if the textarea is resizable or not.

- -
- -
- - - - - - -
-
-

- default - - - resize: none; -

-
-

The textarea is not resizable.

- -
-
- - - - -
-
-
-

- - - resize: horizontal; -

-
-

The textarea is resizable horizontally.

- -
-
- - - - -
-
-
-

- - - resize: vertical; -

-
-

The textarea is resizable vertically.

- -
-
- - - - -
-
-
-

- - - resize: both; -

-
-

The textarea is resizable both horizontally and vertically.

- -
-
- - - - -
- -
diff --git a/property/text-align/index.html b/property/text-align/index.html deleted file mode 100644 index f316e932..00000000 --- a/property/text-align/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -layout: single -property_name: text-align ---- - -
-
- -

- #text-align -

-
-

Defines how the text content of the element is horizontally aligned.

- -
- -
- - - - - -
-
-

- - - text-align: left; -

-
-

The text content is aligned to the left.

- -
-
- - - -
-
-
-

- - - text-align: right; -

-
-

The text content is aligned to the right.

- -
-
- - - -
-
-
-

- - - text-align: center; -

-
-

The text content is centered.

- -
-
- - - -
-
-
-

- - - text-align: justify; -

-
-

The text content is justified.

- -
-
- - - -
- -
diff --git a/property/text-decoration/index.html b/property/text-decoration/index.html deleted file mode 100644 index ac7781a7..00000000 --- a/property/text-decoration/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: single -property_name: text-decoration ---- - -
-
- -

- #text-decoration -

-
-

Defines how the text content of the element is decorated.

- -
- -
- - - - - -
-
-

- default - - - text-decoration: none; -

-
-

Removes any text decoration.

- -
-
- - - -
-
-
-

- - - text-decoration: underline; -

-
-

Underlines the text content.

- -
-
- - - -
- -
diff --git a/property/text-indent/index.html b/property/text-indent/index.html deleted file mode 100644 index 06365255..00000000 --- a/property/text-indent/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -layout: single -property_name: text-indent ---- - -
-
- -

- #text-indent -

-
-

Defines the indentation of the element's first line of text.

- -
- -
- - - - - -
-
-

- default - - - text-indent: 0; -

-
-

The text is not indented.

- -
-
- - - -
-
-
-

- - - text-indent: 40px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

-

Notice how only the first line is indented.

- -
-
- - - -
-
-
-

- - - text-indent: -2em; -

-
-

You can also use negative values.

- -
-
- - - -
- -
diff --git a/property/text-overflow/index.html b/property/text-overflow/index.html deleted file mode 100644 index 72129312..00000000 --- a/property/text-overflow/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -layout: single -property_name: text-overflow ---- - -
-
- -

- #text-overflow -

-
-

Defines how the hidden text content behaves if it's overflowing.

- -
- -
- - - - - - - -
-
-

- default - - - text-overflow: clip; -

-
-

The text content is clipped and not accessible.

- -
-
- - - - -
-
-
-

- - - text-overflow: ellipsis; -

-
-

The overflowing content is replaced by an ellipsis: …

- -
-
- - - - -
- -
diff --git a/property/text-shadow/index.html b/property/text-shadow/index.html deleted file mode 100644 index 6a6709c1..00000000 --- a/property/text-shadow/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -layout: single -property_name: text-shadow ---- - -
-
- -

- #text-shadow -

-
-

Defines the shadow of the text content.

- -
- -
- - - - - -
-
-

- default - - - text-shadow: none; -

-
-

The text content has no shadow.

- -
-
- - - -
-
-
-

- - - text-shadow: 2px 6px; -

-
-

You need at least two values:

-
  • the first is the horizontal offset
  • the second is the vertical offset

The shadow color will be inherited from the text color.

- -
-
- - - -
-
-
-

- - - text-shadow: 2px 6px red; -

-
-

You can define a color as the last value.

-

As with color, you can use color names, hexadecimal, rgb, hsl...

- -
-
- - - -
-
-
-

- - - text-shadow: 2px 4px 10px red; -

-
-

The optional third value defines the blur of the shadow.

-

The color will be diffused across 10px in this example, from opaque to transparent.

- -
-
- - - -
- -
diff --git a/property/text-transform/index.html b/property/text-transform/index.html deleted file mode 100644 index aebb218b..00000000 --- a/property/text-transform/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -layout: single -property_name: text-transform ---- - -
-
- -

- #text-transform -

-
-

Defines how the text content should be transformed.

- -
- -
- - - - - -
-
-

- default - - - text-transform: none; -

-
-

Removes any text transformation: the text will appear the same as in the HTML code.

- -
-
- - - -
-
-
-

- - - text-transform: capitalize; -

-
-

Turns the first letter of each word into a capital letter.

- -
-
- - - -
-
-
-

- - - text-transform: uppercase; -

-
-

Turns all letters into capital letters.

- -
-
- - - -
-
-
-

- - - text-transform: lowercase; -

-
-

Turns all letters into lowercase letters.

- -
-
- - - -
- -
diff --git a/property/top/index.html b/property/top/index.html deleted file mode 100644 index ba22c1a4..00000000 --- a/property/top/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: single -property_name: top ---- - -
-
- -

- #top -

-
-

Defines the position of the element according to its top edge.

- -
- -
- - - - - - - -
-
-

- default - - - top: auto; -

-
-

The element will remain in its natural position.

- -
-
- - - - -
-
-
-

- - - top: 20px; -

-
-

If the element is in position relative, the element will move upwards by the amount defined by the top value.

- -
-
- - - - -
-
-
-

- - - top: 0; -

-
-

If the element is in position absolute, the element will position itself from the top of the first positioned ancestor.

- -
-
- - - - -
- -
diff --git a/property/transform-origin/index.html b/property/transform-origin/index.html deleted file mode 100644 index b2fe6346..00000000 --- a/property/transform-origin/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -layout: single -property_name: transform-origin ---- - -
-
- -

- #transform-origin -

-
-

Defines the origin for transformations defined by the transform property.

- -
- -
- -
-
- - - - - - - -
-
-

- default - - - transform-origin: 50% 50% 0; -

-
-

The transform origin is in the center of the element.

- -
-
- - - - -
-
-
-

- - - transform-origin: 20px 70%; -

-
-

You can use 2 values:

-
  • the first value is the horizontal axis
  • the second is the vertical axis
-
-
- - - - -
-
-
-

- - - transform-origin: top right; -

-
-

You can use a combination of position keywords: center, top, bottom, left and right.

- -
-
- - - - -
-
-
-

- - - transform-origin: center bottom; -

-
-

When using keywords, you can change the order of the axis, as long as each keywords is unambiguous.

- -
-
- - - - -
- -
diff --git a/property/transform/index.html b/property/transform/index.html deleted file mode 100644 index 0e8fc44e..00000000 --- a/property/transform/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -layout: single -property_name: transform ---- - -
-
- -

- #transform -

-
-

Defines how the element is transformed.

- -
- -
- - - - - - - -
-
-

- default - - - transform: none; -

-
-

Removes any transformation.

- -
-
- - - -
-
-
-

- - - transform: translateX(40px); -

-
-

Move the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - - transform: translateY(20px); -

-
-

Move the element on the vertical axis.

- -
-
- - - -
-
-
-

- - - transform: translateY(100%); -

-
-

You can use percentage values: the percentage is relative to the element itself, and not the parent.

- -
-
- - - -
-
-
-

- - - transform: translate(20px, -10%); -

-
-

You can use translate() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis
-
-
- - - -
-
-
-

- - - transform: scaleX(1.5); -

-
-

Scale the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - - transform: scaleY(0.4); -

-
-

Scale the element on the vertical axis.

- -
-
- - - -
-
-
-

- - - transform: scaleY(-2); -

-
-

You can use negative values: it will invert the element.

- -
-
- - - -
-
-
-

- - - transform: scale(0.8, 0.8); -

-
-

You can use scale() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis

By using the same value for both, you can scale proportionally.

- -
-
- - - -
-
-
-

- - - transform: rotate(45deg); -

-
-

Rotate the element.

-

You can use:

-
  • degrees from 0 to 360deg
  • gradians from 0 to 400grad
  • radians from 0 to 2πrad
  • turns from 0 to 1turn
-
-
- - - -
-
-
-

- - - transform: skewX(15deg); -

-
-

Skew the element on the horizontal axis.

- -
-
- - - -
-
-
-

- - - transform: skewY(45deg); -

-
-

Skew the element on the vertical axis.

- -
-
- - - -
-
-
-

- - - transform: skew(10deg, -20deg); -

-
-

You can use skew() with two values:

-
  • the first value is for the horizontal axis
  • the second value is for the vertical axis
-
-
- - - -
-
-
-

- - - transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px); -

-
-

You can combine multiple transformations by separating them with a space.

- -
-
- - - -
- - -
diff --git a/property/transition-delay/index.html b/property/transition-delay/index.html deleted file mode 100644 index a22f5667..00000000 --- a/property/transition-delay/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -layout: single -property_name: transition-delay ---- - -
-
- -

- #transition-delay -

-
-

Defines how long the transition has to wait before starting.

- -
- -
- - - - - - - - -
-
-

- default - - - transition-delay: 0s; -

-
-

The transition will wait zero seconds, and thus start right away.

- -
-
- - -
-
-
-

- - - transition-delay: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - - transition-delay: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
-
-
-

- - - transition-delay: -500ms; -

-
-

You can use negative values: the transition will start as if it had already been playing for 500ms.

- -
-
- - - -
- -
diff --git a/property/transition-duration/index.html b/property/transition-duration/index.html deleted file mode 100644 index bf93a727..00000000 --- a/property/transition-duration/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -layout: single -property_name: transition-duration ---- - -
-
- -

- #transition-duration -

-
-

Defines how long the transition lasts.

- -
- -
- - - - - - - - -
-
-

- default - - - transition-duration: 0s; -

-
-

The transition will last zero seconds, and is thus instant.

- -
-
- - - -
-
-
-

- - - transition-duration: 1.2s; -

-
-

You can use decimal values in seconds with the keyword s.

- -
-
- - - -
-
-
-

- - - transition-duration: 2400ms; -

-
-

You can use milliseconds instead of seconds, with the keyword ms.

- -
-
- - - -
- -
diff --git a/property/transition-property/index.html b/property/transition-property/index.html deleted file mode 100644 index 1c42eb93..00000000 --- a/property/transition-property/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -layout: single -property_name: transition-property ---- - -
-
- -

- #transition-property -

-
-

Defines which properties will transition.

- -
- -
- - - - - - - - -
-
-

- default - - - transition-property: all; -

-
-

The element will transition all properties:

- -
-
- - - -
-
-
-

- - - transition-property: none; -

-
-

The element will transition no property: the transition is thus instant.

- -
-
- - - -
-
-
-

- - - transition-property: background; -

-
-

The element will only transtion the background property.

- -
-
- - - -
-
-
-

- - - transition-property: color; -

-
-

The element will only transtion the color property.

- -
-
- - - -
-
-
-

- - - transition-property: transform; -

-
-

The element will only transtion the transform property.

- -
-
- - - -
- -
diff --git a/property/transition-timing-function/index.html b/property/transition-timing-function/index.html deleted file mode 100644 index ac27cf05..00000000 --- a/property/transition-timing-function/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -layout: single -property_name: transition-timing-function ---- - -
-
- -

- #transition-timing-function -

-
-

Defines how the values between the start and the end of the transition are calculated.

- -
- -
- - - - - - - - -
-
-

- default - - - transition-timing-function: ease; -

-
-

The transition starts slowly, accelerates in the middle, and slows down at the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: ease-in; -

-
-

The transition starts slowly, and accelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: ease-out; -

-
-

The transition starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: ease-in-out; -

-
-

Like ease, but more pronounced.

-

The transition starts quickly, and decelerates gradually until the end.

- -
-
- - - -
-
-
-

- - - transition-timing-function: linear; -

-
-

The transition has a *constant speed.

- -
-
- - - -
-
-
-

- - - transition-timing-function: step-start; -

-
-

The transition jumps instantly to the final state.

- -
-
- - - -
-
-
-

- - - transition-timing-function: step-end; -

-
-

The transition stays at the initial state until the end, when it instantly jumps to the final state.

- -
-
- - - -
-
-
-

- - - transition-timing-function: steps(4, end); -

-
-

By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants.

- -
-
- - - -
- -
diff --git a/property/transition/index.html b/property/transition/index.html deleted file mode 100644 index 82909e7d..00000000 --- a/property/transition/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -layout: single -property_name: transition ---- - -
-
- -

- #transition -

-
-

Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

-

Only transition-duration is required.

- -
- -
- - - - - - - -
-
-

- - - transition: 1s; -

-
-
  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function defaults to ease
  • transition-delay defaults to 0s
-
-
- - - -
-
-
-

- - - transition: 1s linear; -

-
-
  • transition-duration is set to 1s
  • transition-property defaults to all
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s
-
-
- - - -
-
-
-

- - - transition: background 1s linear; -

-
-
  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay defaults to 0s
-
-
- - - -
-
-
-

- - - transition: background 1s linear 500ms; -

-
-
  • transition-duration is set to 1s
  • transition-property is set to background
  • transition-timing-function is set to linear
  • transition-delay is set to 500ms
-
-
- - - -
-
-
-

- - - transition: background 4s, transform 1s; -

-
-

You can combine multiple properties with their own transition duration.

- -
-
- - - -
- -
diff --git a/property/white-space/index.html b/property/white-space/index.html deleted file mode 100644 index 33f1fe14..00000000 --- a/property/white-space/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -layout: single -property_name: white-space ---- - -
-
- -

- #white-space -

-
-

Defines how the element's white space is handled.

- -
- -
- - - - - - -
-
-

- default - - - white-space: normal; -

-
-

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

- -
-
- - - -
-
-
-

- - - white-space: nowrap; -

-
-

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

- -
-
- - - -
-
-
-

- - - white-space: pre; -

-
-

The white space is exactly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break only on new lines and <br>
    • -
- -
-
- - - -
-
-
-

- - - white-space: pre-wrap; -

-
-

The white space is mostly preserved.

-
    -
  • Sequences of spaces are preserved
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
- -
-
- - - -
-
-
-

- - - white-space: pre-line; -

-
-

Only new lines are preserved.

-
    -
  • Sequences of spaces are combined into one
    • -
  • Lines break on new lines, <br>, but also when reaching the end of the element
    • -
- -
-
- - - -
- -
diff --git a/property/width/index.html b/property/width/index.html deleted file mode 100644 index 7c023a74..00000000 --- a/property/width/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: width ---- - -
-
- -

- #width -

-
-

Defines the width of the element.

- -
- -
- - - - - -
-
-

- default - - - width: auto; -

-
-

The element will automatically adjust its width to allow its content to be displayed correctly.

- -
-
- - - -
-
-
-

- - - width: 240px; -

-
-

You can use numeric values like pixels, (r)em, percentages...

- -
-
- - - -
-
-
-

- - - width: 50%; -

-
-

If you use percentages, the value is relative to the container's width.

- -
-
- - - -
- -
diff --git a/property/will-change/index.html b/property/will-change/index.html deleted file mode 100644 index 07e97f90..00000000 --- a/property/will-change/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -layout: single -property_name: will-change ---- - -
-
- -

- #will-change -

-
-

Defines which properties are expected to change in the future (either through CSS or JavaScript).

- -
- -
- - - - - -
-
-

- default - - - will-change: auto; -

-
-

Doesn't tell the browser to optimize any property.

- -
-
- - - -
-
-
-

- - - will-change: scroll-position; -

-
-

Tells the browser to optimize for the element's scroll position, as it might change in the future.

- -
-
- - - -
-
-
-

- - - will-change: contents; -

-
-

Tells the browser to optimize for the element's contents, as it might change in the future.

- -
-
- - - -
-
-
-

- - - will-change: box-shadow; -

-
-

You can specify any other CSS property. For example, this tells the browser to optimize for the element's box-shadow, as it might change in the future.

- -
-
- - - -
- -
diff --git a/property/word-break/index.html b/property/word-break/index.html deleted file mode 100644 index 629f443f..00000000 --- a/property/word-break/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -layout: single -property_name: word-break ---- - -
-
- -

- #word-break -

-
-

Defines how words should break when reaching the end of a line.

- -
- -
- - - - - - -
-
-

- default - - - word-break: normal; -

-
-

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

- -
-
- - - -
-
-
-

- - - word-break: break-all; -

-
-

Words with no space will break as soon as they reach the end of a line.

- -
-
- - - -
- -
diff --git a/property/word-spacing/index.html b/property/word-spacing/index.html deleted file mode 100644 index 4f36edb0..00000000 --- a/property/word-spacing/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -layout: single -property_name: word-spacing ---- - -
-
- -

- #word-spacing -

-
-

Defines the spacing between words of a block of text.

- -
- -
- - - - - -
-
-

- default - - - word-spacing: normal; -

-
-

The spacing between the characters is normal.

- -
-
- - - -
-
-
-

- - - word-spacing: 5px; -

-
-

You can use pixel values.

- -
-
- - - -
-
-
-

- - - word-spacing: 2em; -

-
-

You can use em values: this allows the spacing to remain relative to the font-size.

- -
-
- - - -
- -
diff --git a/property/z-index/index.html b/property/z-index/index.html deleted file mode 100644 index 509c3f20..00000000 --- a/property/z-index/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -layout: single -property_name: z-index ---- - -
-
- -

- #z-index -

-
-

Defines the order of the elements on the z-axis*8. It only works on positioned** elements (anything apart from static).

- -
- -
- - - - - - - -
-
-

- default - - - z-index: auto; -

-
-

The order is defined by the order in the HTML code:

-
    -
  • first in the code = behind
    • -
  • last in the code = in front
    • -
- -
-
- - -
-
-
-

- - - z-index: 1; -

-
-

The z-index value is relative to the other ones. The target element is move in front of its siblings.

- -
-
- - - -
-
-
-

- - - z-index: -1; -

-
-

You can use negative values. The target element is move in behind its siblings.

- -
-
- - - -
- -
From a94e4fff6082bcfb4c0b5ea25d2715b3b05fcada Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 18:47:41 +0000 Subject: [PATCH 4/8] Dynamically generate the single pages, use the same include for the detail and list pages --- _config.local.yml | 5 ++++ _config.yml | 5 ++++ _includes/lists/main-list.html | 48 +--------------------------------- _includes/property.html | 47 +++++++++++++++++++++++++++++++++ _layouts/single.html | 3 ++- 5 files changed, 60 insertions(+), 48 deletions(-) create mode 100644 _includes/property.html diff --git a/_config.local.yml b/_config.local.yml index fc734fb5..a3bdf97d 100644 --- a/_config.local.yml +++ b/_config.local.yml @@ -5,3 +5,8 @@ url: http://localhost:4000 markdown: kramdown permalink: pretty exclude: ['node_modules'] +page_gen: + - data: properties + template: single + name: title + dir: property diff --git a/_config.yml b/_config.yml index 485ea339..0ff99dde 100644 --- a/_config.yml +++ b/_config.yml @@ -5,3 +5,8 @@ url: http://cssreference.io markdown: kramdown permalink: pretty exclude: ['node_modules'] +page_gen: + - data: properties + template: single + name: title + dir: property diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html index ea43dc26..21ab8d26 100644 --- a/_includes/lists/main-list.html +++ b/_includes/lists/main-list.html @@ -1,49 +1,3 @@ {% for property in site.data.properties %} -
-
- -

- #{{property.name}} -

-
- {{property.description}} -
-
- {% for action in property.actions %} - {{action}} - {% endfor %} -
-
- - {% for example in property.examples %} -
-
-

- {% if example.is_default %}default{% endif %} - - -

-
- {{example.description}} -
-
- - -
- {% endfor %} -
+ {% include property.html %} {% endfor %} diff --git a/_includes/property.html b/_includes/property.html new file mode 100644 index 00000000..e535416f --- /dev/null +++ b/_includes/property.html @@ -0,0 +1,47 @@ +
+
+ +

+ #{{property.title}} +

+
+ {{property.description}} +
+
+ {% for action in property.actions %} + {{action}} + {% endfor %} +
+
+ + {% for example in property.examples %} +
+
+

+ {% if example.is_default %}default{% endif %} + + {{example.title}} +

+
+ {{example.description}} +
+
+ + +
+ {% endfor %} +
diff --git a/_layouts/single.html b/_layouts/single.html index 209b0aef..33a03f99 100644 --- a/_layouts/single.html +++ b/_layouts/single.html @@ -33,7 +33,8 @@ View in context
- {{content}} + {% assign property = page %} + {% include property.html %}
{% include modals/share.html %} From e52f2093557b02c2cbdda3a416b39c0c7448046b Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 18:57:47 +0000 Subject: [PATCH 5/8] Add plugin --- _plugins/data_page_generator.rb | 127 ++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 _plugins/data_page_generator.rb diff --git a/_plugins/data_page_generator.rb b/_plugins/data_page_generator.rb new file mode 100644 index 00000000..e3d10abf --- /dev/null +++ b/_plugins/data_page_generator.rb @@ -0,0 +1,127 @@ +# Generate pages from individual records in yml files +# (c) 2014-2016 Adolfo Villafiorita +# Distributed under the conditions of the MIT License + +module Jekyll + + module Sanitizer + # strip characters and whitespace to create valid filenames, also lowercase + def sanitize_filename(name) + if(name.is_a? Integer) + return name.to_s + end + return name.downcase.strip.gsub(' ', '-').gsub(/[^\w.-]/, '') + end + end + + # this class is used to tell Jekyll to generate a page + class DataPage < Page + include Sanitizer + + # - site and base are copied from other plugins: to be honest, I am not sure what they do + # + # - `index_files` specifies if we want to generate named folders (true) or not (false) + # - `dir` is the default output directory + # - `data` is the data defined in `_data.yml` of the record for which we are generating a page + # - `name` is the key in `data` which determines the output filename + # - `template` is the name of the template for generating the page + # - `extension` is the extension for the generated file + def initialize(site, base, index_files, dir, data, name, template, extension) + @site = site + @base = base + + # @dir is the directory where we want to output the page + # @name is the name of the page to generate + # + # the value of these variables changes according to whether we + # want to generate named folders or not + filename = sanitize_filename(data[name]).to_s + if index_files + @dir = dir + (index_files ? "/" + filename + "/" : "") + @name = "index" + "." + extension.to_s + else + @dir = dir + @name = filename + "." + extension.to_s + end + + self.process(@name) + self.read_yaml(File.join(base, '_layouts'), template + ".html") + self.data['title'] = data[name] + # add all the information defined in _data for the current record to the + # current page (so that we can access it with liquid tags) + self.data.merge!(data) + end + end + + class DataPagesGenerator < Generator + safe true + + # generate loops over _config.yml/page_gen invoking the DataPage + # constructor for each record for which we want to generate a page + + def generate(site) + # page_gen_dirs determines whether we want to generate index pages + # (name/index.html) or standard files (name.html). This information + # is passed to the DataPage constructor, which sets the @dir variable + # as required by this directive + index_files = site.config['page_gen-dirs'] == true + + # data contains the specification of the data for which we want to generate + # the pages (look at the README file for its specification) + data = site.config['page_gen'] + if data + data.each do |data_spec| + template = data_spec['template'] || data_spec['data'] + name = data_spec['name'] + dir = data_spec['dir'] || data_spec['data'] + extension = data_spec['extension'] || "html" + + if site.layouts.key? template + # records is the list of records defined in _data.yml + # for which we want to generate different pages + records = nil + data_spec['data'].split('.').each do |level| + if records.nil? + records = site.data[level] + else + records = records[level] + end + end + records.each do |record| + site.pages << DataPage.new(site, site.source, index_files, dir, record, name, template, extension) + end + else + puts "error. could not find template #{template}" if not site.layouts.key? template + end + end + end + end + end + + module DataPageLinkGenerator + include Sanitizer + + # use it like this: {{input | datapage_url: dir}} + # to generate a link to a data_page. + # + # the filter is smart enough to generate different link styles + # according to the data_page-dirs directive ... + # + # ... however, the filter is not smart enough to support different + # extensions for filenames. + # + # Thus, if you use the `extension` feature of this plugin, you + # need to generate the links by hand + def datapage_url(input, dir) + @gen_dir = Jekyll.configuration({})['page_gen-dirs'] + if @gen_dir then + dir + "/" + sanitize_filename(input) + "/index.html" + else + dir + "/" + sanitize_filename(input) + ".html" + end + end + end + +end + +Liquid::Template.register_filter(Jekyll::DataPageLinkGenerator) From b49827f26e47c5bc9086d4b3ff138e2b25b37b8d Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 19:01:54 +0000 Subject: [PATCH 6/8] Generate the menu from the data too --- _includes/lists/menu-list.html | 131 +-------------------------------- 1 file changed, 3 insertions(+), 128 deletions(-) diff --git a/_includes/lists/menu-list.html b/_includes/lists/menu-list.html index 7ac141d0..19e8a7af 100644 --- a/_includes/lists/menu-list.html +++ b/_includes/lists/menu-list.html @@ -1,128 +1,3 @@ -
  • align-content
    • -
  • align-items
    • -
  • align-self
    • -
  • animation-delay
    • -
  • animation-direction
    • -
  • animation-duration
    • -
  • animation-fill-mode
    • -
  • animation-iteration-count
    • -
  • animation-name
    • -
  • animation-play-state
    • -
  • animation-timing-function
    • -
  • animation
    • -
  • background-attachment
    • -
  • background-clip
    • -
  • background-color
    • -
  • background-image
    • -
  • background-origin
    • -
  • background-position
    • -
  • background-repeat
    • -
  • background-size
    • -
  • background
    • -
  • border-bottom-color
    • -
  • border-bottom-left-radius
    • -
  • border-bottom-right-radius
    • -
  • border-bottom-style
    • -
  • border-bottom-width
    • -
  • border-bottom
    • -
  • border-collapse
    • -
  • border-color
    • -
  • border-left-color
    • -
  • border-left-style
    • -
  • border-left-width
    • -
  • border-left
    • -
  • border-radius
    • -
  • border-right-color
    • -
  • border-right-style
    • -
  • border-right-width
    • -
  • border-right
    • -
  • border-style
    • -
  • border-top-color
    • -
  • border-top-left-radius
    • -
  • border-top-right-radius
    • -
  • border-top-style
    • -
  • border-top-width
    • -
  • border-top
    • -
  • border-width
    • -
  • border
    • -
  • bottom
    • -
  • box-shadow
    • -
  • box-sizing
    • -
  • clear
    • -
  • color
    • -
  • column-count
    • -
  • column-gap
    • -
  • column-width
    • -
  • content
    • -
  • cursor
    • -
  • display
    • -
  • flex-basis
    • -
  • flex-direction
    • -
  • flex-flow
    • -
  • flex-grow
    • -
  • flex-shrink
    • -
  • flex-wrap
    • -
  • float
    • -
  • font-family
    • -
  • font-size
    • -
  • font-style
    • -
  • font-variant
    • -
  • font-weight
    • -
  • font
    • -
  • height
    • -
  • justify-content
    • -
  • left
    • -
  • letter-spacing
    • -
  • line-height
    • -
  • list-style-image
    • -
  • list-style-position
    • -
  • list-style-type
    • -
  • list-style
    • -
  • margin-bottom
    • -
  • margin-left
    • -
  • margin-right
    • -
  • margin-top
    • -
  • margin
    • -
  • max-height
    • -
  • max-width
    • -
  • min-height
    • -
  • min-width
    • -
  • mix-blend-mode
    • -
  • opacity
    • -
  • order
    • -
  • outline-color
    • -
  • outline-style
    • -
  • outline-width
    • -
  • outline
    • -
  • overflow-wrap
    • -
  • overflow-x
    • -
  • overflow-y
    • -
  • overflow
    • -
  • padding-bottom
    • -
  • padding-left
    • -
  • padding-right
    • -
  • padding-top
    • -
  • padding
    • -
  • pointer-events
    • -
  • position
    • -
  • resize
    • -
  • text-align
    • -
  • text-decoration
    • -
  • text-indent
    • -
  • text-overflow
    • -
  • text-shadow
    • -
  • text-transform
    • -
  • top
    • -
  • transform-origin
    • -
  • transform
    • -
  • transition-delay
    • -
  • transition-duration
    • -
  • transition-property
    • -
  • transition-timing-function
    • -
  • transition
    • -
  • white-space
    • -
  • width
    • -
  • will-change
    • -
  • word-break
    • -
  • word-spacing
    • -
  • z-index
    • +{% for property in site.data.properties %} +
  • {{property.title}}
    • +{% endfor %} From 88cb58549761cfa789c7e0607eae954225a7e4d1 Mon Sep 17 00:00:00 2001 From: Ollie Relph Date: Fri, 25 Nov 2016 19:03:12 +0000 Subject: [PATCH 7/8] Tidy the data a little more --- _data/properties.yml | 916 +++++++++++++++++++++---------------------- 1 file changed, 458 insertions(+), 458 deletions(-) diff --git a/_data/properties.yml b/_data/properties.yml index f2728e39..655f2275 100644 --- a/_data/properties.yml +++ b/_data/properties.yml @@ -35,7 +35,7 @@ description: "

    Each line will stretch to fill the remaining space.

    In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

    " - output:

    1

    2

    3

    4

    5

    @@ -44,7 +44,7 @@ description: "

    Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

    " - output:

    1

    2

    3

    4

    5

    @@ -52,7 +52,7 @@ title: 'align-content: flex-end;' description: "

    Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

    " - output:

    1

    2

    3

    4

    5

    @@ -61,7 +61,7 @@ description: "

    Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

    " - output:

    1

    2

    3

    4

    5

    @@ -69,7 +69,7 @@ title: 'align-content: space-between;' description: "

    Each line will only fill the space it needs. The remaining space will appear between the lines.

    " - output:

    1

    2

    3

    4

    5

    @@ -78,7 +78,7 @@ description: "

    Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

    " - output:

    1

    2

    3

    4

    5

    @@ -111,7 +111,7 @@ description: "

    The flexbox items are aligned at the start of the cross axis.

    By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

    " - output:

    1

    2

    3

    4

    5

    @@ -120,7 +120,7 @@ description: "

    The flexbox items are aligned at the end of the cross axis.

    By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

    " - output:

    1

    2

    3

    4

    5

    @@ -129,7 +129,7 @@ description: "

    The flexbox items are aligned at the center of the cross axis.

    By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

    " - output:

    1

    2

    3

    4

    5

    @@ -139,7 +139,7 @@ of the cross axis.

    By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

    " - output:

    1

    2

    3

    4

    5

    @@ -148,7 +148,7 @@ description: "

    The flexbox items will stretch across the whole cross axis.

    By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

    " - output:

    1

    2

    3

    4

    5

    @@ -188,7 +188,7 @@ target has align-items: flex-start, only the target will be at the start of the cross axis.

    By default, this means it will be aligned vertically at the top.

    " - output:

    1

    Target

    3

    4

    5

    @@ -198,7 +198,7 @@ target has align-items: flex-end, only the target will be at the end of the cross axis.

    By default, this means it will be aligned vertically at the bottom.

    " - output:

    1

    Target

    3

    4

    5

    @@ -208,7 +208,7 @@ the target has align-items: center, only the target will be at the center of the cross axis.

    By default, this means it will be vertically centered.

    " - output:

    1

    Target

    3

    4

    5

    @@ -218,7 +218,7 @@ target has align-items: baseline, only the target will be at the baseline of the cross axis.

    By default, this means it will be aligned along the basline of the text.

    " - output:

    1

    Target

    3

    4

    5

    @@ -227,7 +227,7 @@ description: "

    If the container has align-items: center and the target has align-items: stretch, only the target will stretch along the whole cross axis.

    " - output:

    1

    Target

    3

    4

    5

    @@ -559,7 +559,7 @@ title: 'background-attachment: scroll;' description: "

    The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'background-attachment: fixed;' @@ -567,7 +567,7 @@ and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

    " - output:

    Hello + output:

    Hello world

    - title: background-clip is_shorthand: false @@ -584,19 +584,19 @@ title: 'background-clip: border-box;' description: "

    The background extends completely throughout the element, even under the border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-clip: padding-box;' description: "

    The background only extends to the edge of the border: it includes the padding but not the border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-clip: content-box;' description: "

    The background only extends to the edge of the content: it doesn't include the padding, nor the border.

    " - output:
    Hello + output:
    Hello world
    - title: background-color is_shorthand: false @@ -615,18 +615,18 @@ title: 'background-color: transparent;' description: "

    By default, the background color is transparent, basically meaning that there is no background color.

    " - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: #05ffb0;' description: "

    You can use hexadecimal color codes.

    " - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: rgb(50, 115, 220);' @@ -634,7 +634,7 @@ first value is for red
  • the second value is for green
  • the third value is for blue

    • Each of them can have a value between 0 and 255.

    " - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: rgba(50, 115, 220, 0.3);' @@ -642,7 +642,7 @@ first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: hsl(14, 100%, 53%);' @@ -651,7 +651,7 @@ second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
    • " - output:
    Hello + output:
    Hello World
    - is_default: false title: 'background-color: hsla(14, 100%, 53%, 0.6);' @@ -659,7 +659,7 @@ first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello World
    - title: background-image is_shorthand: false @@ -690,14 +690,14 @@ - is_default: true title: 'background-image: none;' description: "

    Removes any background image.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: url(/images/jt.png);' description: "

    Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: linear-gradient(red, blue);' @@ -707,7 +707,7 @@ angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: linear-gradient(45deg, red, blue);' @@ -716,41 +716,41 @@ of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

    In this example, 45deg means 2:30, or the top right corner.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: radial-gradient(green, purple);' description: "

    You can define a radial gradient as the background image.

    You need to define at least two colors. The first one will be at the center, the second one at the edges.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: radial-gradient(circle, green, purple);' description: "

    You can specify the shape of the radial gradient: circle or ellipse (default).

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);' description: "

    You can specify color stops using percentage values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);' description: "

    You can specify where the gradient should end:

    • closest-side
    • closest-corner
    • farthest-side
    • farthest-corner
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);' description:

    Like with the background-position, you can specify the position of the gradient.

    - output:
    Hello + output:
    Hello world
    - title: background-origin is_shorthand: false @@ -769,18 +769,18 @@ title: 'background-origin: padding-box;' description: "

    The background image starts at the edge of the border: within padding but not the border.

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'background-origin: border-box;' description: "

    The background image starts under the border.

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'background-origin: content-box;' description: "

    The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

    " - output:

    Hello + output:

    Hello world

    - title: background-position is_shorthand: false @@ -798,20 +798,20 @@ description: "

    The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-position: bottom right;' description: "

    You can use a combination of position keywords: center, top, bottom, left and right.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-position: center center;' description: "

    The background image will be positioned in the center of the element.

    " - output:
    Hello + output:
    Hello world
    - title: background-repeat is_shorthand: false @@ -830,22 +830,22 @@ title: 'background-repeat: repeat;' description: "

    The background image will repeat itself both horizontally and vertically.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-repeat: repeat-x;' description: "

    The background image will only repeat itself horizontally.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-repeat: repeat-y;' description: "

    The background image will only repeat itself vertically.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-repeat: no-repeat;' description: "

    The background image will only appear once.

    " - output:
    Hello + output:
    Hello world
    - title: background-size is_shorthand: false @@ -866,33 +866,33 @@ size.

    For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-size: 120px 80px;' description: "

    You can specify a size in pixels:

    • the first value is the horizontal size
    • the second is the vertical size
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-size: 100% 50%;' description: "

    You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-size: contain;' description: "

    The keyword contain will resize the background image to make sure it remains fully visible.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'background-size: cover;' description: "

    The keyword cover will resize the background image to make sure the element is fully covered.

    " - output:
    Hello + output:
    Hello world
    - title: background is_shorthand: true @@ -928,19 +928,19 @@ description: "

    Applies a transparent color to the bottom border. The bottom border will still take up the space defined by the border-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-color: #05ffb0;' description: "

    You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

    " - output:
    Hello + output:
    Hello world
    - title: border-bottom-left-radius is_shorthand: false @@ -957,25 +957,25 @@ - is_default: true title: 'border-bottom-left-radius: 0;' description: "

    Removes any border radius.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-left-radius: 20px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-left-radius: 50%;' description: "

    You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the left border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-left-radius: 20px 50%;' description: "

    If you set two values, the first one is for the bottom border, the second one for the left border.

    " - output:
    Hello + output:
    Hello world
    - title: border-bottom-right-radius is_shorthand: false @@ -992,25 +992,25 @@ - is_default: true title: 'border-bottom-right-radius: 0;' description: "

    Removes any border radius.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-right-radius: 20px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-right-radius: 50%;' description: "

    You can use percentage values. In this example, the radius starts halfway on the bottom border, and ends halfway on the right border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-right-radius: 20px 50%;' description: "

    If you set two values, the first one is for the bottom border, the second one for the right border.

    " - output:
    Hello + output:
    Hello world
    - title: border-bottom-style is_shorthand: false @@ -1029,32 +1029,32 @@ - is_default: true title: 'border-bottom-style: none;' description: "

    Removes the bottom border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-style: dotted;' description: "

    Turns the bottom border into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-style: dashed;' description: "

    Turns the bottom border into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-style: solid;' description: "

    Turns the bottom border into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-style: double;' description: "

    Splits the bottom border into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-style: groove;' description: "

    Sets an inset style to the bottom border.

    " - output:
    Hello + output:
    Hello world
    - title: border-bottom-width is_shorthand: false @@ -1069,12 +1069,12 @@ - is_default: true title: 'border-bottom-width: 0;' description: "

    Removes the bottom border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom-width: 4px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - title: border-bottom is_shorthand: true @@ -1092,13 +1092,13 @@ - is_default: false title: 'border-bottom: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-bottom: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello + output:
    Hello world
    - title: border-collapse is_shorthand: false @@ -1120,7 +1120,7 @@ description: "

    Each table cell will display its own borders.

    In this example, each cell has a border-width of 4px. As a result, the border between two cells will be 8px.

    " - output:
    NameInstrument
    John + output:
    NameInstrument
    John LennonRhythm Guitar
    Paul McCartneyBass
    George HarrisonLead Guitar
    Ringo StarrDrums
    - is_default: false @@ -1128,7 +1128,7 @@ description: '

    Adjacent table cells will merge their borders together.

    The cell that appears first in the code will "win": its borders will mask those of the following cells.

    ' - output:
    NameInstrument
    John + output:
    NameInstrument
    John LennonRhythm Guitar
    Paul McCartneyBass
    George HarrisonLead Guitar
    Ringo StarrDrums
    - title: border-color @@ -1150,18 +1150,18 @@ description: "

    Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: #05ffb0;' description: "

    You can use hexadecimal color codes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: rgb(50, 115, 220);' @@ -1169,7 +1169,7 @@ first value is for red
  • the second value is for green
  • the third value is for blue

    • Each of them can have a value between 0 and 255.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: rgba(50, 115, 220, 0.3);' @@ -1177,7 +1177,7 @@ first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: hsl(14, 100%, 53%);' @@ -1186,7 +1186,7 @@ second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
    • " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-color: hsla(14, 100%, 53%, 0.6);' @@ -1194,7 +1194,7 @@ first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello world
    - title: border-left-color is_shorthand: false @@ -1212,19 +1212,19 @@ description: "

    Applies a transparent color to the left border. The left border will still take up the space defined by the border-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-color: #05ffb0;' description: "

    You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

    " - output:
    Hello + output:
    Hello world
    - title: border-left-style is_shorthand: false @@ -1243,32 +1243,32 @@ - is_default: true title: 'border-left-style: none;' description: "

    Removes the left border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-style: dotted;' description: "

    Turns the left border into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-style: dashed;' description: "

    Turns the left border into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-style: solid;' description: "

    Turns the left border into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-style: double;' description: "

    Splits the left border into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-style: groove;' description: "

    Sets an inset style to the left border.

    " - output:
    Hello + output:
    Hello world
    - title: border-left-width is_shorthand: false @@ -1283,12 +1283,12 @@ - is_default: true title: 'border-left-width: 0;' description: "

    Removes the left border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left-width: 4px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - title: border-left is_shorthand: true @@ -1305,13 +1305,13 @@ - is_default: false title: 'border-left: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-left: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello + output:
    Hello world
    - title: border-radius is_shorthand: false @@ -1327,25 +1327,25 @@ - is_default: true title: 'border-radius: 0;' description: "

    Removes any border radius.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-radius: 20px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-radius: 50%;' description: "

    You can use percentage values. In this example, the radius starts halfway through each border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-radius: 20px 50%;' description: "

    If you set two values, the first one is for the top and bottom borders, the second one for the left and right borders.

    " - output:
    Hello + output:
    Hello world
    - title: border-right-color is_shorthand: false @@ -1363,19 +1363,19 @@ description: "

    Applies a transparent color to the right border. The right border will still take up the space defined by the border-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-color: #05ffb0;' description: "

    You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

    " - output:
    Hello + output:
    Hello world
    - title: border-right-style is_shorthand: false @@ -1394,32 +1394,32 @@ - is_default: true title: 'border-right-style: none;' description: "

    Removes the right border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-style: dotted;' description: "

    Turns the right border into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-style: dashed;' description: "

    Turns the right border into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-style: solid;' description: "

    Turns the right border into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-style: double;' description: "

    Splits the right border into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-style: groove;' description: "

    Sets an inset style to the right border.

    " - output:
    Hello + output:
    Hello world
    - title: border-right-width is_shorthand: false @@ -1434,12 +1434,12 @@ - is_default: true title: 'border-right-width: 0;' description: "

    Removes the right border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right-width: 4px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - title: border-right is_shorthand: true @@ -1456,13 +1456,13 @@ - is_default: false title: 'border-right: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-right: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello + output:
    Hello world
    - title: border-style is_shorthand: false @@ -1480,32 +1480,32 @@ - is_default: true title: 'border-style: none;' description: "

    Removes the element's borders.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-style: dotted;' description: "

    Turns the border into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-style: dashed;' description: "

    Turns the border into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-style: solid;' description: "

    Turns the border into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-style: double;' description: "

    Splits the border into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-style: groove;' description: "

    Sets an inset style to the borders.

    " - output:
    Hello + output:
    Hello world
    - title: border-top-color is_shorthand: false @@ -1523,19 +1523,19 @@ description: "

    Applies a transparent color to the top border. The top border will still take up the space defined by the border-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-color: #05ffb0;' description: "

    You can use hexadecimal color codes, rgb(), rgba(), hsl(), hsla()...

    " - output:
    Hello + output:
    Hello world
    - title: border-top-left-radius is_shorthand: false @@ -1552,25 +1552,25 @@ - is_default: true title: 'border-top-left-radius: 0;' description: "

    Removes any border radius.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-left-radius: 20px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-left-radius: 50%;' description: "

    You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the left border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-left-radius: 20px 50%;' description: "

    If you set two values, the first one is for the top border, the second one for the left border.

    " - output:
    Hello + output:
    Hello world
    - title: border-top-right-radius is_shorthand: false @@ -1587,25 +1587,25 @@ - is_default: true title: 'border-top-right-radius: 0;' description: "

    Removes any border radius.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-right-radius: 20px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-right-radius: 50%;' description: "

    You can use percentage values. In this example, the radius starts halfway on the top border, and ends halfway on the right border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-right-radius: 20px 50%;' description: "

    If you set two values, the first one is for the top border, the second one for the right border.

    " - output:
    Hello + output:
    Hello world
    - title: border-top-style is_shorthand: false @@ -1624,32 +1624,32 @@ - is_default: true title: 'border-top-style: none;' description: "

    Removes the top border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-style: dotted;' description: "

    Turns the top border into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-style: dashed;' description: "

    Turns the top border into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-style: solid;' description: "

    Turns the top border into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-style: double;' description: "

    Splits the top border into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-style: groove;' description: "

    Sets an inset style to the top border.

    " - output:
    Hello + output:
    Hello world
    - title: border-top-width is_shorthand: false @@ -1664,12 +1664,12 @@ - is_default: true title: 'border-top-width: 0;' description: "

    Removes the top border.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top-width: 4px;' description: "

    You can use pixel values.

    " - output:
    Hello + output:
    Hello world
    - title: border-top is_shorthand: true @@ -1686,13 +1686,13 @@ - is_default: false title: 'border-top: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-top: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello + output:
    Hello world
    - title: border-width is_shorthand: false @@ -1706,13 +1706,13 @@ - is_default: false title: 'border-width: 1px;' description: "

    Defines the width of all borders to 1px.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border-width: 2px 0;' description: "

    Defines the top and bottom borders to 2px, the left and right to 0.

    " - output:
    Hello + output:
    Hello world
    - title: border is_shorthand: true @@ -1729,13 +1729,13 @@ - is_default: false title: 'border: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'border: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello world
    + output:
    Hello world
    - title: bottom is_shorthand: false description: "

    Defines the position of the element according to its bottom @@ -1757,21 +1757,21 @@ - is_default: true title: 'bottom: auto;' description: "

    The element will remain in its natural position.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - is_default: false title: 'bottom: 20px;' description: "

    If the element is in position relative, the element will move upwards by the amount defined by the bottom value.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - is_default: false title: 'bottom: 0;' description: "

    If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - title: box-shadow is_shorthand: false @@ -1788,35 +1788,35 @@ - is_default: true title: 'box-shadow: none;' description: "

    Removes any box-shadow that was applied to the element.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'box-shadow: 2px 6px;' description: "

    You need at least two values:

    • the first is the horizontal offset
    • the second is the vertical offset

    The shadow color will be inherited from the text color.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'box-shadow: 2px 6px red;' description:

    You can define a color as the last value.

    As with color, you can use color names, hexadecimal, rgb, hsl...

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'box-shadow: 2px 4px 10px red;' description: "

    The optional third value defines the blur of the shadow.

    The color will be diffused across 10px in this example, from opaque to transparent.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'box-shadow: 2px 4px 10px 4px red;' description: "

    The optional fourth value defines the spread of the shadow.

    The spread defines how much the shadow should grow: it enhances the shadow.

    " - output:
    Hello + output:
    Hello world
    - title: box-sizing is_shorthand: false @@ -1843,7 +1843,7 @@ 30px
  • width: 200px

    • The full width is 24px + 60px + 200px = 284px.

    The content has the defined width. The box accomodates for those dimensions.

    " - output:
    Hello world
    - is_default: false title: 'box-sizing: border-box;' @@ -1855,7 +1855,7 @@ is 200px, no matter what.

    The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

    " - output:
    Hello world
    - title: clear is_shorthand: false @@ -1877,7 +1877,7 @@ description: "

    The clear property is only relevant when used with siblings that have a float value.

    The element will sit alongside any floated element that precedes it.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    Float left
    block

    The cleared element will move after any left floating element that precedes it, but will remain alongside right float elements.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    Float left

    The cleared element will move after any right floating element that precedes it, but will remain alongside left float elements.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    Tall
    float
    left
    block

    The cleared element will move after any floating element that precedes it. This includes both left floating and right floating elements.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    Float left

    Applies a transparent color to the text. The text will still take up the space it should.

    " - output:
    Hello world
    + output:
    Hello world
    - is_default: false title: 'color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello world
    + output:
    Hello world
    - is_default: false title: 'color: #05ffb0;' description: "

    You can use hexadecimal color codes.

    " - output:
    Hello world
    + output:
    Hello world
    - is_default: false title: 'color: rgb(50, 115, 220);' description: "

    You can use rgb() color codes:

    • the first value is for red
    • the second value is for green
    • the third value is for blue

    Each of them can have a value between 0 and 255.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'color: rgba(0, 0, 0, 0.5);' @@ -1969,7 +1969,7 @@ first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello world
    + output:
    Hello world
    - is_default: false title: 'color: hsl(14, 100%, 53%);' description: "

    You can use hsl() color codes:

    • the @@ -1977,14 +1977,14 @@ second value is for saturation and go from 0% to 100%
    • the third value is for luminosity and go from 0% to 100%
    " - output:
    Hello world
    + output:
    Hello world
    - is_default: false title: 'color: hsla(14, 100%, 53%, 0.6);' description: "

    You can use hsl()a color codes:

    • the first 3 values are for hsl
    • the 4th value is for the alpha channel and defines the opacity of the color

    The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello world
    - title: column-count is_shorthand: false @@ -1999,14 +1999,14 @@ title: 'column-count: auto;' description: "

    Removes any columns from the element (unless another column- property was set).

    " - output:

    Hello world

    Foo bar

    CSS Reference

    - is_default: false title: 'column-count: 3;' description: "

    When using an integer value, the element will distribute its child elements across the number of columns defined.

    " - output:

    Hello world

    Foo bar

    CSS Reference

    - title: column-gap @@ -2023,7 +2023,7 @@ title: 'column-gap: normal;' description: "

    The gap between the columns is set to the browser's default value, which usually is 1em.

    " - output:

    Hello world

    Foo bar

    CSS Reference

    - is_default: false @@ -2031,7 +2031,7 @@ description: "

    You can use pixel values for the gap.

    Note that the gap only appears between columns, and not on the exterior sides of the edge columns.

    " - output:

    Hello world

    Foo bar

    CSS Reference

    - title: column-width @@ -2049,7 +2049,7 @@ into columns, unlesse a column-count value is defined. In that case, the column width will be infered from the column count.

    - output:

    Hello world

    Foo bar

    CSS Reference

    - is_default: false @@ -2057,7 +2057,7 @@ description: "

    You can use pixel values for the column width.

    The number of columns will be the minimum needed to distribute all the content across the element.

    " - output:

    Hello world

    Foo bar

    CSS Reference

    - title: content @@ -2077,7 +2077,7 @@ - is_default: true title: 'content: normal;' description: "

    No content is added to the element.

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'content: "Foo bar";' @@ -2086,13 +2086,13 @@ "Foo bar"; }

    The text content will be prepended to the element''s content.

    Notice how the end result combines text from the HTML and text from the CSS.

    ' - output:

    Hello + output:

    Hello world

    - is_default: false title: 'content: url(/images/jt.png);' description: "

    You can insert images by using the url() function.

    " - output:

    Hello world

    - is_default: false title: 'content: attr(data-something);' @@ -2100,7 +2100,7 @@ data-something="cssreference"> Hello world </p>

    And this CSS:

    .element:before { content: attr(data-something); }

    The element will grab the text content from the HTML attribute.

    ' - output:

    Hello world

    - title: cursor is_shorthand: false @@ -2127,71 +2127,71 @@ title: 'cursor: default;' description: "

    Sets the cursor to the element's default value. For a link, it would be a pointer. For text it would be a selection cursor.

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: auto;' description: "

    auto

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: pointer;' description: "

    pointer

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: move;' description: "

    move

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: crosshair;' description: "

    crosshair

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: text;' description: "

    text

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: wait;' description: "

    wait

    " - output:

    Hello world

    + output:

    Hello world

    - is_default: false title: 'cursor: helpe-resize;' description: "

    helpe-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: ne-resize;' description: "

    ne-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: nw-resize;' description: "

    nw-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: n-resize;' description: "

    n-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: se-resize;' description: "

    se-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: sw-resize;' description: "

    sw-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: s-resize;' description: "

    s-resize

    " - output:

    Hello + output:

    Hello world

    - is_default: false title: 'cursor: w-resize;' description: "

    w-resize

    " - output:

    Hello + output:

    Hello world

    - title: display is_shorthand: false @@ -2218,7 +2218,7 @@ title: 'display: none;' description: "

    The element is completely removed, as if it wasn't in the HTML code in the first place.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Hello world

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    @@ -2227,7 +2227,7 @@ description: "

    The element is turned into an inline element: it behaves like simple text.

    Any height and width applied will have no effect.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Hello world

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    @@ -2235,7 +2235,7 @@ title: 'display: block;' description: "

    The element is turned into a block element: it starts on a new line, and takes up the whole width.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Hello world

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    @@ -2246,7 +2246,7 @@ the element behaves like simple text, and inserts itself in a block of text
  • Block because you can apply height and width values

    • For example, this element has:

    .element{ height: 3em; width: 60px; }
    " - output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Hello world

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    @@ -2255,7 +2255,7 @@ description: "

    The element behaves like a list item: <li>. The only difference with block is that a list item has a bullet point.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Hello world

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
    @@ -2263,7 +2263,7 @@ title: 'display: table;' description: "

    The element behaves like a table: <table>.

    Its content and child elements behave like table cells.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Target First child Second child

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat @@ -2273,7 +2273,7 @@ description: "

    The element behaves like a table cell: <td> or <th>.

    Its content and child elements behave like table cells.

    " - output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Target First child Second child

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat @@ -2282,7 +2282,7 @@ title: 'display: table-row;' description: "

    The element behaves like a table row: <tr>.

    Its content and child elements behave like table cells.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Target First child Second child

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat @@ -2292,7 +2292,7 @@ description: "

    The element is turned into an flexbox container. On its own, it behaves like a block element.

    Its child elements will be turned into flexbox items.

    " - output:
    Lorem + output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    First child Second child

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida @@ -2305,7 +2305,7 @@ of text
  • flexbox because its child element will be turned into flexbox items

    • For example, this element has:

    .element{
       height: 3em; width: 120px; }
    " - output:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    First child Second child

    Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus @@ -2326,13 +2326,13 @@ title: 'flex-basis: auto;' description: "

    The element will be automatically sized based on its content, or on any height or width value if they are defined.

    " - output:

    Flexbox item

    - is_default: false title: 'flex-basis: 80px;' description: "

    You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

    " - output:

    Flexbox item

    - title: flex-direction is_shorthand: false @@ -2349,7 +2349,7 @@ title: 'flex-direction: row;' description: "

    The flexbox items are ordered the same way as the text direction, along the main axis.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    @@ -2357,7 +2357,7 @@ title: 'flex-direction: row-reverse;' description: "

    The flexbox items are ordered the opposite way as the text direction, along the main axis.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    @@ -2365,7 +2365,7 @@ title: 'flex-direction: column;' description: "

    The flexbox items are ordered the same way as the text direction, along the cross axis.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    @@ -2373,7 +2373,7 @@ title: 'flex-direction: column-reverse;' description: "

    The flexbox items are ordered the opposite way as the text direction, along the cross axis.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    @@ -2404,7 +2404,7 @@ title: 'flex-grow: 0;' description: "

    The element will not grow if there's space available. It will only use the space it needs.

    " - output:

    Target

    Item

    Item

    - is_default: false @@ -2412,7 +2412,7 @@ description: "

    The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

    " - output:

    Target

    Item

    Item

    - is_default: false @@ -2423,7 +2423,7 @@
    • 1 third goes to the green item
    • 2 thirds go to the pink item
    • Nothing goes to the yellow item, who retains its initial width
    " - output:

    Item
    1

    Item
    2

    Item
    0

    - title: flex-shrink @@ -2448,7 +2448,7 @@ description: "

    If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

    " - output:

    This is the flex-shrink target

    Foo bar

    Lorem ipsum

    - is_default: false @@ -2458,7 +2458,7 @@ will shrink to give space to the target element.

    Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

    " - output:

    This is the flex-shrink target

    Foo bar

    Lorem ipsum

    - is_default: false @@ -2470,7 +2470,7 @@ 4:

    • 3 quarters are taken from the red item
    • 1 quarter is taken from the yellow item
    " - output:

    Width
    100%

    Shrink
    3

    Shrink
    1

    - title: flex-wrap @@ -2488,7 +2488,7 @@ title: 'flex-wrap: nowrap;' description: "

    The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    5. @@ -2497,7 +2497,7 @@ title: 'flex-wrap: wrap;' description: "

    The flexbox items will be distributed among multiple lines if needed.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    5. @@ -2507,7 +2507,7 @@ description: "

    The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

    " - output:

    1. One

    2. Two

    3. Three

    4. Four

    5. @@ -2526,7 +2526,7 @@ title: 'float: none;' description: "

    Removes any previously defined float value. The element will remain in the natural flow of the page.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

    Target element

    Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit @@ -2537,7 +2537,7 @@ description: "

    Moves the element to the left side of its container. The following elements will wrap around it and fill the space remaining on the right.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

    Target element

    Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit @@ -2548,7 +2548,7 @@ description: "

    Moves the element to the right side of its container. The following elements will wrap around it and fill the space remaining on the left.

    " - output:

    Lorem + output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

    Target element

    Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit @@ -2581,35 +2581,35 @@ try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'font-family: serif;' description: "

    The browser will use a serif font family: all characters have stroke endings.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'font-family: sans-serif;' description: "

    The browser will use a sans-serif font family: no character has stroke endings.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'font-family: monospace;' description: "

    The browser will use a monospace font family: all characters have the same width.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'font-family: cursive;' description: "

    The browser will use a cursive font family.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'font-family: fantasy;' description: "

    The browser will use a fantasy font family.

    " - output:
    Hello + output:
    Hello world
    The quick brown fox jumps over the lazy dog
    - title: font-size is_shorthand: false @@ -2634,19 +2634,19 @@ title: 'font-size: medium;' description: "

    The text will use the browser's default medium size.

    " - output:

    Hello + output:

    Hello world

    The quick brown fox jumps over the lazy dog

    - is_default: false title: 'font-size: 20px;' description: "

    You can use pixel values.

    " - output:

    Hello + output:

    Hello world

    The quick brown fox jumps over the lazy dog

    - is_default: false title: 'font-size: 1.2em;' description: "

    You can use em values.

    The value is relative to the parent's font-size.
    As a result, the value will cascade if used on child elements.

    " - output: '
    Parent + output: '
    Parent container: 18px
    Font-size: 1.2em = 21.6px
    Font-size: 1.2em = 25.92px
    Font-size: 1.2em = 31.104px
    @@ -2658,7 +2658,7 @@ which is the <html> element.
    As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

    " - output: '
    <html> root element: 18px
    Font-size: 1.2rem = 21.6px
    Font-size: 1.2rem = 21.6px
    Font-size: @@ -2669,7 +2669,7 @@ em values.

    The value is relative to the parent's font-size.
    As a result, the value will cascade if used on child elements.

    " - output: '
    Parent + output: '
    Parent container: 18px
    Font-size: 90% = 16.2
    Font-size: 90% = 14.58px
    Font-size: 90% = 13.122px
    @@ -2679,7 +2679,7 @@ description: "

    You can use relative keywords. The value is relative to the parent.

    The following are available:

    • larger
    • smaller
    " - output: '
    Parent container: 18px
    Font-size: smaller
    Font-size: smaller
    Font-size: smaller
    ' @@ -2688,7 +2688,7 @@ description: "

    You can use absolute keywords. The value is relative to the root element <html>.

    The following are available:

    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    " - output: '
    <html> root element: 18px
    Font-size: x-large
    Font-size: x-large
    Font-size: x-large
    @@ -2706,19 +2706,19 @@ - is_default: true title: 'font-style: normal;' description: "

    The text is not slanted.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-style: italic;' description: "

    Use the italic version of the font: the letters are slightly slanted.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-style: oblique;' description: "

    Use the oblique version of the font: the letters are more slanted than italic.

    " - output:
    Hello + output:
    Hello world
    - title: font-variant is_shorthand: false @@ -2732,12 +2732,12 @@ - is_default: true title: 'font-variant: normal;' description: "

    Each letter uses its normal glyph.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-variant: small-caps;' description: "

    Each letter uses its small capitalized version.

    " - output:
    Hello + output:
    Hello world
    - title: font-weight is_shorthand: false @@ -2753,12 +2753,12 @@ - is_default: true title: 'font-weight: normal;' description: "

    The text is in normal weight.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-weight: bold;' description: "

    The text becomes bold.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-weight: 600;' @@ -2769,13 +2769,13 @@ Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

    • If the font family doesn't provide the requested weight, it will use the closest available one.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'font-weight: lighter;' description: "

    You can use relative keywords: lighter or bolder. The browser will use the next available weight.

    " - output:
    Hello + output:
    Hello world
    - title: font is_shorthand: true @@ -2803,7 +2803,7 @@ title: 'height: auto;' description: "

    The element will automatically adjust its height to allow its content to be displayed correctly.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -2817,7 +2817,7 @@ How the container will handle this overflowing content is defined by the overflow property.

    - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -2841,28 +2841,28 @@ title: 'justify-content: flex-start;' description: "

    The flexbox items are pushed towards the start of the container's main axis.

    " - output:

    1. One

    2. Two

    3. Three

    - is_default: false title: 'justify-content: flex-end;' description: "

    The flexbox items are pushed towards the end of the container's main axis.

    " - output:

    1. One

    2. Two

    3. Three

    - is_default: false title: 'justify-content: center;' description: "

    The flexbox items are centered along the container's main axis.

    " - output:

    1. One

    2. Two

    3. Three

    - is_default: false title: 'justify-content: space-between;' description: "

    The remaining space is distributed between the flexbox items.

    " - output:

    1. One

    2. Two

    3. Three

    - is_default: false @@ -2870,7 +2870,7 @@ description: "

    The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

    " - output:

    1. One

    2. Two

    3. Three

    - title: left @@ -2893,21 +2893,21 @@ - is_default: true title: 'left: auto;' description: "

    The element will remain in its natural position.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - is_default: false title: 'left: 80px;' description: "

    If the element is in position relative, the element will move upwards by the amount defined by the left value.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - is_default: false title: 'left: -20px;' description: "

    If the element is in position absolute, the element will position itself from the left of the first positioned ancestor.

    " - output:

    Parent container

    Parent container

    Natural position
    Actual position
    - title: letter-spacing is_shorthand: false @@ -2921,18 +2921,18 @@ - is_default: true title: 'letter-spacing: normal;' description: "

    The spacing between the characters is normal.

    " - output:
    The + output:
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'letter-spacing: 2px;' description: "

    You can use pixel values.

    " - output:
    The + output:
    The quick brown fox jumps over the lazy dog
    - is_default: false title: 'letter-spacing: 0.1em;' description: "

    You can use em values: this allows the spacing to remain relative to the font-size.

    " - output:
    The + output:
    The quick brown fox jumps over the lazy dog
    - title: line-height is_shorthand: false @@ -2950,7 +2950,7 @@ - is_default: true title: 'line-height: normal;' description: "

    Reverts to the default value of the browser.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, @@ -2959,7 +2959,7 @@ title: 'line-height: 1.6;' description: "

    You can use unitless values: the line height will be relative to the font size.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -2967,7 +2967,7 @@ - is_default: false title: 'line-height: 30px;' description: "

    You can use pixel values.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, @@ -2976,7 +2976,7 @@ title: 'line-height: 0.8em;' description: "

    You can use em values: like with unitless values, the line height will be relative to the font size.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, @@ -2998,12 +2998,12 @@ description:

    The list items will use the bullet point defined by the list-style-type value, which by default is a disc.

    - output:
    • One
    • Two
    • Three
    + output:
    • One
    • Two
    • Three
    - is_default: false title: 'list-style-image: url(/images/list-style-image.png);' description: "

    The list items will use the image located at the specified URL as their bullet point.
    The image can not be resized.

    " - output:
    • One
    • Two
    • Three
    + output:
    • One
    • Two
    • Three
    - title: list-style-position is_shorthand: false description: "

    Defines the position of a list's bullet points.

    " @@ -3022,7 +3022,7 @@ description: "

    The bullet point will be outside the list item, as if it wasn't part of the list item.

    The start of each line of a list item will be aligned vertically.

    " - output:
    " - output:
    First item
    Target
    Third item
    - is_default: false title: 'margin-top: 10%;' description: "

    You can use percentage values.
    The percentage is based on the width of the container.

    " - output:
    First item
    Target
    Third item
    - title: margin @@ -3366,7 +3366,7 @@ - is_default: true title: 'margin: 0;' description: "

    Removes all margins.

    " - output:
    First item
    Target
    When using 1 value, the margin is set for all 4 sides.

    " - output:
    First item
    Target
    " - output:
    First item
    Target
    haven't defined.

    If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

    " - output:
    First item
    Target
    bottom
  • the fourth value is for left

    • To remember the order, start at the top and go clockwise.

    " - output:
    First item
    Target
    The element has no limit in terms of height.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3445,7 +3445,7 @@ (r)em, percentages...

    If the maximum height is larger than the element's actual height, the max height has no effect.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, @@ -3457,7 +3457,7 @@ overflow. How the container will handle this overflowing content is defined by the overflow property.

    - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3473,7 +3473,7 @@ - is_default: true title: 'max-width: none;' description: "

    The element has no limit in terms of width.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3485,7 +3485,7 @@ (r)em, percentages...

    If the maximum width is larger than the element's actual width, the max width has no effect.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3496,7 +3496,7 @@ description: "

    If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3514,7 +3514,7 @@ - is_default: true title: 'min-height: 0;' description: "

    The element has no minimum height.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3526,7 +3526,7 @@ (r)em, percentages...

    If the minimum height is larger than the element's actual height, the min height will be applied.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3536,7 +3536,7 @@ title: 'min-height: 5px;' description: "

    If the minimum height is smaller than the element's actual height, the min height has no effect.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla @@ -3554,7 +3554,7 @@ - is_default: true title: 'min-width: 0;' description: "

    The element has no minimum width.

    " - output:

    Hello world

    - is_default: false title: 'min-width: 300px;' @@ -3562,13 +3562,13 @@ (r)em, percentages...

    If the minimum width is larger than the element's actual width, the min width will be applied.

    " - output:

    Hello world

    - is_default: false title: 'min-width: 5px;' description: "

    If the minimum width is smaller than the element's actual width, the min width has no effect.

    " - output:

    Hello world

    - title: mix-blend-mode is_shorthand: false @@ -3596,97 +3596,97 @@ - is_default: true title: 'mix-blend-mode: normal;' description: "

    The element does not blend.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: multiply;' description: "

    The element uses the multiply blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: screen;' description: "

    The element uses the screen blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: overlay;' description: "

    The element uses the overlay blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: darken;' description: "

    The element uses the darken blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: lighten;' description: "

    The element uses the lighten blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: color-dodge;' description: "

    The element uses the color-dodge blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: color-burn;' description: "

    The element uses the color-burn blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: hard-light;' description: "

    The element uses the hard-light blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: soft-light;' description: "

    The element uses the soft-light blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: difference;' description: "

    The element uses the difference blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: exclusion;' description: "

    The element uses the exclusion blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: hue;' description: "

    The element uses the hue blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: saturation;' description: "

    The element uses the saturation blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: color;' description: "

    The element uses the color blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - is_default: false title: 'mix-blend-mode: luminosity;' description: "

    The element uses the luminosity blend mode.

    " - output:

    Hello world

    Hello world

    Hello world

    - title: opacity @@ -3701,18 +3701,18 @@ - is_default: true title: 'opacity: 1;' description: "

    The element is fully opaque.

    " - output:

    Hello world

    - is_default: false title: 'opacity: 0;' description: "

    The element is fully transparent.

    " - output:

    Hello world

    - is_default: false title: 'opacity: 0.3;' description: "

    Any value between 0 (zero) and 1 (one) will make the element semi transparent.

    " - output:

    Hello world

    - title: order is_shorthand: false @@ -3731,7 +3731,7 @@ title: 'order: 0;' description: "

    The order of the flexbox items is the one defined in the HTML code.

    " - output: '

    One
    order: + output: '

    One
    order: 0

    Two
    order: 0

    Target
    order: 0

    Four
    order: 0

    ' @@ -3740,14 +3740,14 @@ description: "

    The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

    " - output: '

    One
    order: + output: '

    One
    order: 0

    Two
    order: 0

    Target
    order: 1

    Four
    order: 0

    ' - is_default: false title: 'order: -1;' description: "

    You can use negative values.

    " - output: '

    One
    order: 0

    Two
    order: 0

    Target
    order: -1

    Four
    order: 0

    ' @@ -3755,7 +3755,7 @@ title: 'order: 9;' description: "

    You can set a different value for each flexbox item.

    " - output: '

    One
    order: + output: '

    One
    order: 13

    Two
    order: -7

    Target
    order: 9

    Four
    order: 5

    ' @@ -3778,18 +3778,18 @@ description: "

    Applies a transparent color to the outlines. The outlines will still take up the space defined by the outline-width value.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: red;' description:

    You can use one of the 140+ color names.

    - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: #05ffb0;' description: "

    You can use hexadecimal color codes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: rgb(50, 115, 220);' @@ -3797,7 +3797,7 @@ first value is for red
  • the second value is for green
  • the third value is for blue

    • Each of them can have a value between 0 and 255.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: rgba(50, 115, 220, 0.3);' @@ -3805,7 +3805,7 @@ first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: hsl(14, 100%, 53%);' @@ -3814,7 +3814,7 @@ second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%
    • " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-color: hsla(14, 100%, 53%, 0.6);' @@ -3822,7 +3822,7 @@ first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

    • The alpha value can go from zero 0 (transparent) to one 1 (opaque).

    " - output:
    Hello + output:
    Hello world
    - title: outline-style is_shorthand: false @@ -3840,32 +3840,32 @@ - is_default: true title: 'outline-style: none;' description: "

    Removes the element's outlines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-style: dotted;' description: "

    Turns the outline into a sequence of dots.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-style: dashed;' description: "

    Turns the outline into a sequence of dashes.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-style: solid;' description: "

    Turns the outline into a solid line.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-style: double;' description: "

    Splits the outline into two lines.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-style: groove;' description: "

    Sets an inset style to the outlines.

    " - output:
    Hello + output:
    Hello world
    - title: outline-width is_shorthand: false @@ -3879,12 +3879,12 @@ - is_default: true title: 'outline-width: medium;' description: "

    Defines the width of all outlines to medium.

    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline-width: 1px;' description: "

    Defines the width of all outlines to 1px.

    " - output:
    Hello + output:
    Hello world
    - title: outline is_shorthand: true @@ -3901,13 +3901,13 @@ - is_default: false title: 'outline: 4px dotted red;' description: "

    The order is important:

    • width
    • style
    • color
    " - output:
    Hello + output:
    Hello world
    - is_default: false title: 'outline: 2px solid;' description: "

    Only the color is optional. If you omit it, the color applied will be the color of the text.

    " - output:
    Hello + output:
    Hello world
    - title: overflow-wrap is_shorthand: false @@ -3943,25 +3943,25 @@ title: 'overflow-x: visible;' description: "

    The overflowing content is visible, while the element itself stays at the specified width.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - is_default: false title: 'overflow-x: hidden;' description: "

    The overflowing content is hidden and can not be accessed.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - is_default: false title: 'overflow-x: scroll;' description: "

    The overflowing content is accessible thanks to a horizontal scrollbar.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - is_default: false title: 'overflow-x: auto;' description: "

    The browser decides whether to display a horizontal scrollbar or not.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    - title: overflow-y is_shorthand: false @@ -3978,7 +3978,7 @@ title: 'overflow-y: visible;' description: "

    The overflowing content is visible, while the element itself stays at the specified height.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    @@ -3986,7 +3986,7 @@ title: 'overflow-y: hidden;' description: "

    The overflowing content is hidden and can not be accessed.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    @@ -3994,7 +3994,7 @@ title: 'overflow-y: scroll;' description: "

    The overflowing content is accessible thanks to a vertical scrollbar.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    @@ -4002,7 +4002,7 @@ title: 'overflow-y: auto;' description: "

    The browser decides whether to display a vertical scrollbar or not.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

    @@ -4024,7 +4024,7 @@ title: 'overflow: visible;' description: "

    The overflowing content is visible, while the element itself stays at the specified height.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas @@ -4035,7 +4035,7 @@ title: 'overflow: hidden;' description: "

    The overflowing content is hidden and can not be accessed.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas @@ -4046,7 +4046,7 @@ title: 'overflow: scroll;' description: "

    The overflowing content is accessible thanks to a vertical scrollbar.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas @@ -4057,7 +4057,7 @@ title: 'overflow: auto;' description: "

    The browser decides whether to display a vertical scrollbar or not.

    " - output:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.Maecenas @@ -4087,14 +4087,14 @@ - is_default: true title: 'padding-bottom: 0;' description: "

    Removes any padding on the bottom.

    " - output:
    First item
    Target
    Third item
    - is_default: false title: 'padding-bottom: 50px;' description: "

    You can use pixel values.

    " - output:
    First item
    Target
    Third item
    @@ -4105,7 +4105,7 @@ relative to the element's current font size
  • rem: relative to <html> the root element's font size
    • " - output:
    First item
    Target
    Third item
    @@ -4113,7 +4113,7 @@ title: 'padding-bottom: 30%;' description: "

    You can use percentage values.
    The percentage is based on the width of the element.

    " - output:
    First item
    Target
    Third item
    @@ -4139,14 +4139,14 @@ - is_default: true title: 'padding-left: 0;' description: "

    Removes any padding on the left.

    " - output:
    First item
    Target
    Third item
    - is_default: false title: 'padding-left: 50px;' description: "

    You can use pixel values.

    " - output:
    First item
    Target
    Third item
    @@ -4157,7 +4157,7 @@ relative to the element's current font size
  • rem: relative to <html> the root element's font size
    • " - output:
    First item
    Target
    Third item
    @@ -4165,7 +4165,7 @@ title: 'padding-left: 30%;' description: "

    You can use percentage values.
    The percentage is based on the width of the element.

    " - output:
    First item
    Target
    Third item
    @@ -4191,14 +4191,14 @@ - is_default: true title: 'padding-right: 0;' description: "

    Removes any padding on the right.

    " - output:
    First item
    Target
    Third item
    - is_default: false title: 'padding-right: 50px;' description: "

    You can use pixel values.

    " - output:
    First item
    Target
    Third item
    @@ -4209,7 +4209,7 @@ relative to the element's current font size
  • rem: relative to <html> the root element's font size
    • " - output:
    First item
    Target
    Third item
    @@ -4217,7 +4217,7 @@ title: 'padding-right: 30%;' description: "

    You can use percentage values.
    The percentage is based on the width of the element.

    " - output:
    First item
    Target
    Third item
    @@ -4244,13 +4244,13 @@ - is_default: true title: 'padding-top: 0;' description: "

    Removes any padding on the top.

    " - output:
    First item
    Target
    Third item
    - is_default: false title: 'padding-top: 50px;' description: "

    You can use pixel values.

    " - output:
    First item
    Target
    Third item
    @@ -4261,7 +4261,7 @@ relative to the element's current font size
  • rem: relative to <html> the root element's font size
    • " - output:
    First item
    Target
    Third item
    @@ -4269,7 +4269,7 @@ title: 'padding-top: 30%;' description: "

    You can use percentage values.
    The percentage is based on the width of the element.

    " - output:
    First item
    Target
    Third item
    @@ -4315,7 +4315,7 @@ - is_default: true title: 'padding: 0;' description: "

    Removes all paddings.

    " - output:
    Target
    @@ -4323,7 +4323,7 @@ title: 'padding: 30px;' description: "

    When using 1 value, the padding is set for all 4 sides.

    " - output:
    Target
    @@ -4337,7 +4337,7 @@ left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

    " - output:
    Target
    @@ -4350,7 +4350,7 @@ think about the values you haven't defined.

    If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

    " - output:
    Target
    @@ -4362,7 +4362,7 @@ bottom
  • the fourth value is for left

    • To remember the order, start at the top and go clockwise.

    " - output:
    Target
    @@ -4383,7 +4383,7 @@ title: 'pointer-events: auto;' description: "

    The element reacts to pointer events, like :hover or click.

    " - output:

    Hover me

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
    @@ -4392,7 +4392,7 @@ description: "

    The element does not react to pointer events, like :hover or click. As a result, elements that are behind are accessible.

    " - output:

    Hover me

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
    @@ -4418,7 +4418,7 @@ of the page.

    As a result, it will not act as anchor point for the absolutely positioned yellow block.

    Also, it will not react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    " - output: '

    Ancestor + output: '

    Ancestor container

    Target element
    position: static
    Child element
    position: absolute
    right: 5px
    top: 5px
    ' @@ -4428,7 +4428,7 @@ of the page.

    It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    " - output: '

    Ancestor + output: '

    Ancestor container

    Target element
    position: relative
    Child element
    position: absolute
    right: 5px
    top: 5px
    ' @@ -4439,7 +4439,7 @@ ancestor.

    Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    " - output: '

    Ancestor + output: '

    Ancestor container

    Target element
    position: absolute
    left: 0
    top: 0
    Child element
    right: 5px
    top: 5px
    ' @@ -4450,7 +4450,7 @@

    Because it's positioned, it will act as an anchor point for the absolutely positioned yellow block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    " - output: '

    Ancestor + output: '

    Ancestor container

    Target element
    position: fixed
    right: 0
    top: 0
    Child element
    position: absolute
    right: 5px
    top: 5px
    ' @@ -4476,7 +4476,7 @@ - is_default: true title: 'resize: none;' description: "

    The textarea is not resizable.

    " - output: