+ {% include lists/finder-list.html %}
+
+
Browser testing via
CSS Reference is free and always will be!
+Please whitelist us in your ad blocker.
+Thank you! 
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.
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.
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:
redgreenblueEach of them can have a value between 0 and 255.
background-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).
background-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%background-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 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-sideclosest-cornerfarthest-sidefarthest-cornerbackground-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.
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.
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.
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.
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:
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.
Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.
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.
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.
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:
redgreenblueEach of them can have a value between 0 and 255.
background-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).
background-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%background-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 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-sideclosest-cornerfarthest-sidefarthest-cornerbackground-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.
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.
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.
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.
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:
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.
Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.
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.
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.
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.
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.
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.
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: 12pxpadding: 30pxwidth: 200pxThe 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: 12pxpadding: 30pxwidth: 200pxThe 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.
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 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 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 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 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.
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.
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.
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.
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.
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.
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: 12pxpadding: 30pxwidth: 200pxThe 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: 12pxpadding: 30pxwidth: 200pxThe 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.
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 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 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 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This remaining space is distributed equally amongst the two lines:
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.
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.
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.
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-wrap.
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.
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 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 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.
This remaining space is distributed equally amongst the two lines:
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.
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.
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.
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-wrap.
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.
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.
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 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:
redgreenblueEach of them can have a value between 0 and 255.
color: rgba(0, 0, 0, 0.5);
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).
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%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).
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 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 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 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 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 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:
redgreenblueEach of them can have a value between 0 and 255.
color: rgba(0, 0, 0, 0.5);
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).
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%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).
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 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 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 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 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.
+ New! My 44-page ebook "CSS in 44 minutes" is out! 😃 +
+ + 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 @@ +