diff --git a/README.md b/README.md index 50b2d1c4..2c862e98 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,11 @@ -# [CSS Reference](http://cssreference.io): a free visual guide to the most popular CSS properties +# [CSS Reference](https://cssreference.io): a free visual guide to the most popular CSS properties -[![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](http://cssreference.io) +[![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](https://cssreference.io) # License -The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/). +The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/). -The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php). \ No newline at end of file +The underlying source code used to format and display that content is licensed under the [MIT license](https://opensource.org/licenses/mit-license.php). + +

Browser testing via

diff --git a/_config.local.yml b/_config.local.yml index fc734fb5..3c0eae32 100644 --- a/_config.local.yml +++ b/_config.local.yml @@ -1,5 +1,6 @@ title: CSS Reference -description: A free visual guide to the most popular CSS properties. +subtitle: "A free visual guide to CSS" +description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples." share: "CSS Reference: a free visual guide to the most popular CSS properties." url: http://localhost:4000 markdown: kramdown diff --git a/_config.yml b/_config.yml index 485ea339..34118546 100644 --- a/_config.yml +++ b/_config.yml @@ -1,7 +1,8 @@ title: CSS Reference -description: A free visual guide to the most popular CSS properties. +subtitle: "A free visual guide to CSS" +description: "CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples." share: "CSS Reference: a free visual guide to the most popular CSS properties." -url: http://cssreference.io +url: https://cssreference.io markdown: kramdown permalink: pretty exclude: ['node_modules'] diff --git a/_includes/bsa.html b/_includes/bsa.html new file mode 100644 index 00000000..a46af284 --- /dev/null +++ b/_includes/bsa.html @@ -0,0 +1,11 @@ + +
+ diff --git a/_includes/carbon.html b/_includes/carbon.html new file mode 100644 index 00000000..5e304010 --- /dev/null +++ b/_includes/carbon.html @@ -0,0 +1,46 @@ + + +
+
+

CSS Reference is free and always will be!

+

Please whitelist us in your ad blocker.

+

Thank you! Hugging face emoji

+
+ +
+
+
+
+
+ +
+ +
+
diff --git a/_includes/collections/animations-list.html b/_includes/collections/animations-list.html new file mode 100644 index 00000000..dab5e5f4 --- /dev/null +++ b/_includes/collections/animations-list.html @@ -0,0 +1 @@ +
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation
    • \ No newline at end of file diff --git a/_includes/collections/animations.html b/_includes/collections/animations.html new file mode 100644 index 00000000..de1345be --- /dev/null +++ b/_includes/collections/animations.html @@ -0,0 +1,24 @@ +

    #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.

    \ No newline at end of file diff --git a/_includes/collections/backgrounds-list.html b/_includes/collections/backgrounds-list.html new file mode 100644 index 00000000..080123dd --- /dev/null +++ b/_includes/collections/backgrounds-list.html @@ -0,0 +1 @@ +
  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background
    • \ No newline at end of file diff --git a/_includes/collections/backgrounds.html b/_includes/collections/backgrounds.html new file mode 100644 index 00000000..76dc8ed3 --- /dev/null +++ b/_includes/collections/backgrounds.html @@ -0,0 +1 @@ +

    #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.

    \ No newline at end of file diff --git a/_includes/collections/box-model-list.html b/_includes/collections/box-model-list.html new file mode 100644 index 00000000..4aa84ce0 --- /dev/null +++ b/_includes/collections/box-model-list.html @@ -0,0 +1 @@ +
  • border-bottom-width
  • border-left-width
  • border-right-width
  • border-top-width
  • border-width
  • box-sizing
  • height
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • padding
  • width
    • \ No newline at end of file diff --git a/_includes/collections/box-model.html b/_includes/collections/box-model.html new file mode 100644 index 00000000..a0897500 --- /dev/null +++ b/_includes/collections/box-model.html @@ -0,0 +1 @@ +

    #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-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-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-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-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.

    #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 - 60px - 24px = 116px.

    #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.

    #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.

    #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.

    #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.

    #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.

    \ No newline at end of file diff --git a/_includes/collections/css-grid-list.html b/_includes/collections/css-grid-list.html new file mode 100644 index 00000000..c411ab2b --- /dev/null +++ b/_includes/collections/css-grid-list.html @@ -0,0 +1 @@ +
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-column
  • grid-gap
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-row
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • grid-template
  • grid
    • \ No newline at end of file diff --git a/_includes/collections/css-grid.html b/_includes/collections/css-grid.html new file mode 100644 index 00000000..485f0499 --- /dev/null +++ b/_includes/collections/css-grid.html @@ -0,0 +1 @@ +

    #grid-area

    Shorthand property for grid-row-start grid-column-start grid-row-end and grid-column-end.

    default grid-area: auto;

    The grid item's column and row starts and ends are automatically set.

    grid-area: main;

    You can use an area name.

    #grid-auto-columns

    Defines the size of grid columns that were created implicitly: it means that grid-auto-columns targets the columns that were not defined with grid-template-columns or grid-template-areas.

    default grid-auto-columns: auto;

    The implicity-created columns have an auto size.

    grid-auto-columns: 100px;

    Here we combine grid-template-areas: "header header header" "sidebar main main" with grid-template-columns: 50px 200px.

    In this situation, the grid-template-areas defines 3 columns, while the grid-template-columns only defines 2 column widths.

    As a result, the third column width takes its value from the grid-auto-columns property: 100px.

    #grid-auto-flow

    Defines the position of auto-generated grid items.

    default grid-auto-flow: row;

    Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it on its own row.

    grid-auto-flow: column;

    Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it in its own column.

    #grid-auto-rows

    Defines the size of grid rows that were created implicitly: it means that grid-auto-rows targets the rows that were not defined with grid-template-rows or grid-template-areas.

    default grid-auto-rows: auto;

    The implicity-created rows have an auto size.

    grid-auto-rows: 100px;

    Here we combine grid-template-areas: "header header header" "sidebar main main" "footer footer footer" with grid-template-rows: 50px 200px.

    In this situation, the grid-template-areas defines 3 rows, while the grid-template-rows only defines 2 row heights.

    As a result, the third row height (the footer) takes its value from the grid-auto-rows property: 100px.

    #grid-column-end

    Defines the column end position of a grid item.

    default grid-column-end: auto;

    In this 3-column setup, the grid item is automatically placed.

    grid-column-end: 2;

    The target grid item ends just before the second column.

    grid-column-end: 1;

    The target grid item ends just before the first column, which automatically creates a fourth column.

    #grid-column-gap

    Defines the gutter between the columns of a grid container.

    default grid-column-gap: 0;

    Removes the gap.

    grid-column-gap: 10px;

    You can use pixel values.

    grid-column-gap: 3rem;

    You can use (r)em values.

    grid-column-gap: 20%;

    You can use percentage values.

    #grid-column-start

    Defines the column start position of a grid item.

    default grid-column-start: auto;

    In this 3-column setup, the grid item is automatically placed.

    grid-column-start: 2;

    The target grid item is placed on the second column.

    grid-column-start: 4;

    The target grid item is placed outside the grid, in an auto-generated fourth column.

    #grid-column

    Shorthand property for grid-column-start and grid-column-end.

    default grid-column: auto auto;

    The grid item's column start and end are automatically set.

    grid-column: 1 / 3;

    The grid item starts before the first column and ends just before the third one.

    grid-column: span 3;

    The grid item spans 3 columns.

    grid-column: 1 / span 4;

    The grid items starts before the first column and spans for 4 columns, creating a new one in the process.

    grid-column: main;

    You can use an area name to "copy" its column start and end positions.

    #grid-gap

    Shorthand property for grid-row-gap and grid-column-gap.

    default grid-gap: 0 0;

    Removes both rows and columns gaps.

    grid-gap: 10px;

    You can set a single value.

    grid-gap: 3rem 1rem;

    You can set a value for each direction: rows first, columns second.

    #grid-row-end

    Defines the row end position of a grid item.

    default grid-row-end: auto;

    In this 3-column setup, the grid item is automatically placed.

    grid-row-end: 3;

    The target grid item ends just before the third row.

    grid-row-end: 4;

    The target grid item ends just before the fourth row, which automatically creates a third row.

    #grid-row-gap

    Defines the gutter between the rows of a grid container.

    default grid-row-gap: 0;

    Removes the gap.

    grid-row-gap: 10px;

    You can use pixel values.

    grid-row-gap: 3rem;

    You can use (r)em values.

    #grid-row-start

    Defines the row start position of a grid item.

    default grid-row-start: auto;

    In this 3-column setup, the grid item is automatically placed on the first row.

    grid-row-start: 2;

    The target grid item is placed on the second row.

    grid-row-start: 3;

    The target grid item is placed outside the grid, in an auto-generated third row.

    #grid-row

    Shorthand property for grid-row-start and grid-row-end.

    default grid-row: auto auto;

    The grid item's row start and end are automatically set.

    grid-row: 1 / 3;

    The grid item starts before the first row and ends just before the third one.

    grid-row: span 3;

    The grid item spans 3 rows.

    grid-row: 1 / span 4;

    The grid items starts before the first row and spans for 4 rows, creating a new one in the process.

    grid-row: header;

    You can use an area name to "copy" its row start and end positions.

    #grid-template-areas

    Defines areas within a grid container. These areas can then be referenced when placing a grid item.

    default grid-template-areas: none;

    No area is defined.

    grid-template-areas: "header header header" "sidebar main main";

    You can use area names to specify which cells each grid item should occupy.

    #grid-template-columns

    Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

    default grid-template-columns: none;

    No columns are defined, so you only have one.

    grid-template-columns: auto auto auto;

    You can use the keyword auto so that each column resizes itself automatically.

    grid-template-columns: 80px auto 1rem;

    You can mix the units.

    grid-template-columns: 40px 1fr 2fr;

    You can use the fr flex unit to distribute the remaining space across all flex columns.

    #grid-template-rows

    Defines the rows of a grid container. You can specify the width of a row by using a keyword (like auto) or a length (like 10px). The number of rows is determined by the number of values defined in the space-separated list.

    default grid-template-rows: none;

    No rows are defined.

    grid-template-rows: 120px auto 3rem;

    You can mix the units.

    grid-template-rows: 20px 1fr 2fr;

    You can use the fr flex unit to distribute the remaining space across all flex rows.

    #grid-template

    Shorthand property for grid-template-rows grid-template-columns and grid-template-area.

    default grid-template: none;

    No rows, columns, or areas are defined.

    grid-template: 200px 1fr / 100px auto 3rem;

    You can define rows first, columns second, by splitting them with a slash /.

    grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;

    You can define both areas and rows and columns dimensions. In this case, each set of areas have a row size attached to it. The first row is 50px high, the second one is 200px high. The sidebar column is 100px wide, while the main column's width is set to auto and takes up the remaining width.

    #grid

    Shorthand property for grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns and grid-auto-flow.

    grid: "header header header" 50px "sidebar main main" 200px / 100px auto;

    You can use it as grid-template by setting all explicit rows, columns, and areas.

    grid: 200px 100px / auto-flow 30%;

    You can combine grid-template-rows with grid-auto-columns.

    grid: auto-flow 50px / 200px 100px;

    You can combine grid-auto-rows with grid-template-columns.

    \ No newline at end of file diff --git a/_includes/collections/flexbox-list.html b/_includes/collections/flexbox-list.html new file mode 100644 index 00000000..dcca2e8b --- /dev/null +++ b/_includes/collections/flexbox-list.html @@ -0,0 +1 @@ +
  • align-content
  • align-items
  • align-self
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • justify-content
  • order
    • \ No newline at end of file diff --git a/_includes/collections/flexbox.html b/_includes/collections/flexbox.html new file mode 100644 index 00000000..96cbb7c9 --- /dev/null +++ b/_includes/collections/flexbox.html @@ -0,0 +1 @@ +

    #align-content

    Defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid 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.

    • The first line is 100px high
    • The second line is 50px high
    • The remaing space is 150px

    This remaining space is distributed equally amongst the two lines:

    • The first line is now 175px high
    • The second line is now 125px high

    align-content: flex-start;

    Each line will only fill the space it needs. They will all move towards the start of the flexbox/grid 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/grid 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/grid 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.

    default align-self: auto;

    The target will use the value of align-items.

    align-self: flex-start;

    If the container has align-items: center and the target has align-self: 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-self: 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-self: 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-self: 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-self: stretch, only the target will stretch along the whole cross axis.

    #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-wrap.

    #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.

    #justify-content

    Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

    default justify-content: flex-start;

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

    justify-content: flex-end;

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

    justify-content: center;

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

    justify-content: space-between;

    The remaining space is distributed between the flexbox/grid items.

    justify-content: space-around;

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

    #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.

    \ No newline at end of file diff --git a/_includes/collections/positioning-list.html b/_includes/collections/positioning-list.html new file mode 100644 index 00000000..c0f95f81 --- /dev/null +++ b/_includes/collections/positioning-list.html @@ -0,0 +1 @@ +
  • bottom
  • left
  • position
  • right
  • top
  • z-index
    • \ No newline at end of file diff --git a/_includes/collections/positioning.html b/_includes/collections/positioning.html new file mode 100644 index 00000000..469c5102 --- /dev/null +++ b/_includes/collections/positioning.html @@ -0,0 +1 @@ +

    #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.

    #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 left 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.

    #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 pink 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 pink 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 pink 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 pink block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index

    #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 downwards 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.

    #z-index

    Defines the order of the elements on the z-axis. 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.

    \ No newline at end of file diff --git a/_includes/collections/transitions-list.html b/_includes/collections/transitions-list.html new file mode 100644 index 00000000..c91ee087 --- /dev/null +++ b/_includes/collections/transitions-list.html @@ -0,0 +1 @@ +
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • transition
    • \ No newline at end of file diff --git a/_includes/collections/transitions.html b/_includes/collections/transitions.html new file mode 100644 index 00000000..2960d7e2 --- /dev/null +++ b/_includes/collections/transitions.html @@ -0,0 +1 @@ +

    #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.

    \ No newline at end of file diff --git a/_includes/collections/typography-list.html b/_includes/collections/typography-list.html new file mode 100644 index 00000000..9a406e69 --- /dev/null +++ b/_includes/collections/typography-list.html @@ -0,0 +1 @@ +
  • color
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • white-space
  • word-break
  • word-spacing
    • \ No newline at end of file diff --git a/_includes/collections/typography.html b/_includes/collections/typography.html new file mode 100644 index 00000000..9fef860b --- /dev/null +++ b/_includes/collections/typography.html @@ -0,0 +1 @@ +

    #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).

    #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.

    #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.

    #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.

    #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

    #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.

    word-spacing: 2em;

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

    \ No newline at end of file diff --git a/_includes/components/finder.html b/_includes/components/finder.html new file mode 100644 index 00000000..ea79315f --- /dev/null +++ b/_includes/components/finder.html @@ -0,0 +1,133 @@ +
    +
    + + +
    +
    + {% include lists/finder-list.html %} +
    +
    + + diff --git a/_includes/favicons.html b/_includes/favicons.html index 2332a7f5..ef7d4ca6 100644 --- a/_includes/favicons.html +++ b/_includes/favicons.html @@ -1,8 +1,9 @@ - - - - - - - - \ No newline at end of file + + + + + + + + + diff --git a/_includes/ff.html b/_includes/ff.html new file mode 100644 index 00000000..bce38953 --- /dev/null +++ b/_includes/ff.html @@ -0,0 +1,9 @@ + +
    +

    + New! My 44-page ebook "CSS in 44 minutes" is out! 😃 +

    + + Get it now → + +     diff --git a/_includes/google-fonts.html b/_includes/google-fonts.html index 2e0fc5b3..7227cf8c 100644 --- a/_includes/google-fonts.html +++ b/_includes/google-fonts.html @@ -1,14 +1,9 @@ \ No newline at end of file + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-82634666-3', 'auto'); + ga('send', 'pageview'); + diff --git a/_includes/lists/finder-list.html b/_includes/lists/finder-list.html new file mode 100644 index 00000000..d760d9dc --- /dev/null +++ b/_includes/lists/finder-list.html @@ -0,0 +1 @@ +
    align-content
    flexbox
    align-items
    flexbox
    align-self
    flexbox
    animation-delay
    animations
    animation-direction
    animations
    animation-duration
    animations
    animation-fill-mode
    animations
    animation-iteration-count
    animations
    animation-name
    animations
    animation-play-state
    animations
    animation-timing-function
    animations
    animation
    animations
    background-attachment
    backgrounds
    background-clip
    backgrounds
    background-color
    backgrounds
    background-image
    backgrounds
    background-origin
    backgrounds
    background-position
    backgrounds
    background-repeat
    backgrounds
    background-size
    backgrounds
    background
    backgrounds
    border-bottom-color
    border-bottom-left-radius
    border-bottom-right-radius
    border-bottom-style
    border-bottom-width
    box-model
    border-bottom
    border-collapse
    border-color
    border-left-color
    border-left-style
    border-left-width
    box-model
    border-left
    border-radius
    border-right-color
    border-right-style
    border-right-width
    box-model
    border-right
    border-style
    border-top-color
    border-top-left-radius
    border-top-right-radius
    border-top-style
    border-top-width
    box-model
    border-top
    border-width
    box-model
    border
    bottom
    positioning
    box-shadow
    box-sizing
    box-model
    clear
    color
    typography
    column-count
    column-gap
    column-width
    content
    cursor
    display
    flex-basis
    flexbox
    flex-direction
    flexbox
    flex-flow
    flexbox
    flex-grow
    flexbox
    flex-shrink
    flexbox
    flex-wrap
    flexbox
    float
    font-family
    typography
    font-size
    typography
    font-style
    typography
    font-variant
    typography
    font-weight
    typography
    font
    typography
    grid-area
    css-grid
    grid-auto-columns
    css-grid
    grid-auto-flow
    css-grid
    grid-auto-rows
    css-grid
    grid-column-end
    css-grid
    grid-column-gap
    css-grid
    grid-column-start
    css-grid
    grid-column
    css-grid
    grid-gap
    css-grid
    grid-row-end
    css-grid
    grid-row-gap
    css-grid
    grid-row-start
    css-grid
    grid-row
    css-grid
    grid-template-areas
    css-grid
    grid-template-columns
    css-grid
    grid-template-rows
    css-grid
    grid-template
    css-grid
    grid
    css-grid
    height
    box-model
    justify-content
    flexbox
    left
    positioning
    letter-spacing
    typography
    line-height
    box-model typography
    list-style-image
    list-style-position
    list-style-type
    list-style
    margin-bottom
    box-model
    margin-left
    box-model
    margin-right
    box-model
    margin-top
    box-model
    margin
    box-model
    max-height
    box-model
    max-width
    box-model
    min-height
    box-model
    min-width
    box-model
    mix-blend-mode
    opacity
    order
    flexbox
    outline-color
    outline-style
    outline-width
    outline
    overflow-wrap
    overflow-x
    overflow-y
    overflow
    padding-bottom
    box-model
    padding-left
    box-model
    padding-right
    box-model
    padding-top
    box-model
    padding
    box-model
    pointer-events
    position
    positioning
    resize
    right
    positioning
    text-align
    typography
    text-decoration
    typography
    text-indent
    typography
    text-overflow
    typography
    text-shadow
    typography
    text-transform
    typography
    top
    positioning
    transform-origin
    transform
    transition-delay
    transitions
    transition-duration
    transitions
    transition-property
    transitions
    transition-timing-function
    transitions
    transition
    transitions
    vertical-align
    white-space
    typography
    width
    box-model
    will-change
    word-break
    typography
    word-spacing
    typography
    z-index
    positioning
    \ No newline at end of file diff --git a/_includes/lists/main-list.html b/_includes/lists/main-list.html index c08d28ac..d3b15f7f 100644 --- a/_includes/lists/main-list.html +++ b/_includes/lists/main-list.html @@ -1,14108 +1,1417 @@ -
    -
    - -

    - #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.

    - -
    -
    - - - -
    -
    -
    -

    - - - 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.

    - -
    -
    - - - -
    -
    -
    -

    - - - 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).

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

    - 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.

    - -
    -
    - - - -
    - -
    +
    + + align-content + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + align-items + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + align-self + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + animation-delay + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-direction + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-duration + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-fill-mode + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-iteration-count + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-name + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-play-state + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation-timing-function + +

    + + In collection: + + animations + + +

    +
    + +
    + + animation + +

    + + In collection: + + animations + + +

    +
    + +
    + + background-attachment + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-clip + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-color + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-image + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-origin + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-position + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-repeat + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background-size + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + background + +

    + + In collection: + + backgrounds + + +

    +
    + +
    + + border-bottom-color + +
    + +
    + + border-bottom-left-radius + +
    + +
    + + border-bottom-right-radius + +
    + +
    + + border-bottom-style + +
    + +
    + + border-bottom-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + border-bottom + +
    + +
    + + border-collapse + +
    + +
    + + border-color + +
    + +
    + + border-left-color + +
    + +
    + + border-left-style + +
    + +
    + + border-left-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + border-left + +
    + +
    + + border-radius + +
    + +
    + + border-right-color + +
    + +
    + + border-right-style + +
    + +
    + + border-right-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + border-right + +
    + +
    + + border-style + +
    + +
    + + border-top-color + +
    + +
    + + border-top-left-radius + +
    + +
    + + border-top-right-radius + +
    + +
    + + border-top-style + +
    + +
    + + border-top-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + border-top + +
    + +
    + + border-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + border + +
    + +
    + + bottom + +

    + + In collection: + + positioning + + +

    +
    + +
    + + box-shadow + +
    + +
    + + box-sizing + +

    + + In collection: + + box-model + + +

    +
    + +
    + + clear + +
    + +
    + + color + +

    + + In collection: + + typography + + +

    +
    + +
    + + column-count + +
    + +
    + + column-gap + +
    + +
    + + column-width + +
    + +
    + + content + +
    + +
    + + cursor + +
    + +
    + + display + +
    + +
    + + flex-basis + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + flex-direction + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + flex-flow + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + flex-grow + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + flex-shrink + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + flex-wrap + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + float + +
    + +
    + + font-family + +

    + + In collection: + + typography + + +

    +
    + +
    + + font-size + +

    + + In collection: + + typography + + +

    +
    + +
    + + font-style + +

    + + In collection: + + typography + + +

    +
    + +
    + + font-variant + +

    + + In collection: + + typography + + +

    +
    + +
    + + font-weight + +

    + + In collection: + + typography + + +

    +
    + +
    + + font + +

    + + In collection: + + typography + + +

    +
    + +
    + + height + +

    + + In collection: + + box-model + + +

    +
    + +
    + + justify-content + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + left + +

    + + In collection: + + positioning + + +

    +
    + +
    + + letter-spacing + +

    + + In collection: + + typography + + +

    +
    + +
    + + line-height + +

    + + In collections: + + box-model + + + typography + + +

    +
    + +
    + + list-style-image + +
    + +
    + + list-style-position + +
    + +
    + + list-style-type + +
    + +
    + + list-style + +
    + +
    + + margin-bottom + +

    + + In collection: + + box-model + + +

    +
    + +
    + + margin-left + +

    + + In collection: + + box-model + + +

    +
    + +
    + + margin-right + +

    + + In collection: + + box-model + + +

    +
    + +
    + + margin-top + +

    + + In collection: + + box-model + + +

    +
    + +
    + + margin + +

    + + In collection: + + box-model + + +

    +
    + +
    + + max-height + +

    + + In collection: + + box-model + + +

    +
    + +
    + + max-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + min-height + +

    + + In collection: + + box-model + + +

    +
    + +
    + + min-width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + mix-blend-mode + +
    + +
    + + opacity + +
    + +
    + + order + +

    + + In collection: + + flexbox + + +

    +
    + +
    + + outline-color + +
    + +
    + + outline-style + +
    + +
    + + outline-width + +
    + +
    + + outline + +
    + +
    + + overflow-wrap + +
    + +
    + + overflow-x + +
    + +
    + + overflow-y + +
    + +
    + + overflow + +
    + +
    + + padding-bottom + +

    + + In collection: + + box-model + + +

    +
    + +
    + + padding-left + +

    + + In collection: + + box-model + + +

    +
    + +
    + + padding-right + +

    + + In collection: + + box-model + + +

    +
    + +
    + + padding-top + +

    + + In collection: + + box-model + + +

    +
    + +
    + + padding + +

    + + In collection: + + box-model + + +

    +
    + +
    + + pointer-events + +
    + +
    + + position + +

    + + In collection: + + positioning + + +

    +
    + +
    + + resize + +
    + +
    + + right + +

    + + In collection: + + positioning + + +

    +
    + +
    + + text-align + +

    + + In collection: + + typography + + +

    +
    + +
    + + text-decoration + +

    + + In collection: + + typography + + +

    +
    + +
    + + text-indent + +

    + + In collection: + + typography + + +

    +
    + +
    + + text-overflow + +

    + + In collection: + + typography + + +

    +
    + +
    + + text-shadow + +

    + + In collection: + + typography + + +

    +
    + +
    + + text-transform + +

    + + In collection: + + typography + + +

    +
    + +
    + + top + +

    + + In collection: + + positioning + + +

    +
    + +
    + + transform-origin + +
    + +
    + + transform + +
    + +
    + + transition-delay + +

    + + In collection: + + transitions + + +

    +
    + +
    + + transition-duration + +

    + + In collection: + + transitions + + +

    +
    + +
    + + transition-property + +

    + + In collection: + + transitions + + +

    +
    + +
    + + transition-timing-function + +

    + + In collection: + + transitions + + +

    +
    + +
    + + transition + +

    + + In collection: + + transitions + + +

    +
    + +
    + + white-space + +

    + + In collection: + + typography + + +

    +
    + +
    + + width + +

    + + In collection: + + box-model + + +

    +
    + +
    + + will-change + +
    + +
    + + word-break + +

    + + In collection: + + typography + + +

    +
    + +
    + + word-spacing + +

    + + In collection: + + typography + + +

    +
    + +
    + + z-index + +

    + + In collection: + + positioning + + +

    +
    diff --git a/_includes/lists/menu-list.html b/_includes/lists/menu-list.html index 7ac141d0..323a47ca 100644 --- a/_includes/lists/menu-list.html +++ b/_includes/lists/menu-list.html @@ -1,128 +1 @@ -
  • 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
    • +
  • 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
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-column
  • grid-gap
  • grid-row-end
  • grid-row-gap
  • grid-row-start
  • grid-row
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • grid-template
  • grid
  • 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
  • right
  • 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
  • vertical-align
  • white-space
  • width
  • will-change
  • word-break
  • word-spacing
  • z-index
    • \ No newline at end of file diff --git a/_includes/menu.html b/_includes/menu.html index f56f85bd..c6ead4d3 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -1,69 +1,123 @@ + + diff --git a/_includes/noscript.html b/_includes/noscript.html index 437dee34..6302d0ee 100644 --- a/_includes/noscript.html +++ b/_includes/noscript.html @@ -8,8 +8,9 @@ display: block; } - #carbon { + #carbon, + #placeholder { display: none; } - \ No newline at end of file + diff --git a/_includes/sister.html b/_includes/sister.html new file mode 100644 index 00000000..f24498b4 --- /dev/null +++ b/_includes/sister.html @@ -0,0 +1,33 @@ + diff --git a/_includes/social/button-facebook.html b/_includes/social/button-facebook.html new file mode 100644 index 00000000..82f9d4a6 --- /dev/null +++ b/_includes/social/button-facebook.html @@ -0,0 +1,7 @@ + + {% include svg/facebook.html %} + diff --git a/_includes/social/button-twitter.html b/_includes/social/button-twitter.html new file mode 100644 index 00000000..86b6798f --- /dev/null +++ b/_includes/social/button-twitter.html @@ -0,0 +1,10 @@ + + {% include svg/twitter.html %} + diff --git a/_includes/svg/facebook.html b/_includes/svg/facebook.html index 9a2367c8..2a6eced9 100644 --- a/_includes/svg/facebook.html +++ b/_includes/svg/facebook.html @@ -1,4 +1,4 @@ - diff --git a/_includes/svg/twitter.html b/_includes/svg/twitter.html index d0c3994f..cf16d3bf 100644 --- a/_includes/svg/twitter.html +++ b/_includes/svg/twitter.html @@ -1,4 +1,4 @@ - + + + + + {{page.collection_name}} - {{site.title}} + + + + + + + + + + + + + + + + + + + + {% include favicons.html %} + + + {% include menu.html %} +
    +
    +
    +

    + {{page.collection_name}} in CSS +

    +

    The CSS properties that allow you to {{page.description}}

    +
    +

    + Share this page + + {% include svg/twitter.html %} + + + {% include svg/facebook.html %} + +

    +
    + {% include ff.html %} +
    + {% include bsa.html %} +
    +
    + {{content}} +
    +
    + {% include modals/share.html %} + {% include google-fonts.html %} + + + + {% include noscript.html %} + + diff --git a/_layouts/single.html b/_layouts/single.html index 209b0aef..01481f8f 100644 --- a/_layouts/single.html +++ b/_layouts/single.html @@ -5,7 +5,8 @@ {{page.property_name}} - {{site.title}} - + + @@ -28,11 +29,11 @@ {% include menu.html %}
    - - - View in context - -
    +
    + {% include bsa.html %} +
    +
    + {% include ff.html %} {{content}}
    @@ -40,6 +41,7 @@ {% include google-fonts.html %} + {% include noscript.html %} diff --git a/animations.html b/animations.html new file mode 100644 index 00000000..d557e6fd --- /dev/null +++ b/animations.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Animations" +menu_list: "animations-list" +description: "animate almost any other property" +--- + +{% include collections/animations.html %} diff --git a/backgrounds.html b/backgrounds.html new file mode 100644 index 00000000..7b49d77f --- /dev/null +++ b/backgrounds.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Backgrounds" +menu_list: "backgrounds-list" +description: "style the background of an element with colors and images" +--- + +{% include collections/backgrounds.html %} diff --git a/box-model.html b/box-model.html new file mode 100644 index 00000000..82dfb5b4 --- /dev/null +++ b/box-model.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Box model" +menu_list: "box-model-list" +description: "define the size and behavior of the HTML element" +--- + +{% include collections/box-model.html %} diff --git a/css-grid.html b/css-grid.html new file mode 100644 index 00000000..eb675ca8 --- /dev/null +++ b/css-grid.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Grid" +menu_list: "css-grid-list" +description: "use the CSS Grid capabilities" +--- + +{% include collections/css-grid.html %} diff --git a/css/website.css b/css/website.css index a4303235..7399a34a 100644 --- a/css/website.css +++ b/css/website.css @@ -1 +1 @@ -/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{color:inherit;font-family:inherit;margin:0}html{box-sizing:border-box}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit}img,embed,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}[data-tooltip]{position:relative}[data-tooltip]:before{background-color:#333;border-radius:2px;bottom:100%;color:#fff;content:attr(data-tooltip);font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:0.6rem;left:50%;line-height:1.2;opacity:0;padding:0.5em 0.6em;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;visibility:hidden;white-space:nowrap}[data-tooltip]:hover:before{opacity:1;-webkit-transform:translateX(-50%) translateY(-4px);transform:translateX(-50%) translateY(-4px);visibility:visible}[data-tooltip].is-copied:before{background:#23d160;content:"Copied!"}html{background:#fff;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;max-width:100vw;min-width:300px;overflow-x:hidden;text-rendering:optimizeLegibility}body{color:#4d4d4d;font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:1rem;line-height:1.6}a,button,input,textarea{outline:none}a{color:#3273dc;cursor:pointer;text-decoration:none;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background, border-bottom-color, color;transition-property:background, border-bottom-color, color}code{font-family:"Source Code Pro","Consolas","Monaco","Courier",monospace;font-size:0.8em}img{max-height:100%;max-width:100%}strong{color:#333}pre{white-space:pre;word-wrap:normal}pre code{font-size:1em;padding:0}textarea{max-height:100%;max-width:100%}html ::-moz-selection{background:#00d1b2;color:#fff}html ::selection{background:#00d1b2;color:#fff}html.is-index{background:#310736}@media (min-width: 800px){html{font-size:18px;padding-left:262px}}.input,.textarea,.button{-moz-appearance:none;-webkit-appearance:none;background:#f2f2f2;border:none;font-size:1em;line-height:1.6;padding:0.6em 1em}.textarea{max-height:100%;max-width:100%;min-height:6em}.button{border-radius:3px;box-shadow:0 2px 2px rgba(0,0,0,0.2);cursor:pointer;font-weight:700;padding-left:1.2em;padding-right:1.2em;text-align:center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background, box-shadow, color, -webkit-transform;transition-property:background, box-shadow, color, -webkit-transform;transition-property:background, box-shadow, color, transform;transition-property:background, box-shadow, color, transform, -webkit-transform;will-change:box-shadow}.button:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.button:active{box-shadow:0 0 0 rgba(0,0,0,0.01);-webkit-transform:translateY(0);transform:translateY(0)}.button.is-primary{background:#00d1b2;color:#fff}.button.is-primary:hover{background:#00b89c}.button.is-primary:active{background:#009e86}.button.is-facebook{background:#3b5998;color:#fff}.button.is-facebook:hover{background:#344e86}.button.is-facebook:active{background:#2d4373}.button.is-twitter{background:#55acee;color:#fff}.button.is-twitter:hover{background:#3ea1ec}.button.is-twitter:active{background:#2795e9}.icon{display:block;pointer-events:none;position:relative;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity;transition-property:opacity}.icon.is-back{height:7px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:center center;transform-origin:center center;width:7px}.icon.is-back:before,.icon.is-back:after{background:#fff;border-radius:4px;content:"";display:block;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background;transition-property:background}.icon.is-back:before{height:2px}.icon.is-back:after{height:7px;margin-top:-2px;width:2px}.icon.is-close{height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center;width:14px}.icon.is-close:before,.icon.is-close:after{background:#fff;border-radius:4px;content:"";display:block;position:absolute}.icon.is-close:before{height:4px;left:0;margin-top:-2px;top:50%;width:14px}.icon.is-close:after{height:14px;left:50%;margin-left:-2px;top:0;width:4px}.icon.is-search{border:2px solid gray;border-radius:290486px;height:12px;-webkit-transform:rotate(-45deg) translateX(4px) translateY(-5px);transform:rotate(-45deg) translateX(4px) translateY(-5px);-webkit-transform-origin:center center;transform-origin:center center;width:12px}.icon.is-search:before{background:gray;border-radius:290486px;content:"";height:7px;left:50%;margin-left:-1px;position:absolute;top:100%;width:2px}.menu{background:#fff;position:relative}.menu-logo{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.menu-logo figure{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:190px}.menu-logo img{display:block}.menu-logo img:first-child{height:24px;position:relative;width:21px}.menu-logo img:last-child{height:18.5px;margin-bottom:6px;margin-left:9px;width:160px}.menu-title{color:gray;margin-top:1rem;padding-right:1rem}.menu-title small{font-size:0.8em}.menu-title small a:hover{background:#05ffb0;color:#310736}.menu-share{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.menu-share-label{margin-right:0.5rem}.menu-share-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:2.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:2.5rem}.menu-share-button:before{bottom:0;left:0;position:absolute;right:0;top:0;background:#f2f2f2;border-radius:5px;content:"";display:block;height:100%;opacity:0;-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;width:100%}.menu-share-button svg{height:1rem;position:relative;width:auto}.menu-share-button:hover:before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.menu-share-nav{font-weight:700;position:absolute;right:1rem;top:1rem}.menu-nav{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden}.menu-search{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;position:relative}.menu-search input{-moz-appearance:none;-webkit-appearance:none;border:none;display:block;font-family:inherit;font-size:0.8rem;padding:1.5em;padding-left:3.5rem;width:100%}.menu-search input:focus+.icon{opacity:1}.menu-search .icon{left:2rem;opacity:0.3;pointer-events:none;position:absolute;top:50%}.menu-list{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;font-family:"Source Code Pro","Consolas","Monaco","Courier",monospace;font-size:0.7rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:relative}.menu-list ul{-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto}.menu-list a{display:block;padding:0.75rem 2rem;-webkit-transition:none;transition:none}.menu-list a .highlight{background:#ffdd57;color:rgba(0,0,0,0.7)}.menu-list a:hover,.menu-list a.is-selected{background:#05ffb0;color:#310736}.menu-list.is-searching a{display:none}.menu-list.is-searching a.is-highlighted,.menu-list.is-searching a.is-selected{display:block}.menu-list-shadow{display:block;left:0;opacity:0;pointer-events:none;position:absolute;right:0}.menu-list-shadow.is-top{background:-webkit-linear-gradient(rgba(0,0,0,0.1), transparent);background:linear-gradient(rgba(0,0,0,0.1), transparent);height:1rem;top:0;-webkit-transform-origin:center top;transform-origin:center top}.menu-list-shadow.is-bottom{background:-webkit-linear-gradient(transparent, rgba(0,0,0,0.1));background:linear-gradient(transparent, rgba(0,0,0,0.1));bottom:0;height:1rem;opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.menu-close{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#3273dc;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;font-weight:700;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem;text-align:center}.menu-close strong{color:#fff}.menu-close .icon{margin-right:0.25rem;margin-top:1px}.menu-hello{background:#fff;min-height:218px}#huggingFace{background:#fff;color:#333;display:none;font-size:16px;line-height:1.4;padding:1.5rem}#huggingFace img{height:24px;margin-top:-4px;vertical-align:middle;width:24px}#huggingFace strong{position:relative}#huggingFace strong:before{background:#9efff0;bottom:0;content:"";height:2px;left:0;position:absolute;right:0}#huggingFace p+p{margin-top:0.5em}#carbon{display:block;font-size:14px;line-height:1.2;min-height:218px}#carbonads a,#carbonads img,#carbonads span{display:block;max-width:240px}#carbonads .carbon-wrap a:first-child{height:calc(100px + 1rem);padding:1rem 1rem 0}#carbonads .carbon-wrap a:last-child{padding:0.5rem 1rem 0}#carbonads .carbon-poweredby{color:gray;padding:0.5rem 1rem 1rem}#carbonads:hover .carbon-wrap a:last-child{text-decoration:underline}@media (max-width: 799px){.menu-header{padding:2rem;padding-bottom:0}.menu-share{background:#fff;bottom:0;box-shadow:0 0 1rem rgba(0,0,0,0.2);left:0;padding:0.5rem 1rem;position:fixed;right:0}.menu-nav{bottom:0;left:0;position:absolute;right:0;top:0;background:#fff;display:none;position:fixed}.menu-nav.is-active{display:-webkit-box;display:-ms-flexbox;display:flex}#huggingFace{padding:2rem}#carbonads .carbon-wrap a:first-child,#carbonads .carbon-wrap a:last-child,#carbonads .carbon-poweredby{padding-left:2rem;padding-right:2rem}}@media (min-width: 800px){.menu{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:#fff;bottom:0;box-shadow:0 0 1rem rgba(0,0,0,0.1);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;left:0;min-height:100vh;position:fixed;top:0;width:262px}.menu-header{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;padding:2rem;padding-bottom:1.5rem}.menu-share{margin-top:0.5rem}.menu-share-nav{display:none}.menu-nav{border-top:1px solid #e6e6e6;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.menu-list a{padding:0.5rem 2rem}.menu-hello{background:#fff;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.menu-close{display:none}}.header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#310736;color:#622369;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:3rem 2rem;position:relative;text-align:left}.header-figure{background-image:url("../images/css-reference-title.png");background-position:center center;background-repeat:no-repeat;background-size:486px 96px;display:inline-block;height:96px;overflow:hidden;text-indent:-290486px;vertical-align:top;width:486px}@media (max-width: 600px){.header-figure{background-size:243px 48px;height:48px;width:243px}}.header-title{color:#fff;font-size:1.4rem;font-weight:700;margin-top:2rem;text-shadow:0 2px 4px rgba(0,0,0,0.1)}.header-subtitle{color:#94529c;max-width:40em}.header-subtitle a{border-bottom:1px solid rgba(148,82,156,0.2);color:#94529c}.header-subtitle a:hover{border-bottom-color:#94529c;color:#94529c}.header-subtitle strong{color:#94529c}.back{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#3273dc;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.8rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:1rem 1.2rem}.back strong{color:inherit;margin-left:1em}.back:hover{background:#05ffb0;color:#310736}.back:hover .icon:before,.back:hover .icon:after{background:#310736}@media (min-width: 800px){.header{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:400px;padding:3rem;text-align:center}}.list{background:#fff;box-shadow:0 0 1rem rgba(0,0,0,0.1);position:relative}.property{background-image:-webkit-linear-gradient(#ebfffc, #fff);background-image:linear-gradient(#ebfffc, #fff);background-repeat:no-repeat;background-size:100% 4rem;border-top:2px solid #00d1b2;overflow:hidden;padding-bottom:3rem;padding-top:2rem}.property:first-child{border-top:none}.property.is-shorthand{background-image:-webkit-linear-gradient(#f5ebff, #fff);background-image:linear-gradient(#f5ebff, #fff);border-top-color:#b86bff}.property-links{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.7rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;opacity:0.5;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity;transition-property:opacity}.property-links a{border-bottom:1px solid transparent;color:gray;margin-left:1em}.property-links a:before{left:auto;right:0;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);white-space:nowrap}.property-links a:hover{border-bottom-color:#3273dc;color:#3273dc}.property-links a:hover:before{-webkit-transform:translateX(0) translateY(-4px);transform:translateX(0) translateY(-4px)}.property-links:hover{opacity:1}.property-name{font-size:1.2rem;font-weight:700}.property-name a{border-bottom:1px solid transparent;color:#333;display:inline-block;position:relative;vertical-align:top}.property-name a span{color:#e6e6e6;padding-right:0.6em;position:absolute;right:100%;top:0}.property-name a:hover{border-bottom-color:#3273dc;color:#3273dc}.property-name a:hover span{color:#3273dc}.property-description code{background:#f2f2f2;border-radius:2px;color:#333;padding:0.2em 0.4em}.property-description p+p{margin-top:0.5em}.property-description .shorthand{padding:0}.property-description .shorthand a{background:#f2f2f2;border-radius:2px;padding:0.2em 0.4em}.property-description .shorthand a:hover{background:#3273dc;color:#fff}.property-animation{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.property-animation .button{background:#23d160;color:#fff;font-size:0.8rem}.property-animation .button:before{content:"▶ Play animations"}.property-animation .button:first-letter{margin-right:0.25em}.property-animation .button.is-playing{background:#ff4538}.property-animation .button.is-playing:before{content:"￭ Stop"}@media (max-width: 799px){.property-header{padding-left:2rem;padding-right:2rem}.property-links{margin-bottom:0.5rem}}@media (min-width: 800px){.property-header{padding-left:3rem;padding-right:3rem}.property-links{float:right;padding:0.25rem 0}}.example-value,.example-default,.example-recommended{background:#ffdd57;border-radius:2px;color:rgba(0,0,0,0.7);display:inline-block;padding:0.1em 0.5em 0.15em;vertical-align:top}.example-value{cursor:pointer;position:relative}.example-default,.example-recommended{background:#fff;float:right}.example-default{box-shadow:inset 0 0 0 1px #ff4538;color:#ff4538}.example-recommended{box-shadow:inset 0 0 0 1px #23d160;color:#23d160}.example-fixed{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.example-fixed .button{background:#23d160;color:#fff;font-size:0.8rem}.example-fixed .button:before{content:"Enable position fixed"}.example-fixed .button.is-enabled{background:#ff4538}.example-fixed .button.is-enabled:before{content:"Disabled position fixed"}.example-description{font-size:0.9rem;margin-top:0.5rem}.example-description a{border-bottom:1px solid #e6e6e6;color:#333}.example-description a:hover{border-bottom-color:#3273dc}.example-description code{background:#f2f2f2;border-radius:2px;color:#333;padding:0.2em 0.4em}.example-description p,.example-description pre,.example-description ul{margin-bottom:0.5em}.example-description p:last-child,.example-description pre:last-child,.example-description ul:last-child{margin-bottom:0}.example-description ul{list-style-position:outside;list-style-type:disc;margin-left:1.5em}.example-description pre{background:#f2f2f2;color:#333;font-size:0.8em;line-height:1.4;padding:0.8em 1em}.example-description .shorthand{padding:0}.example-description .shorthand a{background:#f2f2f2;border-radius:2px;padding:0.2em 0.4em}.example-description .shorthand a:hover{background:#3273dc;color:#fff}.example-browser{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#f2f2f2;border:1px solid #e6e6e6;border-bottom:none;border-top-left-radius:3px;border-top-right-radius:3px;display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.5rem}.example-browser i{background:rgba(0,0,0,0.2);border-radius:290486px;display:block;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;height:4px;margin-right:2px;width:4px}.example-output{border:1px solid #e6e6e6;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 3px rgba(0,0,0,0.05);font-size:0.8em;padding:0.5em}.example-output-div{padding:0.8em 1em;position:relative}.example-complements{background:#f2f2f2;font-size:0.9em;margin-bottom:-3rem}.example-complements strong{font-weight:400;padding-left:0.35em}.example-complements .shorthand{padding:0}.example-complements .shorthand a{background:#fff;border-radius:2px;padding:0.2em 0.4em}.example-complements .shorthand a:hover{background:#3273dc;color:#fff}@media (max-width: 799px){.example{padding:2rem 2rem 0}.example-preview{margin-top:1rem}.example-complements{margin-top:2rem;padding:2rem}}@media (min-width: 800px){.example{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;padding:2rem 3rem 0}.example-header,.example-preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.example-header{padding-right:2rem;width:60%}.example-preview{width:40%}.example-complements{margin-top:3rem;padding:2rem 3rem}}.modal{bottom:0;left:0;position:absolute;right:0;top:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;padding:1rem;position:fixed;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, visibility;transition-property:opacity, visibility;visibility:hidden}.modal-box{background:#fff;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:46rem;opacity:0;padding:4rem 2rem;position:relative;-webkit-transform:scale(0.95);transform:scale(0.95);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, visibility, -webkit-transform;transition-property:opacity, visibility, -webkit-transform;transition-property:opacity, transform, visibility;transition-property:opacity, transform, visibility, -webkit-transform}.modal-title{color:#333;font-size:2rem;font-weight:700;line-height:1;margin-bottom:3rem;text-align:center}.modal-close{background:#f2f2f2;border-radius:290486px;height:3rem;position:absolute;right:1rem;top:1rem;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center;width:3rem}.modal-close:before,.modal-close:after{background:gray;content:"";display:block;position:absolute}.modal-close:before{height:50%;left:50%;margin-left:-1px;top:25%;width:2px}.modal-close:after{height:2px;left:25%;margin-top:-1px;top:50%;width:50%}.modal-close:hover{background:#e6e6e6}.modal-close:active{background:#d9d9d9}.modal.is-active{opacity:1;visibility:visible}.modal.is-active .modal-box{opacity:1;-webkit-transform:scale(1);transform:scale(1);visibility:visible}@media (max-width: 799px){.modal-url .input{display:block;width:100%}.modal-url .button{margin-top:1em}.modal-social .button{display:block;margin-top:1em}}@media (min-width: 800px){.modal-box{padding:4rem 6rem}.modal-url{display:-webkit-box;display:-ms-flexbox;display:flex}.modal-url .input{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.modal-url .button{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-left:1em;padding-left:0;padding-right:0;width:5.5em}.modal-social{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.modal-social .button{margin-right:1em}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeAndMove{from{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:1;-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes fadeAndMove{from{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:1;-webkit-transform:translateX(200px);transform:translateX(200px)}}@-webkit-keyframes moveRight{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes moveRight{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(200px);transform:translateX(200px)}}@-webkit-keyframes rotateFull{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes rotateFull{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes kf-animation-fill-mode{from{background:#23d160;-webkit-transform:translateX(0);transform:translateX(0)}to{background:#3273dc;-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes kf-animation-fill-mode{from{background:#23d160;-webkit-transform:translateX(0);transform:translateX(0)}to{background:#3273dc;-webkit-transform:translateX(200px);transform:translateX(200px)}}.box{border:2px solid #4d4d4d;border-radius:3px;position:relative}.box:before{background:#4d4d4d;border-radius:1px 0 2px 0;color:#fff;content:"";display:inline-block;font-size:0.8em;padding:0 6px 2px 4px;vertical-align:top}.box.is-red{border-color:#ff4538}.box.is-red:before{background:#ff4538}.box.is-green{border-color:#23d160}.box.is-green:before{background:#23d160}.box.is-plum{border-color:#310736}.box.is-plum:before{background:#310736}.box.is-alpha{border-color:#05ffb0}.box.is-alpha:before{background:#05ffb0;color:#310736}.line{background:#4d4d4d;height:1px;position:relative}.line:before{background:#4d4d4d;border-radius:2px;color:#fff;content:"Line";display:inline-block;font-size:10px;height:15px;line-height:15px;margin-top:-6px;padding:0 4px;vertical-align:top}.line.is-red{background:#ff4538}.line.is-red:before{background:#ff4538}.square{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#e6e6e6;border-radius:3px;color:#4d4d4d;display:-webkit-box;display:-ms-flexbox;display:flex;height:75px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1.2;padding:0;text-align:center;width:75px}.square.is-plum{background:#310736;color:#fff}.square.is-plum:before{background:#310736}.square.is-alpha{background:#05ffb0;color:#310736}.square.is-alpha:before{background:#05ffb0}.square.is-pink{background:#ff3860;color:#fff}.square.is-pink:before{background:#ff3860}.block{background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;line-height:1.2;padding:1em}.block strong{color:inherit}.block.is-alpha{background:#05ffb0;color:#310736}.block.is-beta{background:#00e7eb;color:#310736}.block.is-pink{background:#ff3860;color:#310736}.block.is-plum{background:#310736;color:#fff}.block.is-yellow{background:#ffdd57;color:#310736}.block.is-orange{background:#ff470f;color:#310736}.block.is-green{background:#23d160;color:#310736}.block.is-turquoise{background:#00d1b2;color:#310736}.block.is-blue{background:#3273dc;color:#310736}.block.is-purple{background:#b86bff;color:#310736}.block.is-red{background:#ff4538;color:#310736}.natural,.actual{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;border-radius:3px;line-height:1.2;padding:0.8em 1em}.natural{border:2px dotted #ff4538;color:#ff4538}.actual{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;background:#05ffb0;border:2px solid #05ffb0;color:#310736}.modal{z-index:40}.menu{z-index:30}.list{z-index:20}.header{z-index:10} +/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{color:inherit;font-family:inherit;margin:0}html{box-sizing:border-box}*{box-sizing:inherit}*:before,*:after{box-sizing:inherit}img,embed,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}[data-tooltip]{cursor:pointer;position:relative}[data-tooltip]:before,[data-tooltip-after]:after{background-color:#333;border-radius:2px;bottom:100%;color:#fff;content:attr(data-tooltip);font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:0.6rem;font-weight:400;left:50%;line-height:1.2;opacity:0;padding:0.5em 0.6em;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;visibility:hidden;white-space:nowrap}[data-tooltip-after]:after{content:attr(data-tooltip-after)}[data-tooltip]:hover:before,[data-tooltip-after]:hover:after{opacity:1;-webkit-transform:translateX(-50%) translateY(-4px);transform:translateX(-50%) translateY(-4px);visibility:visible}[data-tooltip].is-copied:before{background:#23d160;content:"Copied!"}html{background:#fff;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;max-width:100vw;min-width:300px;overflow-x:hidden;text-rendering:optimizeLegibility}body{color:#4d4d4d;font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;font-size:1rem;line-height:1.6}a,button,input,textarea{outline:none}a{color:#3273dc;cursor:pointer;text-decoration:none;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background, border-bottom-color, color;transition-property:background, border-bottom-color, color}code{font-family:"Inconsolata","Source Code Pro","Consolas","Monaco","Courier",monospace;font-size:0.8em}img{max-height:100%;max-width:100%}strong{color:#333}pre{white-space:pre;word-wrap:normal}pre code{font-size:1em;padding:0}textarea{max-height:100%;max-width:100%}html ::-moz-selection{background:#00d1b2;color:#fff}html ::selection{background:#00d1b2;color:#fff}.container{margin-left:auto;margin-right:auto;max-width:700px}@media (min-width: 800px){html{font-size:18px;padding-left:226px}html.is-index{padding-left:0}}.input,.textarea,.button{-moz-appearance:none;-webkit-appearance:none;background:#f2f2f2;border:none;font-size:1em;line-height:1.6;padding:0.6em 1em}.textarea{max-height:100%;max-width:100%;min-height:6em}.button{border-radius:3px;box-shadow:0 2px 2px rgba(0,0,0,0.2);cursor:pointer;font-weight:700;padding-left:1.2em;padding-right:1.2em;text-align:center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background, box-shadow, color, -webkit-transform;transition-property:background, box-shadow, color, -webkit-transform;transition-property:background, box-shadow, color, transform;transition-property:background, box-shadow, color, transform, -webkit-transform;will-change:box-shadow}.button:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.button:active{box-shadow:0 0 0 rgba(0,0,0,0.01);-webkit-transform:translateY(0);transform:translateY(0)}.button.is-primary{background:#00d1b2;color:#fff}.button.is-primary:hover{background:#00b89c}.button.is-primary:active{background:#009e86}.button.is-facebook{background:#3b5998;color:#fff}.button.is-facebook:hover{background:#344e86}.button.is-facebook:active{background:#2d4373}.button.is-twitter{background:#55acee;color:#fff}.button.is-twitter:hover{background:#3ea1ec}.button.is-twitter:active{background:#2795e9}.icon{display:block;pointer-events:none;position:relative;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity;transition-property:opacity}.icon.is-back{height:7px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:center center;transform-origin:center center;width:7px}.icon.is-back:before,.icon.is-back:after{background:#fff;border-radius:4px;content:"";display:block;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:background;transition-property:background}.icon.is-back:before{height:2px}.icon.is-back:after{height:7px;margin-top:-2px;width:2px}.icon.is-close{height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center;width:14px}.icon.is-close:before,.icon.is-close:after{background:#fff;border-radius:4px;content:"";display:block;position:absolute}.icon.is-close:before{height:4px;left:0;margin-top:-2px;top:50%;width:14px}.icon.is-close:after{height:14px;left:50%;margin-left:-2px;top:0;width:4px}.icon.is-search{border:2px solid gray;border-radius:290486px;height:12px;-webkit-transform:rotate(-45deg) translateX(4px) translateY(-5px);transform:rotate(-45deg) translateX(4px) translateY(-5px);-webkit-transform-origin:center center;transform-origin:center center;width:12px}.icon.is-search:before{background:gray;border-radius:290486px;content:"";height:7px;left:50%;margin-left:-1px;position:absolute;top:100%;width:2px}.menu{background:#fff;position:relative}.menu-logo{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem 0}.menu-logo img{display:block;height:36px;width:186px}.menu-logo-icon{height:24px;position:relative;width:21px}.menu-logo-type{height:18.5px;margin-bottom:6px;margin-left:9px;width:160px}.menu-collections{border-top:1px solid #e6e6e6;padding:1rem}.menu-collections ul{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.menu-collection-link{border-radius:2px;display:block;padding:0 6px}.menu-collection-link:hover{background:#00d1b2;color:#fff}.menu-collection-link--active{background:#00d1b2;color:#fff}.menu-nav{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden}.menu-search{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;position:relative}.menu-search input{-moz-appearance:none;-webkit-appearance:none;border:none;display:block;font-family:inherit;font-size:0.8rem;padding:1em;padding-left:2.5rem;width:100%}.menu-search input:focus+.icon{opacity:1}.menu-search .icon{left:1rem;opacity:0.3;pointer-events:none;position:absolute;top:50%}.menu-list{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;font-size:0.8rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:relative}.menu-list ul{-webkit-overflow-scrolling:touch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:auto}.menu-list .menu-link{display:block;padding:0.75rem 2rem;-webkit-transition:none;transition:none}.menu-list.is-searching .menu-item{display:none}.menu-list.is-searching .menu-item.is-highlighted,.menu-list.is-searching .menu-item.is-selected{display:block}.menu-item .highlight{background:#ffdd57;color:rgba(0,0,0,0.7)}.menu-item:hover,.menu-item.is-selected{background:#00d1b2;color:#fff}.menu-item:hover .item-name,.menu-item.is-selected .item-name{color:#fff}.menu-list-shadow{display:block;left:0;opacity:0;pointer-events:none;position:absolute;right:0}.menu-list-shadow.is-top{background:-webkit-linear-gradient(rgba(0,0,0,0.1), transparent);background:linear-gradient(rgba(0,0,0,0.1), transparent);height:1rem;top:0;-webkit-transform-origin:center top;transform-origin:center top}.menu-list-shadow.is-bottom{background:-webkit-linear-gradient(transparent, rgba(0,0,0,0.1));background:linear-gradient(transparent, rgba(0,0,0,0.1));bottom:0;height:1rem;opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.menu-close{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#3273dc;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;font-weight:700;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem;text-align:center}.menu-close strong{color:#fff}.menu-close .icon{margin-right:0.25rem;margin-top:1px}.menu-hello{background:#fff}.menu-hello #huggingFace{background:#fff}#huggingFace{color:#333;display:none;font-size:16px;line-height:1.4;min-height:218px;padding:1.5rem;padding-bottom:1rem}#huggingFace img{height:24px;margin-top:-4px;vertical-align:middle;width:24px}#huggingFace strong{position:relative}#huggingFace strong:before{background:#9efff0;background:#00d1b2;bottom:0;content:"";height:2px;left:0;position:absolute;right:0}#huggingFace p{margin-bottom:0.5em}#carbon{display:none;font-size:14px;line-height:1.2;min-height:218px}#carbonads a,#carbonads img,#carbonads span{display:block;max-width:240px}#carbonads .carbon-wrap a:first-child{height:calc(100px + 1rem);padding:1rem 1rem 0}#carbonads .carbon-wrap a:last-child{padding:0.5rem 1rem 0}#carbonads .carbon-poweredby{color:gray;padding:0.5rem 1rem 1rem}#carbonads:hover .carbon-wrap a:last-child{text-decoration:underline}#placeholder{display:block;font-size:14px;line-height:1.2}.placeholder-image{height:calc(100px + 1rem);padding:1rem 1rem 0}.placeholder-image div{background:#f2f2f2;height:100px;width:150px}.placeholder-content{padding:0.5rem 1rem 0}.placeholder-content div{background:#f2f2f2;height:1em;margin-bottom:0.2em}.placeholder-content div:last-child{width:30%}.placeholder-footer{padding:0.5rem 1rem 1rem}.placeholder-footer div{background:#f2f2f2;height:1em;width:40%}@media (max-width: 799px){.menu-collections{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.menu-collections li{margin:0.25rem}.menu-nav{bottom:0;left:0;position:absolute;right:0;top:0;background:#fff;display:none;position:fixed}.menu-nav.is-active{display:-webkit-box;display:-ms-flexbox;display:flex}#huggingFace{padding:2rem}#carbonads .carbon-wrap a:first-child,#carbonads .carbon-wrap a:last-child,#carbonads .carbon-poweredby{padding-left:2rem;padding-right:2rem}}@media (min-width: 800px){.menu{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background:#fff;bottom:0;box-shadow:0 0 1rem rgba(0,0,0,0.1);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;left:0;min-height:100vh;position:fixed;top:0;width:226px}.menu-header{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.menu-collections{font-size:0.8rem;padding-left:1rem}.menu-nav{border-top:1px solid #e6e6e6;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.menu-search input{font-size:0.8rem}.menu-list .menu-link{font-size:0.8rem;padding:0.25rem 1rem}.menu-hello{background:#fff;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.menu-close{display:none}}.header{background-color:#f2f2f2}.header-figure{display:-webkit-box;display:-ms-flexbox;display:flex}.header-figure img:first-child{height:128px;width:128px}.header-carbon{background-color:white;border-radius:5px;box-shadow:0 0 1rem rgba(0,0,0,0.2);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;width:240px}.header-title{color:#333;font-size:1.2rem;font-weight:bold;line-height:1.2;margin-bottom:0.5rem}.header-subtitle{line-height:1.6rem}.header-subtitle a{color:inherit}.header-subtitle strong:first-child{color:#00d1b2}.header-share{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:0.5rem}.header-share .share-button{height:48px;width:48px}.header-share .share-button svg{height:24px;width:24px}@media (max-width: 799px){.header{padding:30px}.header-figure{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:30px}.header-figure img:last-child{height:40px}.header-carbon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto 2rem}.header-subtitle{margin-top:10px}}@media (min-width: 800px){.header{padding:60px 60px 30px}.header-figure{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:30px}.header-figure img:last-child{height:80px;margin-left:20px}.header-carbon{margin-left:1rem;margin-right:2rem}.header-content{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.header-text{margin-right:2rem}.header-share{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}.footer{background:#fff;bottom:0;box-shadow:0 0 1rem rgba(0,0,0,0.2);left:0;position:fixed;right:0}.footer-title{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:gray;display:none;line-height:1.2;padding:0 1rem}.footer-title small{font-size:0.8em;margin-left:0.5em}.footer-title a{border-radius:2px;margin-left:-4px;padding:2px 4px}.footer-title a:hover{background:#05ffb0;color:#310736}.footer-facebook,.footer-github{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.footer-facebook iframe,.footer-github iframe{height:20px}.footer-share{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.footer-share--contribute{display:none}.footer-share-label{margin-right:0.25rem}.share-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:2rem}.share-button:before{bottom:0;left:0;position:absolute;right:0;top:0;background:rgba(0,0,0,0.14);border-radius:5px;content:"";display:block;height:100%;opacity:0;-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;width:100%}.share-button svg{height:1rem;position:relative;width:1rem}.share-button:hover:before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.footer-share-nav{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:700;padding:0 1rem;position:absolute;right:0;top:0}@media (max-width: 799px){.footer-share--social{padding:0.5rem 1rem}}@media (min-width: 800px){.footer{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.8rem;height:3rem;left:226px}.footer-share,.footer-facebook,.footer-github{display:-webkit-box;display:-ms-flexbox;display:flex}.footer-title{display:none;padding:0.25rem 1rem}.footer-share{border-left:1px solid #e6e6e6;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;padding:0.25rem 1rem}.footer-share-nav{display:none}}@media (min-width: 1000px){.footer-title{display:-webkit-box;display:-ms-flexbox;display:flex}}.index-collections{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.2}.index-collections a,.index-collections strong{border-radius:2px;padding:5px 10px}.index-collections a:hover{background:#00d1b2;color:#fff}.index-collections a.is-new{-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow:0 0 0 1px #ff4538;display:-webkit-box;display:-ms-flexbox;display:flex}.index-collections a.is-new:hover{background:#ff4538}.index-collections .tag{font-size:0.75em;margin-left:0.5em;position:relative;vertical-align:middle}@media (max-width: 799px){.index-collections{padding:1rem 1rem 0}}@media (min-width: 800px){.index-collections{border-bottom:1px solid #e6e6e6;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem}.index-collections strong{padding-left:0}}.finder{position:relative}.finder .menu-search input{font-size:1rem}.finder-list.is-searching .finder-item{display:none}.finder-list.is-searching .finder-item.is-highlighted:not(.is-hidden){display:block}.finder-list.is-searching .finder-item.is-selected{display:block}.finder-item{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;cursor:pointer;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:relative}.finder-item:hover .finder-item-link{background:#f2f2f2}.finder-item:hover .finder-item-meta .light{opacity:1}.finder-item.is-hidden{display:none}.finder-item.is-selected{z-index:1}.finder-item.is-selected .finder-item-link,.finder-item.is-selected .finder-item-link:hover{background:#00d1b2;color:#fff}.finder-item-link{display:block;padding:0.25rem 1rem;-webkit-transition:none;transition:none}.finder-item-link:visited{color:#b86bff}.finder-item-link:hover{background:#f2f2f2}.finder-item-link .highlight{background:#ffdd57;color:rgba(0,0,0,0.7)}.finder-item-link .light--experimental{margin-left:4px;position:relative;top:-1px}.finder-item-meta{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;right:0;top:0}.finder-item-meta .light:hover{text-decoration:underline}.light{border-radius:2px;color:#333;font-size:0.8em;font-weight:normal;line-height:1.2;opacity:0.5;padding:2px 4px;text-transform:lowercase;white-space:nowrap}label.light{cursor:pointer}label.light input{cursor:pointer;margin-right:4px}@media (max-width: 799px){.finder{padding-bottom:1rem}.finder-item-meta{padding-right:0.5rem}.finder-item-meta .light{margin-left:2px}}@media (min-width: 800px){.finder{padding-bottom:3rem}.finder-item-meta{padding:0 1em}.finder-item-meta .light{margin-left:4px}}.heading{background:#310736;color:#94529c;padding:4rem 3rem}.heading-title{font-size:2rem;line-height:1.2}.heading-title strong{color:#fff;font-weight:700}.heading-share{-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative}.heading-share-label{color:#94529c;font-size:0.8em;margin-right:0.5rem}.heading-share-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:3rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:3rem}.heading-share-button:before{bottom:0;left:0;position:absolute;right:0;top:0;background:#622369;border-radius:5px;content:"";display:block;height:100%;opacity:0;-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;width:100%}.heading-share-button svg{height:1.5rem;position:relative;width:1.5rem}.heading-share-button:hover:before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}@media (max-width: 799px){.heading-share{margin-top:2rem}}@media (max-width: 1199px){.heading-share{min-width:8rem;text-align:center}.heading-share-label{display:block;margin-bottom:0.5rem}.heading-share-button{vertical-align:top}}@media (min-width: 800px){.heading{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.heading-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}}@media (min-width: 1200px){.heading-share{display:-webkit-box;display:-ms-flexbox;display:flex}.heading-share-label{margin-right:0.5rem}.heading-share-button{display:-webkit-box;display:-ms-flexbox;display:flex}}.list{padding-bottom:3rem;position:relative}.list .menu-search input{font-size:1rem}.list-list.is-searching .menu-item{display:none}.list-list.is-searching .menu-item.is-highlighted,.list-list.is-searching .menu-item.is-selected{display:-webkit-box;display:-ms-flexbox;display:flex}.list-item{border-top:1px solid #00d1b2;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.list-name{display:block;padding:1rem;-webkit-transition:none;transition:none}.list-collections{bottom:0;color:rgba(0,0,0,0.3);display:none;font-size:0.8em;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;position:absolute;right:0;top:0}.list-collections a:hover{text-decoration:underline}.list-collections strong{color:inherit;text-transform:capitalize}@media (min-width: 800px){.list-name,.list-collections{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding:1rem}.list-name{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.list-item{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}}.properties{padding-bottom:3rem;position:relative}.property{background-color:#fff;background-image:-webkit-linear-gradient(#ebfffc, #fff);background-image:linear-gradient(#ebfffc, #fff);background-repeat:no-repeat;background-size:100% 4rem;border-top:2px solid #00d1b2;overflow:hidden;padding-bottom:3rem;padding-top:2rem}.property--shorthand{background-image:-webkit-linear-gradient(#f5ebff, #fff);background-image:linear-gradient(#f5ebff, #fff);border-top-color:#b86bff}.property-links{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:0.7rem;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;opacity:0.5;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity;transition-property:opacity}.property-links a{border-bottom:1px solid transparent;color:gray;margin-left:1em}.property-links a:before{left:auto;right:0;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0);white-space:nowrap}.property-links a:hover{border-bottom-color:#3273dc;color:#3273dc}.property-links a:hover:before{-webkit-transform:translateX(0) translateY(-4px);transform:translateX(0) translateY(-4px)}.property-links strong{text-transform:capitalize}.property-links:hover{opacity:1}.property-links .property-collections a{margin-left:0.25em}.property-name{font-size:1.2rem;font-weight:700}.property-name a{border-bottom:1px solid transparent;color:#333;display:inline-block;position:relative;vertical-align:top}.property-name a span{color:#e6e6e6;padding-right:0.6em;position:absolute;right:100%;top:0}.property-name a:hover{border-bottom-color:#3273dc;color:#3273dc}.property-name a:hover span{color:#3273dc}.property-description code{background:#f2f2f2;border-radius:2px;color:#333;padding:0.2em 0.4em}.property-description p{margin-top:0.5em}.property-description .shorthand{padding:0}.property-description .shorthand a{background:#f2f2f2;border-radius:2px;padding:0.2em 0.4em}.property-description .shorthand a:hover{background:#3273dc;color:#fff}.property-animation{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.property-animation .button{background:#23d160;color:#fff;font-size:0.8rem}.property-animation .button:before{content:"▶ Play animations"}.property-animation .button:first-letter{margin-right:0.25em}.property-animation .button.is-playing{background:#ff4538}.property-animation .button.is-playing:before{content:"￭ Stop"}@media (max-width: 799px){.property-header{padding-left:2rem;padding-right:2rem}.property-links{-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}}@media (min-width: 800px){.property-header{padding-left:3rem;padding-right:3rem}.property-links{float:right;padding:0.25rem 0}}.example-value,.example-default,.example-recommended{background:#ffdd57;border-radius:2px;color:rgba(0,0,0,0.7);display:inline-block;padding:0.1em 0.5em 0.15em;vertical-align:top}.example-value{cursor:pointer;position:relative}.example-default,.example-recommended{background:#fff;float:right}.example-default{box-shadow:inset 0 0 0 1px #ff4538;color:#ff4538}.example-recommended{box-shadow:inset 0 0 0 1px #23d160;color:#23d160}.example-fixed{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.example-fixed .button{background:#23d160;color:#fff;font-size:0.8rem}.example-fixed .button:before{content:"Enable position fixed"}.example-fixed .button.is-enabled{background:#ff4538}.example-fixed .button.is-enabled:before{content:"Disabled position fixed"}.example-description{font-size:0.9rem;margin-top:0.5rem}.example-description a{border-bottom:1px solid #e6e6e6;color:#333}.example-description a:hover{border-bottom-color:#3273dc}.example-description code{background:#f2f2f2;border-radius:2px;color:#333;padding:0.2em 0.4em}.example-description p,.example-description pre,.example-description ul{margin-top:0.5em}.example-description ul{list-style-position:outside;list-style-type:disc;margin-left:1.5em}.example-description pre{background:#f2f2f2;color:#333;font-size:0.8em;line-height:1.4;padding:0.8em 1em}.example-description .shorthand{padding:0}.example-description .shorthand a{background:#f2f2f2;border-radius:2px;padding:0.2em 0.4em}.example-description .shorthand a:hover{background:#3273dc;color:#fff}.example-browser{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#f2f2f2;border:1px solid #e6e6e6;border-bottom:none;border-top-left-radius:3px;border-top-right-radius:3px;display:-webkit-box;display:-ms-flexbox;display:flex;height:1rem;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-left:0.5rem}.example-browser i{background:rgba(0,0,0,0.2);border-radius:290486px;display:block;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;height:4px;margin-right:2px;width:4px}.example-output{border:1px solid #e6e6e6;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 3px rgba(0,0,0,0.05);font-size:0.8em;padding:0.5em}.example-output-div{padding:0.8em 1em;position:relative}.example-complements{background:#f2f2f2;font-size:0.9em;margin-bottom:-3rem}.example-complements strong{font-weight:400;padding-left:0.35em}.example-complements .shorthand{padding:0}.example-complements .shorthand a{background:#fff;border-radius:2px;padding:0.2em 0.4em}.example-complements .shorthand a:hover{background:#3273dc;color:#fff}@media (max-width: 799px){.example{padding:2rem 2rem 0}.example-preview{margin-top:1rem}.example-complements{margin-top:2rem;padding:2rem}}@media (min-width: 800px){.example{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;padding:2rem 3rem 0}.example-header,.example-preview{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.example-header{padding-right:2rem;width:60%}.example-preview{width:40%}.example-complements{margin-top:3rem;padding:2rem 3rem}}.modal{bottom:0;left:0;position:absolute;right:0;top:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0;padding:1rem;position:fixed;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, visibility;transition-property:opacity, visibility;visibility:hidden}.modal-box{background:#fff;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:46rem;opacity:0;padding:4rem 2rem;position:relative;-webkit-transform:scale(0.95);transform:scale(0.95);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:opacity, visibility, -webkit-transform;transition-property:opacity, visibility, -webkit-transform;transition-property:opacity, transform, visibility;transition-property:opacity, transform, visibility, -webkit-transform}.modal-title{color:#333;font-size:2rem;font-weight:700;line-height:1;margin-bottom:3rem;text-align:center}.modal-close{background:#f2f2f2;border-radius:290486px;height:3rem;position:absolute;right:1rem;top:1rem;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center;width:3rem}.modal-close:before,.modal-close:after{background:gray;content:"";display:block;position:absolute}.modal-close:before{height:50%;left:50%;margin-left:-1px;top:25%;width:2px}.modal-close:after{height:2px;left:25%;margin-top:-1px;top:50%;width:50%}.modal-close:hover{background:#e6e6e6}.modal-close:active{background:#d9d9d9}.modal.is-active{opacity:1;visibility:visible}.modal.is-active .modal-box{opacity:1;-webkit-transform:scale(1);transform:scale(1);visibility:visible}@media (max-width: 799px){.modal-url .input{display:block;width:100%}.modal-url .button{margin-top:1em}.modal-social .button{display:block;margin-top:1em}}@media (min-width: 800px){.modal-box{padding:4rem 6rem}.modal-url{display:-webkit-box;display:-ms-flexbox;display:flex}.modal-url .input{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1}.modal-url .button{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;margin-left:1em;padding-left:0;padding-right:0;width:5.5em}.modal-social{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:1rem}.modal-social .button{margin-right:1em}}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeAndMove{from{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:1;-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes fadeAndMove{from{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}to{opacity:1;-webkit-transform:translateX(200px);transform:translateX(200px)}}@-webkit-keyframes moveRight{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes moveRight{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(200px);transform:translateX(200px)}}@-webkit-keyframes rotateFull{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes rotateFull{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes kf-animation-fill-mode{from{background:#23d160;-webkit-transform:translateX(0);transform:translateX(0)}to{background:#3273dc;-webkit-transform:translateX(200px);transform:translateX(200px)}}@keyframes kf-animation-fill-mode{from{background:#23d160;-webkit-transform:translateX(0);transform:translateX(0)}to{background:#3273dc;-webkit-transform:translateX(200px);transform:translateX(200px)}}.sisters{background-color:#f2f2f2}.sister-banner{display:-webkit-box;display:-ms-flexbox;display:flex}.sister--htmlreference .sister-banner img{height:48px}.sister--bulma .sister-banner img{height:48px}@media (max-width: 799px){.sisters{padding:40px 20px;text-align:center}.sisters .sister+.sister{margin-top:40px}.sister-banner{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:10px}}@media (min-width: 800px){.sisters{padding:60px}.sisters .sister{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;padding-left:1rem}.sisters .sister+.sister{margin-top:60px}.sister-title{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.sister-banner{-ms-flex-negative:0;flex-shrink:0;width:420px}.sister--htmlreference .sister-banner img{height:72px}.sister--bulma .sister-banner img{height:64px}}.tag{background-color:#ff4538;border-radius:2px;color:#fff;padding:0.25em 0.5em 0.375em}.box{border:2px solid #4d4d4d;border-radius:3px;position:relative}.box:before{background:#4d4d4d;border-radius:1px 0 2px 0;color:#fff;content:"";display:inline-block;font-size:0.8em;padding:0 6px 2px 4px;vertical-align:top}.box--red{border-color:#ff4538}.box--red:before{background:#ff4538}.box--green{border-color:#23d160}.box--green:before{background:#23d160}.box--plum{border-color:#310736}.box--plum:before{background:#310736}.box--alpha{border-color:#05ffb0}.box--alpha:before{background:#05ffb0;color:#310736}.line{background:#4d4d4d;height:1px;position:relative}.line:before{background:#4d4d4d;border-radius:2px;color:#fff;content:"Line";display:inline-block;font-size:10px;height:15px;line-height:15px;margin-top:-6px;padding:0 4px;vertical-align:top}.line--red{background:#ff4538}.line--red:before{background:#ff4538}.square{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#e6e6e6;border-radius:3px;color:#4d4d4d;display:-webkit-box;display:-ms-flexbox;display:flex;height:75px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1.2;padding:0;text-align:center;width:75px}.square--plum{background:#310736;color:#fff}.square--plum:before{background:#310736}.square--alpha{background:#05ffb0;color:#310736}.square--alpha:before{background:#05ffb0}.square--pink{background:#ff3860;color:#fff}.square--pink:before{background:#ff3860}.block{background:#f2f2f2;border-radius:3px;color:#4d4d4d;display:block;line-height:1.2;padding:1em}.block strong{color:inherit}.block--alpha{background:#05ffb0;color:#310736}.block--beta{background:#00e7eb;color:#310736}.block--pink{background:#ff3860;color:#310736}.block--plum{background:#310736;color:#fff}.block--yellow{background:#ffdd57;color:#310736}.block--orange{background:#ff470f;color:#310736}.block--green{background:#23d160;color:#310736}.block--turquoise{background:#00d1b2;color:#310736}.block--blue{background:#3273dc;color:#310736}.block--purple{background:#b86bff;color:#310736}.block--red{background:#ff4538;color:#310736}.natural,.actual{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;border-radius:3px;line-height:1.2;padding:0.8em 1em}.natural{border:2px dotted #ff4538;color:#ff4538}.actual{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;background:#05ffb0;border:2px solid #05ffb0;color:#310736}.emoji{font-size:1.25em;vertical-align:middle}.bsa-shadow{background:-webkit-linear-gradient(rgba(0,0,0,0.1), transparent);background:linear-gradient(rgba(0,0,0,0.1), transparent);display:block;height:1rem;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:42px;-webkit-transform-origin:center top;transform-origin:center top}.bsa-cpc{background-color:#fff;font-size:16px;line-height:1.4;padding:10px;text-align:center}.bsa-cpc>div{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.bsa-cpc .default-ad{background-color:#00d1b2;border-radius:2px;color:#fff;font-size:12px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-left:10px;padding:0 4px;text-transform:uppercase}.bsa-cpc a._default_{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:20px;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.bsa-cpc a._default_:hover{text-decoration:underline}.bsa-cpc .default-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;height:20px;padding-right:10px}.bsa-cpc .default-image img{height:20px}.bsa-cpc .default-title{padding-right:5px}.bsa-cpc .default-title:after{content:" — "}@media (max-width: 799px){.bsa-cpc{border-top:1px solid #e6e6e6}}@media (min-width: 800px){.properties--single{padding-top:42px}.bsa-cpc{min-height:42px}.ola .bsa-cpc,.alo.is-fixed .bsa-cpc{left:226px;position:fixed;right:0;top:0}.alo{min-height:42px}}.ff{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#5f45bb;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:1rem;position:relative}.ff strong{color:currentColor}.ff .tag{margin-right:0.5em}.ff .button{position:relative;-webkit-transform-origin:center;transform-origin:center;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;white-space:nowrap}.ff:hover .button{-webkit-transform:scale(1.1);transform:scale(1.1)}.ff-background{bottom:0;left:0;position:absolute;right:0;top:0;background-image:url("/images/fortyfour-background.jpg");background-position:center center;background-size:cover;opacity:0.5}.ff-text{line-height:1.25;margin-right:0.5rem;position:relative}.ff-button{display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:34px;position:relative;width:145px}.ff-button img{max-height:100%}@media (min-width: 480px){.ff-text{margin-right:1rem}}.modal,.bsa-cpc{z-index:50}.menu{z-index:40}.footer{z-index:30}.properties,.list{z-index:20}.header{z-index:10} diff --git a/css/website.sass b/css/website.sass index 69f02109..f987d4fc 100644 --- a/css/website.sass +++ b/css/website.sass @@ -10,19 +10,31 @@ @import "../sass/controls" @import "../sass/menu" @import "../sass/header" +@import "../sass/footer" +@import "../sass/index" +@import "../sass/finder" +@import "../sass/heading" +@import "../sass/list" @import "../sass/property" @import "../sass/example" @import "../sass/modal" @import "../sass/keyframes" +@import "../sass/sister" @import "../sass/elements" +@import "../sass/ff" -.modal - z-index: 40 +.modal, +.bsa-cpc + z-index: 50 .menu + z-index: 40 + +.footer z-index: 30 +.properties, .list z-index: 20 diff --git a/favicons/android-chrome-192x192.png b/favicons/android-chrome-192x192.png index c1278213..db15a3f0 100644 Binary files a/favicons/android-chrome-192x192.png and b/favicons/android-chrome-192x192.png differ diff --git a/favicons/android-chrome-256x256.png b/favicons/android-chrome-256x256.png deleted file mode 100644 index af247cea..00000000 Binary files a/favicons/android-chrome-256x256.png and /dev/null differ diff --git a/favicons/android-chrome-384x384.png b/favicons/android-chrome-384x384.png new file mode 100644 index 00000000..80fded8f Binary files /dev/null and b/favicons/android-chrome-384x384.png differ diff --git a/favicons/apple-touch-icon.png b/favicons/apple-touch-icon.png index 106bea16..413a71b0 100644 Binary files a/favicons/apple-touch-icon.png and b/favicons/apple-touch-icon.png differ diff --git a/favicons/browserconfig.xml b/favicons/browserconfig.xml index 0f490be8..bb332413 100644 --- a/favicons/browserconfig.xml +++ b/favicons/browserconfig.xml @@ -1,9 +1,9 @@ - - - - - - #05ffb0 - - - + + + + + + #00d1b2 + + + diff --git a/favicons/favicon-16x16.png b/favicons/favicon-16x16.png index 44860b5b..fc95e100 100644 Binary files a/favicons/favicon-16x16.png and b/favicons/favicon-16x16.png differ diff --git a/favicons/favicon-32x32.png b/favicons/favicon-32x32.png index 91ff3de7..62a080ae 100644 Binary files a/favicons/favicon-32x32.png and b/favicons/favicon-32x32.png differ diff --git a/favicons/favicon.ico b/favicons/favicon.ico index a4c718eb..0da25233 100644 Binary files a/favicons/favicon.ico and b/favicons/favicon.ico differ diff --git a/favicons/manifest.json b/favicons/manifest.json index 14f99d0a..19a91f99 100644 --- a/favicons/manifest.json +++ b/favicons/manifest.json @@ -1,17 +1,18 @@ { - "name": "CSS Reference", - "icons": [ - { - "src": "\/favicons\/android-chrome-192x192.png?v=201611221819", - "sizes": "192x192", - "type": "image\/png" - }, - { - "src": "\/favicons\/android-chrome-256x256.png?v=201611221819", - "sizes": "256x256", - "type": "image\/png" - } - ], - "theme_color": "#05ffb0", - "display": "standalone" -} + "name": "CSS Reference", + "icons": [ + { + "src": "/favicons/android-chrome-192x192.png?v=201702181118", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/favicons/android-chrome-384x384.png?v=201702181118", + "sizes": "384x384", + "type": "image/png" + } + ], + "theme_color": "#00d1b2", + "background_color": "#00d1b2", + "display": "standalone" +} \ No newline at end of file diff --git a/favicons/mstile-150x150.png b/favicons/mstile-150x150.png index 7d199acb..0299b1a7 100644 Binary files a/favicons/mstile-150x150.png and b/favicons/mstile-150x150.png differ diff --git a/favicons/safari-pinned-tab.svg b/favicons/safari-pinned-tab.svg index adf8f1f4..8680fb8e 100644 --- a/favicons/safari-pinned-tab.svg +++ b/favicons/safari-pinned-tab.svg @@ -1,205 +1,243 @@ - + Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/flexbox.html b/flexbox.html new file mode 100644 index 00000000..ecf0fbfa --- /dev/null +++ b/flexbox.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Flexbox" +menu_list: "flexbox-list" +description: "use the CSS3 Flexbox capabilities" +--- + +{% include collections/flexbox.html %} diff --git a/images/bulma-logo.png b/images/bulma-logo.png new file mode 100644 index 00000000..a016c2b5 Binary files /dev/null and b/images/bulma-logo.png differ diff --git a/images/css-reference-icon.png b/images/css-reference-icon.png index 6af60156..4b95b2fb 100644 Binary files a/images/css-reference-icon.png and b/images/css-reference-icon.png differ diff --git a/images/css-reference-logo.png b/images/css-reference-logo.png index aa7ce1da..e40a352f 100644 Binary files a/images/css-reference-logo.png and b/images/css-reference-logo.png differ diff --git a/images/css-reference-share-dark.png b/images/css-reference-share-dark.png deleted file mode 100644 index 33e27c01..00000000 Binary files a/images/css-reference-share-dark.png and /dev/null differ diff --git a/images/css-reference-share.png b/images/css-reference-share.png index 96336dc9..ecca1567 100644 Binary files a/images/css-reference-share.png and b/images/css-reference-share.png differ diff --git a/images/css-reference-title.png b/images/css-reference-title.png deleted file mode 100644 index 9c8c7ede..00000000 Binary files a/images/css-reference-title.png and /dev/null differ diff --git a/images/css-reference-type.png b/images/css-reference-type.png index a0d684ba..66161ab9 100644 Binary files a/images/css-reference-type.png and b/images/css-reference-type.png differ diff --git a/images/fortyfour-background.jpg b/images/fortyfour-background.jpg new file mode 100644 index 00000000..538a70cb Binary files /dev/null and b/images/fortyfour-background.jpg differ diff --git a/images/html-reference-logo.png b/images/html-reference-logo.png new file mode 100644 index 00000000..7b41e3ca Binary files /dev/null and b/images/html-reference-logo.png differ diff --git a/index.html b/index.html index a2b393ef..282370a0 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ --- -# this is an empty front matter +template: index --- @@ -8,8 +8,10 @@ - {{site.title}} - {{site.description}} - + {{site.title}} - {{site.subtitle}} + + + @@ -30,31 +32,55 @@ {% include favicons.html %} - {% include menu.html %} -
    -
    -
    -

    - {{site.title}} -

    -

    - A free visual guide to CSS -

    -

    - Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

    - Contribute on GitHub -

    +
    +
    +

    + {{site.title}} icon + {{site.title}} type +

    +
    +
    + {% include carbon.html %} +
    +
    +

    + {{site.subtitle}} +

    +

    + Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. +

    +
    + {% include social/button-twitter.html %} + {% include social/button-facebook.html %} +
    +
    +
    +
    +
    + {% include ff.html %} +
    + +
    +
    + {% include components/finder.html %}
    -
    -
    - {% include lists/main-list.html %} -
    +
    + {% include sister.html %} {% include modals/share.html %} {% include google-fonts.html %} - {% include noscript.html %} diff --git a/javascript/collection.js b/javascript/collection.js new file mode 100644 index 00000000..f2c9923e --- /dev/null +++ b/javascript/collection.js @@ -0,0 +1,51 @@ +document.addEventListener('DOMContentLoaded', function() { + var $root = document.documentElement; + var $alo = document.getElementById('alo'); + var $bsaShadow = document.getElementById('bsaShadow'); + + var toTravel = $root.scrollHeight - window.innerHeight; + var fromTop = $alo.offsetTop; + var menuThrottle = null; + + if ($alo) { + document.addEventListener('scroll', function(event) { + var scrollTop = window.scrollY; + setBsa(scrollTop); + clearTimeout(menuThrottle); + throttle = setTimeout(setBsaShadows(scrollTop), 100); + }); + + function setBsaShadows(scrollTop) { + var distance = toTravel - scrollTop; + var topFactor = 1 - (distance / toTravel); + $bsaShadow.style.opacity = topFactor; + $bsaShadow.style.transform = 'scaleY(' + topFactor + ')'; + } + + function setBsa(scrollTop) { + if (scrollTop >= fromTop) { + $alo.classList.add('is-fixed'); + } else { + $alo.classList.remove('is-fixed'); + } + } + + setBsaShadows(0); + } + + // Hashes + var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a'); + + Array.prototype.forEach.call($hashes, function($el) { + $el.addEventListener('click', function(event) { + event.preventDefault(); + var propertyName = $el.dataset.propertyName; + var $target = document.getElementById($el.dataset.propertyName); + history.replaceState('', document.title, '#' + propertyName); + + if ($target) { + $target.scrollIntoView(); + } + }); + }); +}); diff --git a/javascript/index.js b/javascript/index.js index 2124d6e5..1b779de9 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -7,20 +7,4 @@ document.addEventListener('DOMContentLoaded', function() { history.replaceState('', document.title, ' '); window.scrollTo(0,0); }); - - // Hashes - var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a'); - - Array.prototype.forEach.call($hashes, function($el) { - $el.addEventListener('click', function(event) { - event.preventDefault(); - var propertyName = $el.dataset.propertyName; - var $target = document.getElementById($el.dataset.propertyName); - history.replaceState('', document.title, '#' + propertyName); - - if ($target) { - $target.scrollIntoView(); - } - }); - }); }); diff --git a/javascript/main.js b/javascript/main.js index 8f9a355c..088ec5a0 100644 --- a/javascript/main.js +++ b/javascript/main.js @@ -2,119 +2,128 @@ document.addEventListener('DOMContentLoaded', function() { var $root = document.documentElement; var template = $root.dataset.template; + // Load iframes + var $footerIframes = document.querySelectorAll('.footer-iframe'); + + Array.prototype.forEach.call($footerIframes, function($iframe) { + var src = $iframe.dataset.src; + $iframe.src = src; + }); + // Menu: Search var $searchInput = document.getElementById('menu-search-input'); var $menuList = document.getElementById('menu-list'); - var $menuItems = document.querySelectorAll('#menu-list li a'); + var $menuItems = document.querySelectorAll('.menu-item'); var isFocused = false; var isSearching = false; var isModaling = false; var currentMatch = -1; var matches = initializeMatches($menuItems); - $searchInput.addEventListener('focus', function(event) { - isSearching = true; - }); - - $searchInput.addEventListener('blur', function(event) { - isFocused = false; - if (this.value === '') { - globalReset(); - } - }); - - $searchInput.addEventListener('keyup', function(event) { - var query = this.value.toLowerCase(); - isFocused = (this === document.activeElement); - - if (isFocused) { + if ($searchInput) { + $searchInput.addEventListener('focus', function(event) { + isFocused = true; isSearching = true; + }); - if (query.length > 0) { - matches = []; - currentMatch = -1; - $menuList.classList.add('is-searching'); - Array.prototype.forEach.call($menuItems, function($el, index) { - var propertyName = $el.dataset.propertyName; - var isMatch = highlightQuery($el, propertyName, query); - - if (isMatch) { - matches.push({ - DOMIndex: index, - propertyName: propertyName, - }); - } - }); - } else { - $menuList.classList.remove('is-searching'); - Array.prototype.forEach.call($menuItems, function($el) { - $el.innerHTML = $el.dataset.propertyName; - }); + $searchInput.addEventListener('blur', function(event) { + isFocused = false; + if (this.value === '') { + globalReset(); } - } - }); + }); - window.addEventListener('click', function(event) { - if (!isFocused) { - isSearching = false; - cleanMenu($menuItems, false, true); - } - }); + $searchInput.addEventListener('keyup', function(event) { + var query = this.value.toLowerCase(); + isFocused = (this === document.activeElement); + + if (isFocused) { + isSearching = true; + + if (query.length > 0) { + matches = []; + currentMatch = -1; + $menuList.classList.add('is-searching'); + Array.prototype.forEach.call($menuItems, function($el, index) { + var propertyName = $el.dataset.propertyName; + var isMatch = highlightQuery($el, propertyName, query); + + if (isMatch) { + matches.push({ + DOMIndex: index, + propertyName: propertyName, + }); + } + }); + } else { + $menuList.classList.remove('is-searching'); + Array.prototype.forEach.call($menuItems, function($el) { + var $elName = $el.querySelector('.item-name'); + $elName.innerHTML = $el.dataset.propertyName; + }); + } + } + }); - window.addEventListener('keydown', function(event) { - var key = event.code || event.key || false; + window.addEventListener('click', function(event) { + if (!isFocused) { + isSearching = false; + cleanMenu($menuItems, false, true); + } + }); - switch (key) { - case 'Enter': - if (isSearching && currentMatch > -1) { - var propertyName = matches[currentMatch].propertyName; + window.addEventListener('keydown', function(event) { + var key = event.code || event.key || false; - if (template === 'index') { + switch (key) { + case 'Enter': + if (isSearching && currentMatch > -1) { event.preventDefault(); + var propertyName = matches[currentMatch].propertyName; var $target = document.getElementById(propertyName); if ($target) { $target.scrollIntoView(); + } else { + window.location = window.location.origin + '/property/' + propertyName; } - } else { - window.location = window.location.origin + '/#' + propertyName; } - } - break; - case 'Escape': - if (isModaling) { - closeModal(); - } else { - isSearching = false; - globalReset(); - } - break; - case 'ArrowUp': - case 'ArrowDown': - if (isSearching) { - event.preventDefault(); - if (isFocused) { - $searchInput.blur(); + break; + case 'Escape': + if (isModaling) { + closeModal(); + } else { + isSearching = false; + globalReset(); } - var increment = (key === 'ArrowDown'); - currentMatch = navigateMenu($menuItems, matches, currentMatch, increment); + break; + case 'ArrowUp': + case 'ArrowDown': + if (isSearching) { + event.preventDefault(); + if (isFocused) { + $searchInput.blur(); + } + var increment = (key === 'ArrowDown'); + currentMatch = navigateMenu($menuItems, matches, currentMatch, increment); - if (currentMatch === -1) { - $searchInput.focus(); + if (currentMatch === -1) { + $searchInput.focus(); + } + break; } - break; } - } - }); + }); - function globalReset() { - isFocused = false; - $searchInput.value = ''; - $searchInput.blur(); - currentMatch = -1; - matches = initializeMatches($menuItems); - $menuList.classList.remove('is-searching'); - cleanMenu($menuItems, true, true); + function globalReset() { + isFocused = false; + $searchInput.value = ''; + $searchInput.blur(); + currentMatch = -1; + matches = initializeMatches($menuItems); + $menuList.classList.remove('is-searching'); + cleanMenu($menuItems, true, true); + } } // Menu: Shadows @@ -123,60 +132,64 @@ document.addEventListener('DOMContentLoaded', function() { var $menuShadowBottom = document.getElementById('menu-shadow-bottom'); var menuThrottle = null; - $menuUl.addEventListener('scroll', function(event) { - clearTimeout(menuThrottle); - throttle = setTimeout(setMenuShadows(), 100); - }); + if ($menuUl) { + $menuUl.addEventListener('scroll', function(event) { + clearTimeout(menuThrottle); + throttle = setTimeout(setMenuShadows(), 100); + }); - function setMenuShadows() { - var scrollTop = $menuUl.scrollTop; - var height = $menuUl.offsetHeight; - var fullHeight = $menuUl.scrollHeight; - var maxScroll = fullHeight - height; - var threshold = 200; - var topFactor = 0; - var bottomFactor = 1; - - if (scrollTop > threshold) { - topFactor = 1; - } else { - topFactor = scrollTop / threshold; - } + function setMenuShadows() { + var scrollTop = $menuUl.scrollTop; + var height = $menuUl.offsetHeight; + var fullHeight = $menuUl.scrollHeight; + var maxScroll = fullHeight - height; + var threshold = 200; + var topFactor = 0; + var bottomFactor = 1; + + if (scrollTop > threshold) { + topFactor = 1; + } else { + topFactor = scrollTop / threshold; + } - if (scrollTop < maxScroll - threshold) { - bottomFactor = 1; - } else { - var fromBottom = maxScroll - scrollTop; - bottomFactor = fromBottom / threshold; - } + if (scrollTop < maxScroll - threshold) { + bottomFactor = 1; + } else { + var fromBottom = maxScroll - scrollTop; + bottomFactor = fromBottom / threshold; + } - $menuShadowTop.style.opacity = topFactor; - $menuShadowTop.style.transform = 'scaleY(' + topFactor + ')'; - $menuShadowBottom.style.opacity = bottomFactor; - $menuShadowBottom.style.transform = 'scaleY(' + bottomFactor + ')'; + $menuShadowTop.style.opacity = topFactor; + $menuShadowTop.style.transform = 'scaleY(' + topFactor + ')'; + $menuShadowBottom.style.opacity = bottomFactor; + $menuShadowBottom.style.transform = 'scaleY(' + bottomFactor + ')'; + } + setMenuShadows(); } - setMenuShadows(); // Menu: Mobile var $menuNav = document.getElementById('menu-nav'); var $menuNavOpen = document.getElementById('menu-nav-open'); var $menuNavClose = document.getElementById('menu-nav-close'); - $menuNavOpen.addEventListener('click', function(event) { - $menuNav.classList.add('is-active'); - }); + if ($menuNav) { + $menuNavOpen.addEventListener('click', function(event) { + $menuNav.classList.add('is-active'); + }); - $menuNavClose.addEventListener('click', function(event) { - $menuNav.classList.remove('is-active'); - }); + $menuNavClose.addEventListener('click', function(event) { + $menuNav.classList.remove('is-active'); + }); - Array.prototype.forEach.call($menuItems, function($menuItem, index) { - $menuItem.addEventListener('click', function(event) { - if (window.innerWidth < 800) { - $menuNav.classList.remove('is-active'); - } + Array.prototype.forEach.call($menuItems, function($menuItem, index) { + $menuItem.addEventListener('click', function(event) { + if (window.innerWidth < 800) { + $menuNav.classList.remove('is-active'); + } + }); }); - }); + } // Property: Copy to clipboard var clipboard = new Clipboard('.example-value'); @@ -196,14 +209,14 @@ document.addEventListener('DOMContentLoaded', function() { var $propertyShares = document.querySelectorAll('.property-share'); var $modalInput = document.getElementById('modal-input'); var baseURL = '' + window.location.origin + window.location.pathname; - baseURL = 'http://cssreference.io/'; + baseURL = 'https://cssreference.io/'; var facebookURL = 'https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcssreference.io'; var twitterURL = 'https://twitter.com/intent/tweet?url=http%3A%2F%2Fcssreference.io&text=CSS%20Reference%3A%20a%20visual%20guide%20to%20the%20most%20popular%20%23CSS%20properties'; Array.prototype.forEach.call($propertyShares, function($el, index) { $el.addEventListener('click', function(e) { var propertyName = $el.dataset.propertyName; - var shareURL = baseURL + '#' + propertyName; + var shareURL = baseURL + 'property/' + propertyName; $modalInput.value = shareURL; encodedURL = encodeURIComponent(shareURL); facebookURL = 'https://www.facebook.com/sharer.php?u=' + encodedURL; @@ -291,6 +304,23 @@ document.addEventListener('DOMContentLoaded', function() { $target.classList.toggle('is-fixed'); }); }); + + // Hashes + var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a'); + + Array.prototype.forEach.call($hashes, function($el) { + $el.addEventListener('click', function(event) { + event.preventDefault(); + var propertyName = $el.dataset.propertyName; + var $target = document.getElementById($el.dataset.propertyName); + + if ($target) { + $target.scrollIntoView(); + } else { + window.location = window.location.origin + '/property/' + propertyName; + } + }); + }); }); // Pure functions @@ -310,8 +340,9 @@ function initializeMatches($menuItems) { function cleanMenu($menuItems, highlight, selection) { Array.prototype.forEach.call($menuItems, function($el, index) { + var $elName = $el.querySelector('.item-name'); if (highlight) { - $el.innerHTML = $el.dataset.propertyName; + $elName.innerHTML = $el.dataset.propertyName; $el.classList.remove('is-highlighted'); } if (selection) { @@ -342,16 +373,17 @@ function navigateMenu($menuItems, matches, currentIndex, increment = true) { function highlightQuery($el, propertyName, query) { var queryIndex = propertyName.indexOf(query); + var $elName = $el.querySelector('.item-name'); if (queryIndex >= 0) { var before = propertyName.substring(0, queryIndex); var highlight = '' + propertyName.substring(queryIndex, queryIndex + query.length) + ''; var after = propertyName.substring(queryIndex + query.length); - $el.innerHTML = before + highlight + after; + $elName.innerHTML = before + highlight + after; $el.classList.add('is-highlighted'); return true; } else { - $el.innerHTML = propertyName; + $elName.innerHTML = propertyName; $el.classList.remove('is-highlighted'); return false; } diff --git a/javascript/single.js b/javascript/single.js index e01420d2..116f7e1c 100644 --- a/javascript/single.js +++ b/javascript/single.js @@ -1,2 +1,23 @@ document.addEventListener('DOMContentLoaded', function() { + var $root = document.documentElement; + var toTravel = $root.scrollHeight - window.innerHeight; + var $bsaShadow = document.getElementById('bsaShadow'); + var menuThrottle = null; + + if ($bsaShadow) { + document.addEventListener('scroll', function(event) { + clearTimeout(menuThrottle); + throttle = setTimeout(setBsaShadows(), 100); + }); + + function setBsaShadows() { + var scrollTop = window.scrollY; + var distance = toTravel - scrollTop; + var topFactor = 1 - (distance / toTravel); + $bsaShadow.style.opacity = topFactor; + $bsaShadow.style.transform = 'scaleY(' + topFactor + ')'; + } + + setBsaShadows(); + } }); diff --git a/package.json b/package.json index 2e89a85b..70161fa0 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build-autoprefix": "postcss --use autoprefixer --output css/website.css css/website.css", "build-clean": "rm css/website.css", "build-sass": "node-sass --output-style compressed css/website.sass css/website.css", - "develop": "node-sass --output-style expanded css/website.sass css/website.css", + "develop": "node-sass css/website.sass css/website.css", "start": "npm run develop -- --watch" }, "keywords": [ @@ -16,7 +16,7 @@ "sass", "jekyll" ], - "author": "Jeremy Thomas (http://jgthms.com)", + "author": "Jeremy Thomas (https://jgthms.com)", "license": "ISC", "devDependencies": { "autoprefixer": "^6.5.3", diff --git a/positioning.html b/positioning.html new file mode 100644 index 00000000..65c198ad --- /dev/null +++ b/positioning.html @@ -0,0 +1,8 @@ +--- +layout: collection +collection_name: "Positioning" +menu_list: "positioning-list" +description: "position elements manually in HTML" +--- + +{% include collections/positioning.html %} diff --git a/property/align-content/index.html b/property/align-content/index.html index e216e4c6..d34b1859 100644 --- a/property/align-content/index.html +++ b/property/align-content/index.html @@ -6,15 +6,19 @@

    - #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.

    +

    Defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid items.

    @@ -23,7 +27,7 @@

    - +
    @@ -37,6 +41,16 @@

    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.

    +
      +
    • The first line is 100px high
      • +
    • The second line is 50px high
      • +
    • The remaing space is 150px
      • +
    +

    This remaining space is distributed equally amongst the two lines:

    +
      +
    • The first line is now 175px high
      • +
    • The second line is now 125px high
      • +

    @@ -44,10 +58,11 @@

    +

    @@ -57,7 +72,7 @@

    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.

    +

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

    @@ -65,11 +80,11 @@

    - +

    @@ -79,7 +94,7 @@

    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.

    +

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

    @@ -87,11 +102,11 @@

    - +

    @@ -101,7 +116,7 @@

    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.

    +

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

    @@ -109,11 +124,11 @@

    - +

    @@ -131,11 +146,11 @@

    - +

    @@ -153,11 +168,11 @@

    - +

    diff --git a/property/align-items/index.html b/property/align-items/index.html index 160f580e..f08b2ffa 100644 --- a/property/align-items/index.html +++ b/property/align-items/index.html @@ -6,12 +6,16 @@

    - #align-items + #align-items

    Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

    @@ -43,7 +47,7 @@

    @@ -58,7 +62,7 @@

    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.

    +

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

    @@ -66,7 +70,7 @@

    @@ -89,7 +93,7 @@

    @@ -112,7 +116,7 @@

    @@ -135,7 +139,7 @@

    diff --git a/property/align-self/index.html b/property/align-self/index.html index fec214ae..0dc04ddd 100644 --- a/property/align-self/index.html +++ b/property/align-self/index.html @@ -6,12 +6,16 @@

    - #align-self + #align-self

    Works like align-items, but applies only to a single flexbox item, instead of all of them.

    @@ -23,9 +27,32 @@

    - + +
    +
    +

    + default + + + align-self: auto; +

    +
    +

    The target will use the value of align-items.

    + +
    +
    + + + + +

    @@ -34,7 +61,7 @@

    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.

    +

    If the container has align-items: center and the target has align-self: 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.

    @@ -43,7 +70,7 @@

    @@ -57,7 +84,7 @@

    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.

    +

    If the container has align-items: center and the target has align-self: 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.

    @@ -66,11 +93,11 @@

    - +

    @@ -80,7 +107,7 @@

    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.

    +

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

    By default, this means it will be vertically centered.

    @@ -89,12 +116,12 @@

    - +

    @@ -104,7 +131,7 @@

    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.

    +

    If the container has align-items: center and the target has align-self: 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.

    @@ -113,11 +140,11 @@

    - +

    @@ -127,7 +154,7 @@

    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.

    +

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

    @@ -135,11 +162,11 @@

    - +

    diff --git a/property/animation-delay/index.html b/property/animation-delay/index.html index c1e8c8ed..6bebc18d 100644 --- a/property/animation-delay/index.html +++ b/property/animation-delay/index.html @@ -6,12 +6,16 @@

    - #animation-delay + #animation-delay

    Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    @@ -109,7 +113,7 @@

    diff --git a/property/animation-direction/index.html b/property/animation-direction/index.html index 19cf567d..a11cdafb 100644 --- a/property/animation-direction/index.html +++ b/property/animation-direction/index.html @@ -6,12 +6,16 @@

    - #animation-direction + #animation-direction

    Defines in which direction the animation is played.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    @@ -109,7 +113,7 @@

    diff --git a/property/animation-duration/index.html b/property/animation-duration/index.html index f260a26a..f748761b 100644 --- a/property/animation-duration/index.html +++ b/property/animation-duration/index.html @@ -6,12 +6,16 @@

    - #animation-duration + #animation-duration

    Defines how long the animation lasts.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    diff --git a/property/animation-fill-mode/index.html b/property/animation-fill-mode/index.html index 53095c46..2420f38a 100644 --- a/property/animation-fill-mode/index.html +++ b/property/animation-fill-mode/index.html @@ -6,12 +6,16 @@

    - #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.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    @@ -109,7 +113,7 @@

    diff --git a/property/animation-iteration-count/index.html b/property/animation-iteration-count/index.html index dc3de769..d5d5a0a9 100644 --- a/property/animation-iteration-count/index.html +++ b/property/animation-iteration-count/index.html @@ -6,12 +6,16 @@

    - #animation-iteration-count + #animation-iteration-count

    Defines how many times the animation is played.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    diff --git a/property/animation-name/index.html b/property/animation-name/index.html index eb404f50..3ae3d9cb 100644 --- a/property/animation-name/index.html +++ b/property/animation-name/index.html @@ -6,12 +6,16 @@

    - #animation-name + #animation-name

    Defines which animation keyframes to use.

    @@ -46,7 +50,7 @@

    @@ -76,7 +80,7 @@

    @@ -105,7 +109,7 @@

    diff --git a/property/animation-play-state/index.html b/property/animation-play-state/index.html index 0335820d..a200b1a1 100644 --- a/property/animation-play-state/index.html +++ b/property/animation-play-state/index.html @@ -6,12 +6,16 @@

    - #animation-play-state + #animation-play-state

    Defines if an animation is playing or not.

    @@ -46,7 +50,7 @@

    @@ -79,7 +83,7 @@

    diff --git a/property/animation-timing-function/index.html b/property/animation-timing-function/index.html index 2fb7ac0c..fd376abe 100644 --- a/property/animation-timing-function/index.html +++ b/property/animation-timing-function/index.html @@ -6,12 +6,16 @@

    - #animation-timing-function + #animation-timing-function

    Defines how the values between the start and the end of the animation are calculated.

    @@ -46,7 +50,7 @@

    @@ -67,7 +71,7 @@

    @@ -88,7 +92,7 @@

    @@ -110,7 +114,7 @@

    @@ -131,7 +135,7 @@

    @@ -152,7 +156,7 @@

    @@ -173,7 +177,7 @@

    @@ -194,7 +198,7 @@

    diff --git a/property/animation/index.html b/property/animation/index.html index c84e2175..2fc2366a 100644 --- a/property/animation/index.html +++ b/property/animation/index.html @@ -3,18 +3,22 @@ property_name: animation --- -
    +

    - #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.

    +

    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 index d6769da3..4ca763c1 100644 --- a/property/background-attachment/index.html +++ b/property/background-attachment/index.html @@ -6,12 +6,16 @@

    - #background-attachment + #background-attachment

    Defines how the background image will behave when scrolling the page.

    diff --git a/property/background-clip/index.html b/property/background-clip/index.html index 85d4000b..66845b7d 100644 --- a/property/background-clip/index.html +++ b/property/background-clip/index.html @@ -6,12 +6,15 @@

    - #background-clip + #background-clip

    Defines how far the background should extend within the element.

    diff --git a/property/background-color/index.html b/property/background-color/index.html index eee2e172..875824d0 100644 --- a/property/background-color/index.html +++ b/property/background-color/index.html @@ -6,12 +6,15 @@

    - #background-color + #background-color

    Defines the color of the element's background.

    diff --git a/property/background-image/index.html b/property/background-image/index.html index 515bbc98..b5fec80b 100644 --- a/property/background-image/index.html +++ b/property/background-image/index.html @@ -6,12 +6,15 @@

    - #background-image + #background-image

    Defines an image as the background of the element.

    diff --git a/property/background-origin/index.html b/property/background-origin/index.html index c17da41e..60edabf9 100644 --- a/property/background-origin/index.html +++ b/property/background-origin/index.html @@ -6,12 +6,15 @@

    - #background-origin + #background-origin

    Defines the origin of the background image.

    diff --git a/property/background-position/index.html b/property/background-position/index.html index 0a76fe37..d4faac4e 100644 --- a/property/background-position/index.html +++ b/property/background-position/index.html @@ -6,12 +6,15 @@

    - #background-position + #background-position

    Defines the position of the background image.

    diff --git a/property/background-repeat/index.html b/property/background-repeat/index.html index 24792749..e55599a3 100644 --- a/property/background-repeat/index.html +++ b/property/background-repeat/index.html @@ -6,12 +6,15 @@

    - #background-repeat + #background-repeat

    Defines how the background image repeats itself across the element's background, starting from the background position.

    diff --git a/property/background-size/index.html b/property/background-size/index.html index 2f3f33c5..a9188a46 100644 --- a/property/background-size/index.html +++ b/property/background-size/index.html @@ -6,12 +6,15 @@

    - #background-size + #background-size

    Defines the size of the background image.

    diff --git a/property/background/index.html b/property/background/index.html index 5ae208e2..ed293839 100644 --- a/property/background/index.html +++ b/property/background/index.html @@ -3,18 +3,21 @@ property_name: background --- -
    +

    - #background + #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.

    diff --git a/property/border-bottom-color/index.html b/property/border-bottom-color/index.html index c9911169..71e1012d 100644 --- a/property/border-bottom-color/index.html +++ b/property/border-bottom-color/index.html @@ -6,12 +6,12 @@

    - #border-bottom-color + #border-bottom-color

    Like border-color, but for the bottom border only.

    diff --git a/property/border-bottom-left-radius/index.html b/property/border-bottom-left-radius/index.html index b5866104..c4e028d9 100644 --- a/property/border-bottom-left-radius/index.html +++ b/property/border-bottom-left-radius/index.html @@ -6,12 +6,12 @@

    - #border-bottom-left-radius + #border-bottom-left-radius

    Defines the radius of the bottom left corner.

    diff --git a/property/border-bottom-right-radius/index.html b/property/border-bottom-right-radius/index.html index 7038a163..62fdf7bf 100644 --- a/property/border-bottom-right-radius/index.html +++ b/property/border-bottom-right-radius/index.html @@ -6,12 +6,12 @@

    - #border-bottom-right-radius + #border-bottom-right-radius

    Defines the radius of the bottom right corner.

    diff --git a/property/border-bottom-style/index.html b/property/border-bottom-style/index.html index 3cf66b68..0e0eb519 100644 --- a/property/border-bottom-style/index.html +++ b/property/border-bottom-style/index.html @@ -6,12 +6,12 @@

    - #border-bottom-style + #border-bottom-style

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

    diff --git a/property/border-bottom-width/index.html b/property/border-bottom-width/index.html index 069d9e62..0d64005c 100644 --- a/property/border-bottom-width/index.html +++ b/property/border-bottom-width/index.html @@ -6,12 +6,15 @@

    - #border-bottom-width + #border-bottom-width

    Like border-width, but for the bottom border only.

    diff --git a/property/border-bottom/index.html b/property/border-bottom/index.html index 1afbc049..6e195e01 100644 --- a/property/border-bottom/index.html +++ b/property/border-bottom/index.html @@ -3,18 +3,18 @@ property_name: border-bottom --- -
    +

    - #border-bottom + #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.

    diff --git a/property/border-collapse/index.html b/property/border-collapse/index.html index 852419f7..40b82779 100644 --- a/property/border-collapse/index.html +++ b/property/border-collapse/index.html @@ -6,12 +6,12 @@

    - #border-collapse + #border-collapse

    Defines whether table borders should be separated or collapsed.

    diff --git a/property/border-color/index.html b/property/border-color/index.html index 117679b1..39bfd29f 100644 --- a/property/border-color/index.html +++ b/property/border-color/index.html @@ -6,12 +6,12 @@

    - #border-color + #border-color

    Defines the color of the element's borders.

    diff --git a/property/border-left-color/index.html b/property/border-left-color/index.html index c4abd6c3..6c594f40 100644 --- a/property/border-left-color/index.html +++ b/property/border-left-color/index.html @@ -6,12 +6,12 @@

    - #border-left-color + #border-left-color

    Like border-color, but for the left border only.

    diff --git a/property/border-left-style/index.html b/property/border-left-style/index.html index 75f0581c..0f738acd 100644 --- a/property/border-left-style/index.html +++ b/property/border-left-style/index.html @@ -6,12 +6,12 @@

    - #border-left-style + #border-left-style

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

    diff --git a/property/border-left-width/index.html b/property/border-left-width/index.html index 00e1fc19..7aa4f96c 100644 --- a/property/border-left-width/index.html +++ b/property/border-left-width/index.html @@ -6,12 +6,15 @@

    - #border-left-width + #border-left-width

    Like border-width, but for the left border only.

    diff --git a/property/border-left/index.html b/property/border-left/index.html index f65786e4..30e7b498 100644 --- a/property/border-left/index.html +++ b/property/border-left/index.html @@ -3,18 +3,18 @@ property_name: border-left --- -
    +

    - #border-left + #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.

    diff --git a/property/border-radius/index.html b/property/border-radius/index.html index 71985b68..fb2ad0a2 100644 --- a/property/border-radius/index.html +++ b/property/border-radius/index.html @@ -6,12 +6,12 @@

    - #border-radius + #border-radius

    Defines the radius of the element's corners.

    diff --git a/property/border-right-color/index.html b/property/border-right-color/index.html index ca1e0117..fb782782 100644 --- a/property/border-right-color/index.html +++ b/property/border-right-color/index.html @@ -6,12 +6,12 @@

    - #border-right-color + #border-right-color

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

    diff --git a/property/border-right-style/index.html b/property/border-right-style/index.html index 32a23580..8fcbba85 100644 --- a/property/border-right-style/index.html +++ b/property/border-right-style/index.html @@ -6,12 +6,12 @@

    - #border-right-style + #border-right-style

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

    diff --git a/property/border-right-width/index.html b/property/border-right-width/index.html index 475690af..408b4899 100644 --- a/property/border-right-width/index.html +++ b/property/border-right-width/index.html @@ -6,12 +6,15 @@

    - #border-right-width + #border-right-width

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

    diff --git a/property/border-right/index.html b/property/border-right/index.html index f2f9d605..b7239139 100644 --- a/property/border-right/index.html +++ b/property/border-right/index.html @@ -3,18 +3,18 @@ property_name: border-right --- -
    +

    - #border-right + #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.

    diff --git a/property/border-style/index.html b/property/border-style/index.html index 2d0a4bf5..8d5c1e28 100644 --- a/property/border-style/index.html +++ b/property/border-style/index.html @@ -6,12 +6,12 @@

    - #border-style + #border-style

    Defines the style of the element's borders.

    diff --git a/property/border-top-color/index.html b/property/border-top-color/index.html index a81e55f4..bc481724 100644 --- a/property/border-top-color/index.html +++ b/property/border-top-color/index.html @@ -6,12 +6,12 @@

    - #border-top-color + #border-top-color

    Like border-color, but for the top border only.

    diff --git a/property/border-top-left-radius/index.html b/property/border-top-left-radius/index.html index 5fb4258c..a81c1421 100644 --- a/property/border-top-left-radius/index.html +++ b/property/border-top-left-radius/index.html @@ -6,12 +6,12 @@

    - #border-top-left-radius + #border-top-left-radius

    Defines the radius of the top left corner.

    diff --git a/property/border-top-right-radius/index.html b/property/border-top-right-radius/index.html index 53bffea9..5ca43bb8 100644 --- a/property/border-top-right-radius/index.html +++ b/property/border-top-right-radius/index.html @@ -6,12 +6,12 @@

    - #border-top-right-radius + #border-top-right-radius

    Defines the radius of the top right corner.

    diff --git a/property/border-top-style/index.html b/property/border-top-style/index.html index 8f54f338..163bef8b 100644 --- a/property/border-top-style/index.html +++ b/property/border-top-style/index.html @@ -6,12 +6,12 @@

    - #border-top-style + #border-top-style

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

    diff --git a/property/border-top-width/index.html b/property/border-top-width/index.html index 88d17bce..734f16ac 100644 --- a/property/border-top-width/index.html +++ b/property/border-top-width/index.html @@ -6,12 +6,15 @@

    - #border-top-width + #border-top-width

    Like border-width, but for the top border only.

    diff --git a/property/border-top/index.html b/property/border-top/index.html index 46cc5b35..c937560b 100644 --- a/property/border-top/index.html +++ b/property/border-top/index.html @@ -3,18 +3,18 @@ property_name: border-top --- -
    +

    - #border-top + #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.

    diff --git a/property/border-width/index.html b/property/border-width/index.html index 36130b0f..5e8c1831 100644 --- a/property/border-width/index.html +++ b/property/border-width/index.html @@ -6,12 +6,15 @@

    - #border-width + #border-width

    Defines the width of the element's borders.

    diff --git a/property/border/index.html b/property/border/index.html index 0b045e63..30dcd0bb 100644 --- a/property/border/index.html +++ b/property/border/index.html @@ -3,18 +3,18 @@ property_name: border --- -
    +

    - #border + #border

    -

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

    +

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

    diff --git a/property/bottom/index.html b/property/bottom/index.html index da12bf16..2617c7f1 100644 --- a/property/bottom/index.html +++ b/property/bottom/index.html @@ -6,12 +6,15 @@

    - #bottom + #bottom

    Defines the position of the element according to its bottom edge.

    diff --git a/property/box-shadow/index.html b/property/box-shadow/index.html index 8777914d..39b37735 100644 --- a/property/box-shadow/index.html +++ b/property/box-shadow/index.html @@ -6,12 +6,13 @@

    - #box-shadow + #box-shadow

    Defines the shadow of the element.

    diff --git a/property/box-sizing/index.html b/property/box-sizing/index.html index 7669e357..cda0fbae 100644 --- a/property/box-sizing/index.html +++ b/property/box-sizing/index.html @@ -6,12 +6,16 @@

    - #box-sizing + #box-sizing

    Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

    @@ -45,7 +49,7 @@

    @@ -62,7 +66,7 @@

    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.

    +

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

    @@ -70,7 +74,7 @@

    diff --git a/property/clear/index.html b/property/clear/index.html index d96fd72c..eabb5b4d 100644 --- a/property/clear/index.html +++ b/property/clear/index.html @@ -6,12 +6,12 @@

    - #clear + #clear

    Moves the element after all the preceding floating elements.

    @@ -22,7 +22,7 @@

    - +
    @@ -42,7 +42,7 @@

    @@ -63,11 +63,11 @@

    - +

    @@ -85,11 +85,11 @@

    - +

    @@ -107,11 +107,11 @@

    - +

    diff --git a/property/color/index.html b/property/color/index.html index 6bd2fa38..65912132 100644 --- a/property/color/index.html +++ b/property/color/index.html @@ -6,12 +6,16 @@

    - #color + #color

    Defines the color of the text.

    diff --git a/property/column-count/index.html b/property/column-count/index.html index 80052a51..d968059d 100644 --- a/property/column-count/index.html +++ b/property/column-count/index.html @@ -6,12 +6,12 @@

    - #column-count + #column-count

    Defines the number of columns of the element.

    @@ -41,7 +41,7 @@

    @@ -62,7 +62,7 @@

    diff --git a/property/column-gap/index.html b/property/column-gap/index.html index c502a48d..cdf012f6 100644 --- a/property/column-gap/index.html +++ b/property/column-gap/index.html @@ -6,12 +6,12 @@

    - #column-gap + #column-gap

    Defines the gap between the columns of the element.

    @@ -42,7 +42,7 @@

    @@ -64,7 +64,7 @@

    diff --git a/property/column-width/index.html b/property/column-width/index.html index 69249f98..89accaa4 100644 --- a/property/column-width/index.html +++ b/property/column-width/index.html @@ -6,12 +6,12 @@

    - #column-width + #column-width

    Defines the number of columns of the element.

    @@ -41,7 +41,7 @@

    @@ -63,7 +63,7 @@

    diff --git a/property/content/index.html b/property/content/index.html index 4cc5fb23..5cb5b7f6 100644 --- a/property/content/index.html +++ b/property/content/index.html @@ -6,12 +6,12 @@

    - #content + #content

    Defines the text content of the :before and :after pseudo-elements.

    @@ -73,7 +73,7 @@

    Hello world

    - +
    diff --git a/property/cursor/index.html b/property/cursor/index.html index 987b5c66..eb75f957 100644 --- a/property/cursor/index.html +++ b/property/cursor/index.html @@ -6,12 +6,12 @@

    - #cursor + #cursor

    Sets the mouse cursor when hovering the element.

    @@ -176,10 +176,10 @@

    - cursor: helpe-resize; + cursor: help-resize;

    -

    helpe-resize

    +

    help-resize

    @@ -187,10 +187,10 @@

    - +

    diff --git a/property/display/index.html b/property/display/index.html index f46903ca..423d2cc0 100644 --- a/property/display/index.html +++ b/property/display/index.html @@ -6,12 +6,12 @@

    - #display + #display

    Sets the display behavior of the element.

    @@ -22,7 +22,7 @@

    - +
    @@ -41,10 +41,10 @@

    - +

    @@ -63,10 +63,10 @@

    - +

    @@ -84,10 +84,10 @@

    - +

    @@ -109,10 +109,10 @@

    - +

    @@ -130,10 +130,10 @@

    - +

    @@ -152,10 +152,10 @@

    - +

    @@ -174,10 +174,10 @@

    - +

    @@ -196,10 +196,10 @@

    - +

    @@ -218,10 +218,10 @@

    - +

    @@ -243,10 +243,57 @@

    - + +

    +
    +
    +

    + + + display: grid; +

    +
    +

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

    +

    Its child elements will be turned into grid items.

    + +
    +
    + + + +
    +
    +
    +

    + + + display: inline-grid; +

    +
    +

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

    +
    • inline because the element behaves like simple text, and inserts itself in a block of text
    • grid 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 index c583ac3b..e49eae1d 100644 --- a/property/flex-basis/index.html +++ b/property/flex-basis/index.html @@ -6,12 +6,16 @@

    - #flex-basis + #flex-basis

    Defines the initial size of a flexbox item.

    @@ -42,7 +46,7 @@

    @@ -64,7 +68,7 @@

    diff --git a/property/flex-direction/index.html b/property/flex-direction/index.html index 7f4c83e5..468f56b0 100644 --- a/property/flex-direction/index.html +++ b/property/flex-direction/index.html @@ -6,12 +6,16 @@

    - #flex-direction + #flex-direction

    Defines how flexbox items are ordered within a flexbox container.

    @@ -42,7 +46,7 @@

    @@ -63,7 +67,7 @@

    @@ -84,7 +88,7 @@

    @@ -105,7 +109,7 @@

    diff --git a/property/flex-flow/index.html b/property/flex-flow/index.html index 149033ef..967b1582 100644 --- a/property/flex-flow/index.html +++ b/property/flex-flow/index.html @@ -3,18 +3,22 @@ property_name: flex-flow --- -
    +

    - #flex-flow + #flex-flow

    -

    Shorthand property for flex-direction and flex-flow.

    +

    Shorthand property for flex-direction and flex-wrap.

    diff --git a/property/flex-grow/index.html b/property/flex-grow/index.html index 8b65aa8c..7a65f363 100644 --- a/property/flex-grow/index.html +++ b/property/flex-grow/index.html @@ -6,12 +6,16 @@

    - #flex-grow + #flex-grow

    Defines how much a flexbox item should grow if there's space available.

    @@ -42,7 +46,7 @@

    @@ -63,11 +67,11 @@

    - +

    @@ -86,11 +90,11 @@

    - +

    diff --git a/property/flex-shrink/index.html b/property/flex-shrink/index.html index f3a6b7b6..25753678 100644 --- a/property/flex-shrink/index.html +++ b/property/flex-shrink/index.html @@ -6,12 +6,16 @@

    - #flex-shrink + #flex-shrink

    Defines how much a flexbox item should shrink if there's not enough space available.

    @@ -43,7 +47,7 @@

    @@ -65,11 +69,11 @@

    - +

    @@ -88,11 +92,11 @@

    - +

    diff --git a/property/flex-wrap/index.html b/property/flex-wrap/index.html index 619c65cc..6f7c54db 100644 --- a/property/flex-wrap/index.html +++ b/property/flex-wrap/index.html @@ -6,12 +6,16 @@

    - #flex-wrap + #flex-wrap

    Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

    @@ -42,7 +46,7 @@

    @@ -63,7 +67,7 @@

    @@ -84,7 +88,7 @@

    diff --git a/property/float/index.html b/property/float/index.html index 22970967..973c03ef 100644 --- a/property/float/index.html +++ b/property/float/index.html @@ -6,12 +6,12 @@

    - #float + #float

    Pushes the element to either the left or right side. The following siblings will wrap around the floating element

    @@ -41,10 +41,10 @@

    - +

    @@ -62,10 +62,10 @@

    - +

    @@ -83,10 +83,10 @@

    - +

    diff --git a/property/font-family/index.html b/property/font-family/index.html index 8d86cbb3..da50c204 100644 --- a/property/font-family/index.html +++ b/property/font-family/index.html @@ -6,12 +6,15 @@

    - #font-family + #font-family

    @@ -46,7 +49,7 @@

    Hello world
    The quick brown fox jumps over the lazy dog

    - +
    diff --git a/property/font-size/index.html b/property/font-size/index.html index 533f0984..0b1b0e57 100644 --- a/property/font-size/index.html +++ b/property/font-size/index.html @@ -6,12 +6,15 @@

    - #font-size + #font-size

    Defines the size of the text.

    @@ -85,7 +88,7 @@

    @@ -107,7 +110,7 @@

    @@ -129,7 +132,7 @@

    @@ -151,7 +154,7 @@

    @@ -173,7 +176,7 @@

    diff --git a/property/font-style/index.html b/property/font-style/index.html index 15082076..b6a1de53 100644 --- a/property/font-style/index.html +++ b/property/font-style/index.html @@ -6,12 +6,15 @@

    - #font-style + #font-style

    Defines how much the text is slanted.

    diff --git a/property/font-variant/index.html b/property/font-variant/index.html index 72f3207e..d5759888 100644 --- a/property/font-variant/index.html +++ b/property/font-variant/index.html @@ -6,12 +6,15 @@

    - #font-variant + #font-variant

    Defines which glyph to use for each letter.

    diff --git a/property/font-weight/index.html b/property/font-weight/index.html index c598236d..f7733293 100644 --- a/property/font-weight/index.html +++ b/property/font-weight/index.html @@ -6,12 +6,15 @@

    - #font-weight + #font-weight

    Defines the weight of the text.

    diff --git a/property/font/index.html b/property/font/index.html index f0f17be8..cd800473 100644 --- a/property/font/index.html +++ b/property/font/index.html @@ -3,18 +3,21 @@ property_name: font --- -
    +

    - #font + #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.

    diff --git a/property/grid-area/index.html b/property/grid-area/index.html new file mode 100644 index 00000000..c3c0ea5a --- /dev/null +++ b/property/grid-area/index.html @@ -0,0 +1,78 @@ +--- +layout: single +property_name: grid-area +--- + +
    +
    + +

    + #grid-area +

    +
    +

    Shorthand property for grid-row-start grid-column-start grid-row-end and grid-column-end.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-area: auto; +

    +
    +

    The grid item's column and row starts and ends are automatically set.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-area: main; +

    +
    +

    You can use an area name.

    + +
    +
    + + + + + +
    + +
    diff --git a/property/grid-auto-columns/index.html b/property/grid-auto-columns/index.html new file mode 100644 index 00000000..b382b683 --- /dev/null +++ b/property/grid-auto-columns/index.html @@ -0,0 +1,80 @@ +--- +layout: single +property_name: grid-auto-columns +--- + +
    +
    + +

    + #grid-auto-columns +

    +
    +

    Defines the size of grid columns that were created implicitly: it means that grid-auto-columns targets the columns that were not defined with grid-template-columns or grid-template-areas.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-auto-columns: auto; +

    +
    +

    The implicity-created columns have an auto size.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-auto-columns: 100px; +

    +
    +

    Here we combine grid-template-areas: "header header header" "sidebar main main" with grid-template-columns: 50px 200px.

    +

    In this situation, the grid-template-areas defines 3 columns, while the grid-template-columns only defines 2 column widths.

    +

    As a result, the third column width takes its value from the grid-auto-columns property: 100px.

    + +
    +
    + + + + + +
    + +
    diff --git a/property/grid-auto-flow/index.html b/property/grid-auto-flow/index.html new file mode 100644 index 00000000..27aa1841 --- /dev/null +++ b/property/grid-auto-flow/index.html @@ -0,0 +1,99 @@ +--- +layout: single +property_name: grid-auto-flow +--- + +
    +
    + +

    + #grid-auto-flow +

    +
    +

    Defines the position of auto-generated grid items.

    + +
    + +
    + + + + + + + +
    +
    +

    + default + + + grid-auto-flow: row; +

    +
    +

    In this two-columns setup, the second grid item is two-columns wide, the third item is four-rows tall.

    +

    The other grid items are placed on additional rows.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-auto-flow: column; +

    +
    +

    The other grid items are placed on additional columns.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-auto-flow: dense; +

    +
    +

    The dense algorithm tries to place all other grid items in order to fill all the "holes" in the grid.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-auto-rows/index.html b/property/grid-auto-rows/index.html new file mode 100644 index 00000000..92b2d808 --- /dev/null +++ b/property/grid-auto-rows/index.html @@ -0,0 +1,80 @@ +--- +layout: single +property_name: grid-auto-rows +--- + +
    +
    + +

    + #grid-auto-rows +

    +
    +

    Defines the size of grid rows that were created implicitly: it means that grid-auto-rows targets the rows that were not defined with grid-template-rows or grid-template-areas.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-auto-rows: auto; +

    +
    +

    The implicity-created rows have an auto size.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-auto-rows: 100px; +

    +
    +

    Here we combine grid-template-areas: "header header header" "sidebar main main" "footer footer footer" with grid-template-rows: 50px 200px.

    +

    In this situation, the grid-template-areas defines 3 rows, while the grid-template-rows only defines 2 row heights.

    +

    As a result, the third row height (the footer) takes its value from the grid-auto-rows property: 100px.

    + +
    +
    + + + + + +
    + +
    diff --git a/property/grid-column-end/index.html b/property/grid-column-end/index.html new file mode 100644 index 00000000..817263be --- /dev/null +++ b/property/grid-column-end/index.html @@ -0,0 +1,99 @@ +--- +layout: single +property_name: grid-column-end +--- + +
    +
    + +

    + #grid-column-end +

    +
    +

    Defines the column end position of a grid item.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-column-end: auto; +

    +
    +

    In this 3-column setup, the grid item is automatically placed.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column-end: 2; +

    +
    +

    The target grid item ends just before the second column.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-column-end: 1; +

    +
    +

    The target grid item ends just before the first column, which automatically creates a fourth column.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid-column-gap/index.html b/property/grid-column-gap/index.html new file mode 100644 index 00000000..09ff8cde --- /dev/null +++ b/property/grid-column-gap/index.html @@ -0,0 +1,118 @@ +--- +layout: single +property_name: grid-column-gap +--- + +
    +
    + +

    + #grid-column-gap +

    +
    +

    Defines the gutter between the columns of a grid container.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-column-gap: 0; +

    +
    +

    Removes the gap.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column-gap: 10px; +

    +
    +

    You can use pixel values.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column-gap: 3rem; +

    +
    +

    You can use (r)em values.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column-gap: 20%; +

    +
    +

    You can use percentage values.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-column-start/index.html b/property/grid-column-start/index.html new file mode 100644 index 00000000..b6cebdd7 --- /dev/null +++ b/property/grid-column-start/index.html @@ -0,0 +1,99 @@ +--- +layout: single +property_name: grid-column-start +--- + +
    +
    + +

    + #grid-column-start +

    +
    +

    Defines the column start position of a grid item.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-column-start: auto; +

    +
    +

    In this 3-column setup, the grid item is automatically placed.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column-start: 2; +

    +
    +

    The target grid item is placed on the second column.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-column-start: 4; +

    +
    +

    The target grid item is placed outside the grid, in an auto-generated fourth column.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid-column/index.html b/property/grid-column/index.html new file mode 100644 index 00000000..7e2f9eb8 --- /dev/null +++ b/property/grid-column/index.html @@ -0,0 +1,144 @@ +--- +layout: single +property_name: grid-column +--- + +
    +
    + +

    + #grid-column +

    +
    +

    Shorthand property for grid-column-start and grid-column-end.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-column: auto auto; +

    +
    +

    The grid item's column start and end are automatically set.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-column: 1 / 3; +

    +
    +

    The grid item starts before the first column and ends just before the third one.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-column: span 3; +

    +
    +

    The grid item spans 3 columns.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-column: 1 / span 4; +

    +
    +

    The grid items starts before the first column and spans for 4 columns, creating a new one in the process.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-column: main; +

    +
    +

    You can use an area name to "copy" its column start and end positions.

    + +
    +
    + + + + + +
    + +
    diff --git a/property/grid-gap/index.html b/property/grid-gap/index.html new file mode 100644 index 00000000..0d9fcc38 --- /dev/null +++ b/property/grid-gap/index.html @@ -0,0 +1,97 @@ +--- +layout: single +property_name: grid-gap +--- + +
    +
    + +

    + #grid-gap +

    +
    +

    Shorthand property for grid-row-gap and grid-column-gap.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-gap: 0 0; +

    +
    +

    Removes both rows and columns gaps.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-gap: 10px; +

    +
    +

    You can set a single value.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-gap: 3rem 1rem; +

    +
    +

    You can set a value for each direction: rows first, columns second.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-row-end/index.html b/property/grid-row-end/index.html new file mode 100644 index 00000000..f4a405f8 --- /dev/null +++ b/property/grid-row-end/index.html @@ -0,0 +1,99 @@ +--- +layout: single +property_name: grid-row-end +--- + +
    +
    + +

    + #grid-row-end +

    +
    +

    Defines the row end position of a grid item.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-row-end: auto; +

    +
    +

    In this 3-column setup, the grid item is automatically placed.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-row-end: 3; +

    +
    +

    The target grid item ends just before the third row.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-row-end: 4; +

    +
    +

    The target grid item ends just before the fourth row, which automatically creates a third row.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid-row-gap/index.html b/property/grid-row-gap/index.html new file mode 100644 index 00000000..0fc433cf --- /dev/null +++ b/property/grid-row-gap/index.html @@ -0,0 +1,97 @@ +--- +layout: single +property_name: grid-row-gap +--- + +
    +
    + +

    + #grid-row-gap +

    +
    +

    Defines the gutter between the rows of a grid container.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-row-gap: 0; +

    +
    +

    Removes the gap.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-row-gap: 10px; +

    +
    +

    You can use pixel values.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-row-gap: 3rem; +

    +
    +

    You can use (r)em values.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-row-start/index.html b/property/grid-row-start/index.html new file mode 100644 index 00000000..bca58537 --- /dev/null +++ b/property/grid-row-start/index.html @@ -0,0 +1,99 @@ +--- +layout: single +property_name: grid-row-start +--- + +
    +
    + +

    + #grid-row-start +

    +
    +

    Defines the row start position of a grid item.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-row-start: auto; +

    +
    +

    In this 3-column setup, the grid item is automatically placed on the first row.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-row-start: 2; +

    +
    +

    The target grid item is placed on the second row.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-row-start: 3; +

    +
    +

    The target grid item is placed outside the grid, in an auto-generated third row.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid-row/index.html b/property/grid-row/index.html new file mode 100644 index 00000000..7a2cd99f --- /dev/null +++ b/property/grid-row/index.html @@ -0,0 +1,144 @@ +--- +layout: single +property_name: grid-row +--- + +
    +
    + +

    + #grid-row +

    +
    +

    Shorthand property for grid-row-start and grid-row-end.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-row: auto auto; +

    +
    +

    The grid item's row start and end are automatically set.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-row: 1 / 3; +

    +
    +

    The grid item starts before the first row and ends just before the third one.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-row: span 3; +

    +
    +

    The grid item spans 3 rows.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-row: 1 / span 4; +

    +
    +

    The grid items starts before the first row and spans for 4 rows, creating a new one in the process.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid-row: header; +

    +
    +

    You can use an area name to "copy" its row start and end positions.

    + +
    +
    + + + + + +
    + +
    diff --git a/property/grid-template-areas/index.html b/property/grid-template-areas/index.html new file mode 100644 index 00000000..00166be9 --- /dev/null +++ b/property/grid-template-areas/index.html @@ -0,0 +1,77 @@ +--- +layout: single +property_name: grid-template-areas +--- + +
    +
    + +

    + #grid-template-areas +

    +
    +

    Defines areas within a grid container. These areas can then be referenced when placing a grid item.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-template-areas: none; +

    +
    +

    No area is defined.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-areas: "header header header" "sidebar main main"; +

    +
    +

    You can use area names to specify which cells each grid item should occupy.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid-template-columns/index.html b/property/grid-template-columns/index.html new file mode 100644 index 00000000..48c5df9b --- /dev/null +++ b/property/grid-template-columns/index.html @@ -0,0 +1,118 @@ +--- +layout: single +property_name: grid-template-columns +--- + +
    +
    + +

    + #grid-template-columns +

    +
    +

    Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-template-columns: none; +

    +
    +

    No columns are defined, so you only have one.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-columns: auto auto auto; +

    +
    +

    You can use the keyword auto so that each column resizes itself automatically.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-columns: 80px auto 1rem; +

    +
    +

    You can mix the units.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-columns: 40px 1fr 2fr; +

    +
    +

    You can use the fr flex unit to distribute the remaining space across all flex columns.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-template-rows/index.html b/property/grid-template-rows/index.html new file mode 100644 index 00000000..691abbdb --- /dev/null +++ b/property/grid-template-rows/index.html @@ -0,0 +1,97 @@ +--- +layout: single +property_name: grid-template-rows +--- + +
    +
    + +

    + #grid-template-rows +

    +
    +

    Defines the rows of a grid container. You can specify the width of a row by using a keyword (like auto) or a length (like 10px). The number of rows is determined by the number of values defined in the space-separated list.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-template-rows: none; +

    +
    +

    No rows are defined.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-rows: 120px auto 3rem; +

    +
    +

    You can mix the units.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template-rows: 20px 1fr 2fr; +

    +
    +

    You can use the fr flex unit to distribute the remaining space across all flex rows.

    + +
    +
    + + + +
    + +
    diff --git a/property/grid-template/index.html b/property/grid-template/index.html new file mode 100644 index 00000000..e8030527 --- /dev/null +++ b/property/grid-template/index.html @@ -0,0 +1,98 @@ +--- +layout: single +property_name: grid-template +--- + +
    +
    + +

    + #grid-template +

    +
    +

    Shorthand property for grid-template-rows grid-template-columns and grid-template-area.

    + +
    + +
    + + + + + + +
    +
    +

    + default + + + grid-template: none; +

    +
    +

    No rows, columns, or areas are defined.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template: 200px 1fr / 100px auto 3rem; +

    +
    +

    You can define rows first, columns second, by splitting them with a slash /.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto; +

    +
    +

    You can define both areas and rows and columns dimensions. In this case, each set of areas have a row size attached to it. The first row is 50px high, the second one is 200px high. The sidebar column is 100px wide, while the main column's width is set to auto and takes up the remaining width.

    + +
    +
    + + + + +
    + +
    diff --git a/property/grid/index.html b/property/grid/index.html new file mode 100644 index 00000000..5916c21b --- /dev/null +++ b/property/grid/index.html @@ -0,0 +1,97 @@ +--- +layout: single +property_name: grid +--- + +
    +
    + +

    + #grid +

    +
    +

    Shorthand property for grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns and grid-auto-flow.

    + +
    + +
    + + + + + + +
    +
    +

    + + + grid: "header header header" 50px "sidebar main main" 200px / 100px auto; +

    +
    +

    You can use it as grid-template by setting all explicit rows, columns, and areas.

    + +
    +
    + + + + +
    +
    +
    +

    + + + grid: 200px 100px / auto-flow 30%; +

    +
    +

    You can combine grid-template-rows with grid-auto-columns.

    + +
    +
    + + + +
    +
    +
    +

    + + + grid: auto-flow 50px / 200px 100px; +

    +
    +

    You can combine grid-auto-rows with grid-template-columns.

    + +
    +
    + + + +
    + +
    diff --git a/property/height/index.html b/property/height/index.html index 3ddf121f..c4b8e725 100644 --- a/property/height/index.html +++ b/property/height/index.html @@ -6,12 +6,15 @@

    - #height + #height

    Defines the height of the element.

    @@ -42,7 +45,7 @@

    @@ -63,7 +66,7 @@

    diff --git a/property/justify-content/index.html b/property/justify-content/index.html index 60a2ec03..6a7966fb 100644 --- a/property/justify-content/index.html +++ b/property/justify-content/index.html @@ -6,15 +6,19 @@

    - #justify-content + #justify-content

    -

    Defines how flexbox items are aligned according to the main axis, within a flexbox container.

    +

    Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

    @@ -34,7 +38,7 @@

    justify-content: flex-start;

    -

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

    +

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

    @@ -42,7 +46,7 @@

    @@ -55,7 +59,7 @@

    justify-content: flex-end;

    -

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

    +

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

    @@ -63,7 +67,7 @@

    @@ -76,7 +80,7 @@

    justify-content: center;

    -

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

    +

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

    @@ -84,7 +88,7 @@

    @@ -97,7 +101,7 @@

    justify-content: space-between;

    -

    The remaining space is distributed between the flexbox items.

    +

    The remaining space is distributed between the flexbox/grid items.

    @@ -105,7 +109,7 @@

    @@ -118,7 +122,7 @@

    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.

    +

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

    @@ -126,7 +130,7 @@

    diff --git a/property/left/index.html b/property/left/index.html index bb84e731..6a647181 100644 --- a/property/left/index.html +++ b/property/left/index.html @@ -6,12 +6,15 @@

    - #left + #left

    Defines the position of the element according to its left edge.

    @@ -57,7 +60,7 @@

    left: 80px;

    -

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

    +

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

    diff --git a/property/letter-spacing/index.html b/property/letter-spacing/index.html index fe92ebd9..d93288e3 100644 --- a/property/letter-spacing/index.html +++ b/property/letter-spacing/index.html @@ -6,12 +6,15 @@

    - #letter-spacing + #letter-spacing

    Defines the spacing between the characters of a block of text.

    diff --git a/property/line-height/index.html b/property/line-height/index.html index e27fcf8d..8cad5e51 100644 --- a/property/line-height/index.html +++ b/property/line-height/index.html @@ -6,12 +6,21 @@

    - #line-height + #line-height

    Defines the height of a single line of text.

    @@ -41,7 +50,7 @@

    @@ -63,7 +72,7 @@

    @@ -85,7 +94,7 @@

    @@ -107,7 +116,7 @@

    diff --git a/property/list-style-image/index.html b/property/list-style-image/index.html index dcba1e97..015e6c13 100644 --- a/property/list-style-image/index.html +++ b/property/list-style-image/index.html @@ -6,12 +6,12 @@

    - #list-style-image + #list-style-image

    Defines the image to be used as an list item's bullet point.

    diff --git a/property/list-style-position/index.html b/property/list-style-position/index.html index 7059e3d7..a4ae3a08 100644 --- a/property/list-style-position/index.html +++ b/property/list-style-position/index.html @@ -6,12 +6,12 @@

    - #list-style-position + #list-style-position

    Defines the position of a list's bullet points.

    diff --git a/property/list-style-type/index.html b/property/list-style-type/index.html index 3a5d6e0c..c30b9352 100644 --- a/property/list-style-type/index.html +++ b/property/list-style-type/index.html @@ -6,12 +6,12 @@

    - #list-style-type + #list-style-type

    Defines the type of a list item's bullet point.

    diff --git a/property/list-style/index.html b/property/list-style/index.html index 553b38ec..ab395a2c 100644 --- a/property/list-style/index.html +++ b/property/list-style/index.html @@ -3,18 +3,18 @@ property_name: list-style --- -
    +

    - #list-style + #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.

    diff --git a/property/margin-bottom/index.html b/property/margin-bottom/index.html index f3ea5ba0..42774182 100644 --- a/property/margin-bottom/index.html +++ b/property/margin-bottom/index.html @@ -6,12 +6,15 @@

    - #margin-bottom + #margin-bottom

    Defines the space outside the element, on the bottom side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/margin-left/index.html b/property/margin-left/index.html index 9c426e6b..658f753c 100644 --- a/property/margin-left/index.html +++ b/property/margin-left/index.html @@ -6,12 +6,15 @@

    - #margin-left + #margin-left

    Defines the space outside the element, on the left side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    @@ -129,10 +132,10 @@

    - +

    diff --git a/property/margin-right/index.html b/property/margin-right/index.html index 73e52290..78584b74 100644 --- a/property/margin-right/index.html +++ b/property/margin-right/index.html @@ -6,12 +6,15 @@

    - #margin-right + #margin-right

    Defines the space outside the element, on the right side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    @@ -129,10 +132,10 @@

    - +

    diff --git a/property/margin-top/index.html b/property/margin-top/index.html index 1c07bb3a..09fe975b 100644 --- a/property/margin-top/index.html +++ b/property/margin-top/index.html @@ -6,12 +6,15 @@

    - #margin-top + #margin-top

    Defines the space outside the element, on the top side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/margin/index.html b/property/margin/index.html index cc7960c4..5a9f9c4c 100644 --- a/property/margin/index.html +++ b/property/margin/index.html @@ -3,18 +3,21 @@ property_name: margin --- -
    +

    - #margin + #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.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -87,10 +90,10 @@

    - +

    @@ -110,10 +113,10 @@

    - +

    @@ -132,10 +135,10 @@

    - +

    diff --git a/property/max-height/index.html b/property/max-height/index.html index 4811a454..c0425c55 100644 --- a/property/max-height/index.html +++ b/property/max-height/index.html @@ -6,12 +6,15 @@

    - #max-height + #max-height

    Defines the maximum height the element can be.

    @@ -42,7 +45,7 @@

    @@ -63,7 +66,7 @@

    @@ -83,7 +86,7 @@

    diff --git a/property/max-width/index.html b/property/max-width/index.html index 1e1fcb52..fee76ef9 100644 --- a/property/max-width/index.html +++ b/property/max-width/index.html @@ -6,12 +6,15 @@

    - #max-width + #max-width

    Defines the maximum width the element can be.

    @@ -41,7 +44,7 @@

    @@ -62,7 +65,7 @@

    @@ -82,7 +85,7 @@

    diff --git a/property/min-height/index.html b/property/min-height/index.html index a0c52926..f333b3dd 100644 --- a/property/min-height/index.html +++ b/property/min-height/index.html @@ -6,12 +6,15 @@

    - #min-height + #min-height

    Defines the minimum height of the element.

    @@ -42,7 +45,7 @@

    @@ -63,7 +66,7 @@

    @@ -84,7 +87,7 @@

    diff --git a/property/min-width/index.html b/property/min-width/index.html index cb4be730..284e9610 100644 --- a/property/min-width/index.html +++ b/property/min-width/index.html @@ -6,12 +6,15 @@

    - #min-width + #min-width

    Defines the minimum width of the element.

    @@ -42,7 +45,7 @@

    @@ -63,7 +66,7 @@

    @@ -84,7 +87,7 @@

    diff --git a/property/mix-blend-mode/index.html b/property/mix-blend-mode/index.html index b879a167..0de48b21 100644 --- a/property/mix-blend-mode/index.html +++ b/property/mix-blend-mode/index.html @@ -6,12 +6,12 @@

    - #mix-blend-mode + #mix-blend-mode

    Defines how the element should blend with the background.

    @@ -42,7 +42,7 @@

    @@ -62,7 +62,7 @@

    @@ -83,7 +83,7 @@

    @@ -104,7 +104,7 @@

    @@ -125,7 +125,7 @@

    @@ -146,7 +146,7 @@

    @@ -167,7 +167,7 @@

    @@ -188,7 +188,7 @@

    @@ -209,7 +209,7 @@

    @@ -230,7 +230,7 @@

    @@ -251,7 +251,7 @@

    @@ -272,7 +272,7 @@

    @@ -293,7 +293,7 @@

    @@ -314,7 +314,7 @@

    @@ -335,7 +335,7 @@

    @@ -356,7 +356,7 @@

    diff --git a/property/opacity/index.html b/property/opacity/index.html index f3ee1756..360f3cb7 100644 --- a/property/opacity/index.html +++ b/property/opacity/index.html @@ -6,12 +6,13 @@

    - #opacity + #opacity

    Defines how opaque the element is.

    @@ -42,7 +43,7 @@

    @@ -62,7 +63,7 @@

    @@ -83,7 +84,7 @@

    diff --git a/property/order/index.html b/property/order/index.html index db19bbaf..f47bc42a 100644 --- a/property/order/index.html +++ b/property/order/index.html @@ -6,12 +6,16 @@

    - #order + #order

    Defines the order of a flexbox item.

    @@ -43,7 +47,7 @@

    @@ -63,10 +67,10 @@

    - +

    @@ -84,10 +88,10 @@

    - +

    @@ -105,10 +109,10 @@

    - +

    diff --git a/property/outline-color/index.html b/property/outline-color/index.html index 183c5da1..0c650203 100644 --- a/property/outline-color/index.html +++ b/property/outline-color/index.html @@ -6,12 +6,12 @@

    - #outline-color + #outline-color

    Defines the color of the element's outlines.

    diff --git a/property/outline-style/index.html b/property/outline-style/index.html index fa95d660..78757cb2 100644 --- a/property/outline-style/index.html +++ b/property/outline-style/index.html @@ -6,12 +6,12 @@

    - #outline-style + #outline-style

    Defines the style of the element's outlines.

    diff --git a/property/outline-width/index.html b/property/outline-width/index.html index 045519e9..a5d45a29 100644 --- a/property/outline-width/index.html +++ b/property/outline-width/index.html @@ -6,12 +6,12 @@

    - #outline-width + #outline-width

    Defines the width of the element's outlines.

    diff --git a/property/outline/index.html b/property/outline/index.html index 5f258566..a5204190 100644 --- a/property/outline/index.html +++ b/property/outline/index.html @@ -3,18 +3,18 @@ property_name: outline --- -
    +

    - #outline + #outline

    -

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

    +

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

    diff --git a/property/overflow-wrap/index.html b/property/overflow-wrap/index.html index ea362e62..0933c8e1 100644 --- a/property/overflow-wrap/index.html +++ b/property/overflow-wrap/index.html @@ -6,12 +6,12 @@

    - #overflow-wrap + #overflow-wrap

    Defines if words should break when reaching the end of a line.

    @@ -42,7 +42,7 @@

    @@ -63,7 +63,7 @@

    diff --git a/property/overflow-x/index.html b/property/overflow-x/index.html index fb140b38..506e7697 100644 --- a/property/overflow-x/index.html +++ b/property/overflow-x/index.html @@ -6,12 +6,12 @@

    - #overflow-x + #overflow-x

    Defines how overflowing content on the horizontal axis is displayed.

    @@ -42,7 +42,7 @@

    @@ -63,7 +63,7 @@

    @@ -84,7 +84,7 @@

    @@ -105,7 +105,7 @@

    diff --git a/property/overflow-y/index.html b/property/overflow-y/index.html index f91d4c6c..af9e8e51 100644 --- a/property/overflow-y/index.html +++ b/property/overflow-y/index.html @@ -6,12 +6,12 @@

    - #overflow-y + #overflow-y

    Defines how overflowing content on the vertical axis is displayed.

    @@ -42,7 +42,7 @@

    @@ -63,7 +63,7 @@

    @@ -84,7 +84,7 @@

    @@ -105,7 +105,7 @@

    diff --git a/property/overflow/index.html b/property/overflow/index.html index ec16e709..3836a720 100644 --- a/property/overflow/index.html +++ b/property/overflow/index.html @@ -6,12 +6,12 @@

    - #overflow + #overflow

    Defines how overflowing content on both horizontal and vertical axis is displayed.

    @@ -43,7 +43,7 @@

    @@ -64,7 +64,7 @@

    @@ -85,7 +85,7 @@

    @@ -106,7 +106,7 @@

    diff --git a/property/padding-bottom/index.html b/property/padding-bottom/index.html index 88607279..17a14fd4 100644 --- a/property/padding-bottom/index.html +++ b/property/padding-bottom/index.html @@ -6,12 +6,15 @@

    - #padding-bottom + #padding-bottom

    Defines the space inside the element, on the bottom side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/padding-left/index.html b/property/padding-left/index.html index 9e9bb1f8..1387d733 100644 --- a/property/padding-left/index.html +++ b/property/padding-left/index.html @@ -6,12 +6,15 @@

    - #padding-left + #padding-left

    Defines the space inside the element, on the left side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/padding-right/index.html b/property/padding-right/index.html index 3a3ad707..349cd3bc 100644 --- a/property/padding-right/index.html +++ b/property/padding-right/index.html @@ -6,12 +6,15 @@

    - #padding-right + #padding-right

    Defines the space inside the element, on the right side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/padding-top/index.html b/property/padding-top/index.html index 1e07e4ab..10c89cd5 100644 --- a/property/padding-top/index.html +++ b/property/padding-top/index.html @@ -6,12 +6,15 @@

    - #padding-top + #padding-top

    Defines the space inside the element, on the top side.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -86,10 +89,10 @@

    - +

    @@ -107,10 +110,10 @@

    - +

    diff --git a/property/padding/index.html b/property/padding/index.html index a562e3a4..99a083c0 100644 --- a/property/padding/index.html +++ b/property/padding/index.html @@ -3,18 +3,21 @@ property_name: padding --- -
    +

    - #padding + #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.

    @@ -23,7 +26,7 @@

    - +
    @@ -43,7 +46,7 @@

    @@ -64,10 +67,10 @@

    - +

    @@ -87,10 +90,10 @@

    - +

    @@ -110,10 +113,10 @@

    - +

    @@ -132,10 +135,10 @@

    - +

    diff --git a/property/pointer-events/index.html b/property/pointer-events/index.html index 9aa7ffd1..2cbb7709 100644 --- a/property/pointer-events/index.html +++ b/property/pointer-events/index.html @@ -6,12 +6,12 @@

    - #pointer-events + #pointer-events

    Defines if the element reacts to pointer events or not.

    @@ -22,7 +22,7 @@

    - +
    @@ -42,7 +42,7 @@

    @@ -63,7 +63,7 @@

    diff --git a/property/position/index.html b/property/position/index.html index 037be33a..9b58263d 100644 --- a/property/position/index.html +++ b/property/position/index.html @@ -6,12 +6,15 @@

    - #position + #position

    Defines the position behavior of the element.

    @@ -23,7 +26,7 @@

    - +
    @@ -36,7 +39,7 @@

    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.

    +

    As a result, it will not act as anchor point for the absolutely positioned pink block.

    Also, it will not react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    @@ -45,7 +48,7 @@

    @@ -58,7 +61,7 @@

    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.

    +

    It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    @@ -67,10 +70,10 @@

    - +

    @@ -81,7 +84,7 @@

    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.

    +

    Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    @@ -90,10 +93,10 @@

    - +

    @@ -107,7 +110,7 @@

    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.

    +

    Because it's positioned, it will act as an anchor point for the absolutely positioned pink block.

    Also, it will react to the following properties:

    • top
    • bottom
    • left
    • right
    • z-index
    @@ -116,11 +119,11 @@

    - - + +

    diff --git a/property/resize/index.html b/property/resize/index.html index 7609e579..30af48a1 100644 --- a/property/resize/index.html +++ b/property/resize/index.html @@ -6,12 +6,12 @@

    - #resize + #resize

    Defines if the textarea is resizable or not.

    diff --git a/property/right/index.html b/property/right/index.html new file mode 100644 index 00000000..4223c7e7 --- /dev/null +++ b/property/right/index.html @@ -0,0 +1,98 @@ +--- +layout: single +property_name: right +--- + + diff --git a/property/text-align/index.html b/property/text-align/index.html index f316e932..a92b2d21 100644 --- a/property/text-align/index.html +++ b/property/text-align/index.html @@ -6,12 +6,15 @@

    - #text-align + #text-align

    Defines how the text content of the element is horizontally aligned.

    @@ -40,7 +43,7 @@

    @@ -61,7 +64,7 @@

    @@ -82,7 +85,7 @@

    @@ -103,7 +106,7 @@

    diff --git a/property/text-decoration/index.html b/property/text-decoration/index.html index ac7781a7..24ab612e 100644 --- a/property/text-decoration/index.html +++ b/property/text-decoration/index.html @@ -6,12 +6,15 @@

    - #text-decoration + #text-decoration

    Defines how the text content of the element is decorated.

    diff --git a/property/text-indent/index.html b/property/text-indent/index.html index 06365255..4b0b7f77 100644 --- a/property/text-indent/index.html +++ b/property/text-indent/index.html @@ -6,12 +6,15 @@

    - #text-indent + #text-indent

    Defines the indentation of the element's first line of text.

    @@ -41,7 +44,7 @@

    @@ -63,7 +66,7 @@

    @@ -84,7 +87,7 @@

    diff --git a/property/text-overflow/index.html b/property/text-overflow/index.html index 72129312..f8cd39e0 100644 --- a/property/text-overflow/index.html +++ b/property/text-overflow/index.html @@ -6,12 +6,16 @@

    - #text-overflow + #text-overflow

    Defines how the hidden text content behaves if it's overflowing.

    @@ -43,7 +47,7 @@

    @@ -65,7 +69,7 @@

    diff --git a/property/text-shadow/index.html b/property/text-shadow/index.html index 6a6709c1..068ccff2 100644 --- a/property/text-shadow/index.html +++ b/property/text-shadow/index.html @@ -6,12 +6,15 @@

    - #text-shadow + #text-shadow

    Defines the shadow of the text content.

    diff --git a/property/text-transform/index.html b/property/text-transform/index.html index aebb218b..b3dd015c 100644 --- a/property/text-transform/index.html +++ b/property/text-transform/index.html @@ -6,12 +6,15 @@

    - #text-transform + #text-transform

    Defines how the text content should be transformed.

    diff --git a/property/top/index.html b/property/top/index.html index ba22c1a4..a971226a 100644 --- a/property/top/index.html +++ b/property/top/index.html @@ -6,12 +6,15 @@

    - #top + #top

    Defines the position of the element according to its top edge.

    @@ -57,7 +60,7 @@

    top: 20px;

    -

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

    +

    If the element is in position relative, the element will move downwards by the amount defined by the top value.

    diff --git a/property/transform-origin/index.html b/property/transform-origin/index.html index b2fe6346..cb4c474e 100644 --- a/property/transform-origin/index.html +++ b/property/transform-origin/index.html @@ -6,12 +6,13 @@

    - #transform-origin + #transform-origin

    Defines the origin for transformations defined by the transform property.

    @@ -24,9 +25,9 @@

    - + - +
    @@ -46,7 +47,7 @@

    @@ -68,11 +69,11 @@

    - +

    @@ -90,11 +91,11 @@

    - +

    @@ -112,11 +113,11 @@

    - +

    diff --git a/property/transform/index.html b/property/transform/index.html index 0e8fc44e..84b67266 100644 --- a/property/transform/index.html +++ b/property/transform/index.html @@ -6,12 +6,13 @@

    - #transform + #transform

    Defines how the element is transformed.

    diff --git a/property/transition-delay/index.html b/property/transition-delay/index.html index a22f5667..ac181ed6 100644 --- a/property/transition-delay/index.html +++ b/property/transition-delay/index.html @@ -6,12 +6,16 @@

    - #transition-delay + #transition-delay

    Defines how long the transition has to wait before starting.

    @@ -44,7 +48,7 @@

    @@ -64,7 +68,7 @@

    @@ -85,7 +89,7 @@

    @@ -106,7 +110,7 @@

    diff --git a/property/transition-duration/index.html b/property/transition-duration/index.html index bf93a727..4f38950a 100644 --- a/property/transition-duration/index.html +++ b/property/transition-duration/index.html @@ -6,12 +6,16 @@

    - #transition-duration + #transition-duration

    Defines how long the transition lasts.

    @@ -44,7 +48,7 @@

    @@ -65,7 +69,7 @@

    @@ -86,7 +90,7 @@

    diff --git a/property/transition-property/index.html b/property/transition-property/index.html index 1c42eb93..c2152940 100644 --- a/property/transition-property/index.html +++ b/property/transition-property/index.html @@ -6,12 +6,16 @@

    - #transition-property + #transition-property

    Defines which properties will transition.

    @@ -44,7 +48,7 @@

    @@ -65,7 +69,7 @@

    @@ -86,7 +90,7 @@

    @@ -107,7 +111,7 @@

    @@ -128,7 +132,7 @@

    diff --git a/property/transition-timing-function/index.html b/property/transition-timing-function/index.html index ac27cf05..2472f94a 100644 --- a/property/transition-timing-function/index.html +++ b/property/transition-timing-function/index.html @@ -6,12 +6,16 @@

    - #transition-timing-function + #transition-timing-function

    Defines how the values between the start and the end of the transition are calculated.

    @@ -44,7 +48,7 @@

    @@ -65,7 +69,7 @@

    @@ -86,7 +90,7 @@

    @@ -108,7 +112,7 @@

    @@ -129,7 +133,7 @@

    @@ -150,7 +154,7 @@

    @@ -171,7 +175,7 @@

    @@ -192,7 +196,7 @@

    diff --git a/property/transition/index.html b/property/transition/index.html index 82909e7d..8e4b5767 100644 --- a/property/transition/index.html +++ b/property/transition/index.html @@ -3,18 +3,22 @@ property_name: transition --- -
    +

    - #transition + #transition

    -

    Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

    +

    Shorthand property for transition-property transition-duration transition-timing-function and transition-delay.

    Only transition-duration is required.

    @@ -42,7 +46,7 @@

    @@ -62,7 +66,7 @@

    @@ -82,7 +86,7 @@

    @@ -102,7 +106,7 @@

    @@ -123,7 +127,7 @@

    diff --git a/property/vertical-align/index.html b/property/vertical-align/index.html new file mode 100644 index 00000000..c1155d2d --- /dev/null +++ b/property/vertical-align/index.html @@ -0,0 +1,197 @@ +--- +layout: single +property_name: vertical-align +--- + +
    +
    + +

    + #vertical-align +

    +
    +

    Defines how an inline or table-cell element aligns vertically.

    + +
    + +
    + + + + + + +
    +
    +

    + + + vertical-align: baseline; +

    +
    +

    The element is aligned with the baseline of the parent.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: sub; +

    +
    +

    The element is aligned with the subscript baseline of the parent.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: super; +

    +
    +

    The element is aligned with the superscript baseline of the parent.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: text-top; +

    +
    +

    The element is aligned with the top of the parent's element font.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: text-bottom; +

    +
    +

    The element is aligned with the bottom of the parent's element font.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: middle; +

    +
    +

    The element is aligned with the baseline plus half the x-height of the parent.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: top; +

    +
    +

    The element is aligned with the top of the line.

    + +
    +
    + + + +
    +
    +
    +

    + + + vertical-align: bottom; +

    +
    +

    The element is aligned with the bottom of the line.

    + +
    +
    + + + +
    + +
    diff --git a/property/white-space/index.html b/property/white-space/index.html index 33f1fe14..7b18997b 100644 --- a/property/white-space/index.html +++ b/property/white-space/index.html @@ -6,12 +6,15 @@

    - #white-space + #white-space

    Defines how the element's white space is handled.

    @@ -42,7 +45,7 @@