And this CSS:
.element:before {
content: attr(data-something);
-}The element will grab the text content from the HTML attribute.
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
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:
height and width valuesFor example, this element has:
.element{
+}The element will grab the text content from the HTML attribute.
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: help;
help
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
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:
height and width valuesFor 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:
For example, this element has:
.element{
height: 3em;
width: 120px;
-}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.
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.
Shorthand property for flex-direction and flex-flow.
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:
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:
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.
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: "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.
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:
largersmallerfont-size: x-large;
You can use absolute keywords. The value is relative to the root element <html>.
The following are available:
xx-smallx-smallsmallmediumlargex-largexx-largeDefines 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.
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.
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:
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.
Shorthand property for font-style font-variant font-weight font-size line-height and font-family.
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.
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.
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.
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.
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.
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.
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.
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.
Shorthand property for list-style-type list-style-image and list-style-position.
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:
<html> the root element's font sizemargin-bottom: 10%;
You can use percentage values.
The percentage is based on the width of the container.
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:
<html> the root element's font sizemargin-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.
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:
<html> the root element's font sizemargin-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.
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:
<html> the root element's font sizemargin-top: 10%;
You can use percentage values.
The percentage is based on the width of the container.
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:
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:
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:
To remember the order, start at the top and go clockwise.
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.
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.
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.
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.
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.
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.
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.
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:
redgreenblueEach of them can have a value between 0 and 255.
outline-color: rgba(50, 115, 220, 0.3);
You can use rgba() color codes:
rgbalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
outline-color: hsl(14, 100%, 53%);
You can use hsl() color codes:
hue and can go from 0 to 359saturation and go from 0% to 100%luminosity and go from 0% to 100%outline-color: hsla(14, 100%, 53%, 0.6);
You can use hsl()a color codes:
hslalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
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.
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.
Shorthand property for outline-width outline-style and outline-color.
outline: 4px dotted red;
The order is important:
outline: 2px solid;
Only the color is optional. If you omit it, the color applied will be the color of the text.
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.
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.
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.
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.
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:
<html> the root element's font sizepadding-bottom: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-left: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-right: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-top: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
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:
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:
To remember the order, start at the top and go clockwise.
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.
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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexDefines 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.
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.
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.
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.
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: …
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 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.
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.
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.
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:
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.
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:
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:
By using the same value for both, you can scale proportionally.
transform: rotate(45deg);
Rotate the element.
You can use:
0 to 360deg0 to 400grad0 to 2Ï€rad0 to 1turntransform: 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:
transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);
You can combine multiple transformations by separating them with a space.
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.
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.
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.
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.
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 1stransition-property defaults to alltransition-timing-function defaults to easetransition-delay defaults to 0stransition: 1s linear;
transition-duration is set to 1stransition-property defaults to alltransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear 500ms;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay is set to 500mstransition: background 4s, transform 1s;
You can combine multiple properties with their own transition duration.
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.
<br>white-space: pre-wrap;
The white space is mostly preserved.
<br>, but also when reaching the end of the elementwhite-space: pre-line;
Only new lines are preserved.
<br>, but also when reaching the end of the elementDefines 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.
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.
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.
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.
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:
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.
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.
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.
Shorthand property for flex-direction and flex-flow.
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:
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:
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.
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: "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.
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:
largersmallerfont-size: x-large;
You can use absolute keywords. The value is relative to the root element <html>.
The following are available:
xx-smallx-smallsmallmediumlargex-largexx-largeDefines 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.
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.
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:
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.
Shorthand property for font-style font-variant font-weight font-size line-height and font-family.
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.
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.
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.
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.
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.
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.
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.
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.
Shorthand property for list-style-type list-style-image and list-style-position.
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:
<html> the root element's font sizemargin-bottom: 10%;
You can use percentage values.
The percentage is based on the width of the container.
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:
<html> the root element's font sizemargin-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.
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:
<html> the root element's font sizemargin-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.
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:
<html> the root element's font sizemargin-top: 10%;
You can use percentage values.
The percentage is based on the width of the container.
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:
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:
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:
To remember the order, start at the top and go clockwise.
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.
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.
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.
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.
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.
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.
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.
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:
redgreenblueEach of them can have a value between 0 and 255.
outline-color: rgba(50, 115, 220, 0.3);
You can use rgba() color codes:
rgbalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
outline-color: hsl(14, 100%, 53%);
You can use hsl() color codes:
hue and can go from 0 to 359saturation and go from 0% to 100%luminosity and go from 0% to 100%outline-color: hsla(14, 100%, 53%, 0.6);
You can use hsl()a color codes:
hslalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
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.
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.
Shorthand property for outline-width outline-style and outline-color.
outline: 4px dotted red;
The order is important:
outline: 2px solid;
Only the color is optional. If you omit it, the color applied will be the color of the text.
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.
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.
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.
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.
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:
<html> the root element's font sizepadding-bottom: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-left: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-right: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
<html> the root element's font sizepadding-top: 30%;
You can use percentage values.
The percentage is based on the width of the element.
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:
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:
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:
To remember the order, start at the top and go clockwise.
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.
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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexposition: 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:
topbottomleftrightz-indexDefines 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.
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.
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.
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.
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: …
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 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.
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.
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.
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:
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.
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:
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:
By using the same value for both, you can scale proportionally.
transform: rotate(45deg);
Rotate the element.
You can use:
0 to 360deg0 to 400grad0 to 2Ï€rad0 to 1turntransform: 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:
transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);
You can combine multiple transformations by separating them with a space.
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.
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.
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.
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.
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 1stransition-property defaults to alltransition-timing-function defaults to easetransition-delay defaults to 0stransition: 1s linear;
transition-duration is set to 1stransition-property defaults to alltransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay defaults to 0stransition: background 1s linear 500ms;
transition-duration is set to 1stransition-property is set to backgroundtransition-timing-function is set to lineartransition-delay is set to 500mstransition: background 4s, transform 1s;
You can combine multiple properties with their own transition duration.
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.
<br>white-space: pre-wrap;
The white space is mostly preserved.
<br>, but also when reaching the end of the elementwhite-space: pre-line;
Only new lines are preserved.
<br>, but also when reaching the end of the elementDefines 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.
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.
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.
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.
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:
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.
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
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: help;
help
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