CSS: Properties

Property Values Description
align-content stretch, center, flex-start, flex-end, space-between, space-around, initial, inherit This modifies the behavior of the flex-wrap property.
align-items stretch, center, flex-start, flex-end, baseline, initial, inherit This specifies the default alignment for items inside the flexible container.
align-self auto, stretch, center, flex-start, flex-end, baseline, initial, inherit This specifies the alignment for the selected item inside the flexible container.
all initial, inherit, unset This modifies all of the proprty values, except unicode-bidi and direction.
animation name duration timing-function delay iteration-count direction fill-mode play-state This is a shorthand property for eight of the animation properties:
  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction
  7. animation-fill-mode
  8. animation-play-state
animation-delay time, initial, inherit This specifies the delay before the start of the animation.
animation-direction normal, reverse, alternate, alternate-reverse, initial, inherit This specifies in which order to play the animation sequence.
animation-duration time, initial, inherit This specifies the length of time in which to play the one entire cycle of the animation.
animation-fill-mode none, forwards, backwards, both, initial, inherit This specifies a style for the element when the animation is not playing.
animation-iteration-count number, infinite, initial, inherit This specifies the number of times an animation should be played.
animation-name name, none, initial, inherit This specifies a name for the keyframe animation.
animation-play-state paused, running, initial, inherit This specifies whether the animation is running or paused.
animation-timing-function linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start), steps(int, end), cubic-bezier(cx1, cy1, cx2, cy2), initial, inherit This specifies whether the animation is running or paused.
backface-visibility visible, hidden, initial, inherit This specifies whether or not an element should be visible when not facing the screen.
background color image position/size repeat origin clip attachment, initial, inherit This sets all the background properties in one declaration:
  1. background-color
  2. background-image
  3. background-position
  4. background-size
  5. background-repeat
  6. background-origin
  7. background-clip
  8. background-attachment
background-attachment scroll, fixed, local, initial, inherit This specifies whether a background image is fixed or scrolls with the rest of the page.
background-blend-mode normal, multiply, screen, overlay, darken, lighten, color_dodge, saturation, color, luminosity This specifies the blending mode of each background layer.
background-clip border-box, padding-box, content-box, initial, inherit This specifies the painting area of the background.
background-color color, transparent, initial, inherit This specifies the background color of an element.
background-image url, none, initial, inherit This specifies one or more background images for an element.
background-origin border-box, padding-box, content-box, none, initial, inherit This specifies where the background image is positioned.
background-position description, x y, initial, inherit This specifies where the background image is positioned.
background-repeat repeat, repeat-x, repeat-y, no-repeat, initial, inherit This specifies how the background image is repeated.
background-size length, auto, cover, contain, initial, inherit This specifies the size of the background images.
border width style color, initial, inherit This specifies the border style.
border-bottom width style color, initial, inherit This specifies the border attributes for the bottom of the border.
border-bottom-color color, transparent, initial, inherit This specifies the border color for the bottom of the border.
border-bottom-left-radius horizontal length, vertical length, initial, inherit This specifies the radius of the bottom-left corner of the border.
border-bottom-right-radius horizontal length, vertical length, initial, inherit This specifies the radius of the bottom-right corner of the border.
border-bottom-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style of the bottom border.
border-bottom-width width, medium, thin, thick, initial, inherit This specifies the width of the bottom border.
border-collapse separate, collapse, initial, inherit This specifies whether the table borders are collapsed into a single border or detached.
border-color top_color right_color bottom_color left_color, initial, inherit This specifies the color of the four borders with up to four values.
border-image url slice width outset repeat, initial, inherit This specifies an image to be used as the border.
border-image-outset top_length right_length bottom_length left_length, initial, inherit This specifies the amount by which the border image area extends beyond the border box.
border-image-repeat stretch, repeat, round, space, initial, inherit This specifies whether the border image should be repeated, rounded, or stretched.
border-image-slice size, fill, initial, inherit This specifies how to slice the border image.
border-image-source url, none, initial, inherit This specifies the border image.
border-image-width top_width right_width bottom_width left_width, auto, initial, inherit This specifies the width of the border image.
border-left width style color, initial, inherit This specifies the attributes for the left side of the border.
border-left-color color, transparent, initial, inherit This specifies the color for the left side of the border.
border-left-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style for the left side of the border.
border-left-width width, medium, thin, thick, initial, inherit This specifies the width for the left side of the border.
border-radius top_left_radius top_right_radius bottom_right_radius bottom_left_radius / top_left_radius top_right_radius bottom_right_radius bottom_left_radius, initial, inherit This specifies the rounding of the corners of the border.
border-right width style color, initial, inherit This specifies the attributes for the right side of the border.
border-right-color color, transparent, initial, inherit This specifies the color for the right side of the border.
border-right-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style for the right side of the border.
border-right-width width, medium, thin, thick, initial, inherit This specifies the width for the right side of the border.
border-spacing distance, initial, inherit This specifies the distance between the borders of adjacent cells in a table.
border-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style of the border.
border-top width style color, initial, inherit This specifies the border attributes for the top of the border.
border-top-color color, transparent, initial, inherit This specifies the border color for the top of the border.
border-top-left-radius horizontal length, vertical length, initial, inherit This specifies the radius of the top-left corner of the border.
border-top-right-radius horizontal length, vertical length, initial, inherit This specifies the radius of the top-right corner of the border.
border-top-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style of the top border.
border-top-width width, medium, thin, thick, initial, inherit This specifies the width of the top border.
border-width width, medium, thin, thick, initial, inherit This specifies the width of the border, using 1 to 4 values.
bottom position, auto, initial, inherit This specifies the position of the bottom edge of the element for elements that have absolute positioning.
box-shadow horiz vertical size blur_size color inset, none, initial, inherit This specifies shadows for an element.
box-sizing content-box, border-box, initial, inherit This specifies which sizing properties should be used for this element.
caption-side top, bottom, initial, inherit This specifies the placement of a table caption.
clear none, left, right, both, initial, inherit This specifies on which sides of an element floating elements are not allowed to float.
clip rect(top,right,bottom,left), auto, initial, inherit This specifies the rectangle which clips an absolutely positioned element.
color color, initial, inherit This specifies the color of the text inside an element.
column-fill balance, auto, initial, inherit This specifies how to fill the text in the columns in an element.
column-gap width, normal, initial, inherit This specifies the size of the spaces between the columns in an element.
column-rule width style color, initial, inherit This specifies the attributes of the spaces between the columns in an element.
column-rule-color color, initial, inherit This specifies the color of the spaces between the columns in an element.
column-rule-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit This specifies the style of the spaces between the columns in an element.
column-rule-width width, thick, medium, thin, initial, inherit This specifies the width of the spaces between the columns in an element.
column-span count, all, initial, inherit This specifies the number of columns that the element should span.
column-width width, auto, initial, inherit This specifies the width of columns in the element.
columns width count, auto, initial, inherit This specifies the width and number of columns in the element.
content text, url, normal, none, counter, attribute, open-quote, close-quote, no-open-quote, no-close-quote, initial, inherit This specifies content to be inserted via :before and :after selectors.
counter-increment counter_id increment, none, initial, inherit This specifies a counter and value by which to increment it.
counter-reset counter_id reset_value, none, initial, inherit This specifies a counter and the value to reset it at.
cursor alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, grab, grabbing, help, move, n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progres, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out, initial, inherit This specifies cursor to display when pointing to the element.
direction ltr, rtl, initial, inherit This specifies he text direction for the element.
display inline, block, flex, inline-block, inline-flex, inline-table, list-item, run-in, table, table-caption, table-column-group, table-header-group, table-footer-group, table-row-group, table-cell, table-column, table-row, none, initial, inherit This specifies type of box used for the element.
empty-cells show, hide, initial, inherit This specifies how to display empty cells in a table. This only applies to tables with "separated borders."
filter blur(pixels), brightness(percentage), contrast(percentage), drop-shadow(horiz vert blur spread color), grayscale(percentage), hue-rotate(degrees), invert(percentage), opacity(percentage), saturate(percentage), sepia(percentage), url(svg_url), none, initial, inherit This specifies visual effects, usually on an image.
flex grow, shrink, basis, auto, none, initial, inherit This specifies the length of the item, relative to the rest of the flexible items inside the same container.
flex-basis length, auto, initial, inherit This specifies the initial length of the item.
flex-direction row, row-reverse, column, column-reverse, initial, inherit This specifies the direction of the flexible items.
flex-flow direction wrap, initial, inherit This specifies the direction and wrap properties of the flexible items.
flex-grow growth, initial, inherit This specifies how much the item will grow relative to the rest of the flexible items inside the same container.
flex-shrink reduction, initial, inherit This specifies how much the item will shrink relative to the rest of the flexible items inside the same container.
flex-wrap nowrap, wrap, wrap-reverse, initial, inherit This specifies whether the flexible items should wrap or not.
float none, left, right, initial, inherit This specifies whether or not an element should float.
font style variant weight size/height family, caption, icon, menu, message-box, small-caption, status-bar, initial, inherit This specifies all of the font attributes of an element.
@font-face These are the properties of the font:
  1. font-family: name;
  2. src: url;
  3. font-stretch: value;
  4. font-style: value;
  5. font-weight: value;
  6. unicode-range: range;
This specifies an externally defined font.
font-family family-name generic-family, initial, inherit This specifies the font in an element.
font-size size, medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, initial, inherit This specifies the size of the font in an element.
font-size-adjust aspect, none, initial, inherit This specifies an adjustment to the size of the font in an element.
font-stretch ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial, inherit This specifies an adjustment to the width of the font in an element.
font-style normal, italic, oblique, initial, inherit This specifies the style for the font in an element.
font-variant normal, small-caps, initial, inherit This specifies whether or not a text should be displayed in a small-caps font.
font-weight thickness, normal, bold, bolder, lighter, initial, inherit This specifies the thickness of the ink in the text.
hanging-punctuation none, first, last, allow-end, force-end, initial, inherit This specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.
height height, auto, initial, inherit This specifies the height of the element.
justify-content flex-start, flex-end, center, space-between, space-around, initial, inherit This specifies the aligment of a container's flexible items that do not use all of the available space.
@keyframes animation_name {keyframes_value {style;}} This specifies the keyframes for an animation.
left x_coordinate, auto, initial, inherit This specifies the left edge of an element with absolute positioning.
letter-spacing offset, normal, initial, inherit This specifies adjustment to the space betweeen letters in an element.
line-height height, normal, initial, inherit This specifies the line height between successive lines of text.
list-style type position image_url, initial, inherit This specifies all of the attributes of a list.
list-style-image url, none, initial, inherit This specifies image to be used as a list marker in a list.
list-style-position inside, outside, initial, inherit This specifies whether the list markers should be placed inside or outside of the content.
list-style-type disc, circle, square, decimal, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, lower-roman, upper-roman, decimal-leading-zero, cjk-ideographic, armenian, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, none, initial, inherit This specifies the type of list marker to be used in the list.
margin top right bottom left, auto, initial, inherit This specifies the four margins of an element.
margin-bottom bottom, auto, initial, inherit This specifies the bottom margin of an element.
margin-left left, auto, initial, inherit This specifies the left margin of an element.
margin-right right, auto, initial, inherit This specifies the right margin of an element.
margin-top top, auto, initial, inherit This specifies the top margin of an element.
max-height height, none, initial, inherit This specifies the maximum height of an element.
max-width width, none, initial, inherit This specifies the maximum width of an element.
@media type and feature { style } This specifies different style rules for different media types and devices.
min-height height, initial, inherit This specifies the minimum height of an element.
min-width width, initial, inherit This specifies the minimum width of an element.
nav-down id, name, auto, initial, inherit This specifies where to navigate to when the down arrow is pressed.
nav-index position, auto, initial, inherit This specifies the sequential navigation order for an element.
nav-left id, name, auto, initial, inherit This specifies where to navigate to when the left arrow is pressed.
nav-right id, name, auto, initial, inherit This specifies where to navigate to when the right arrow is pressed.
nav-up id, name, auto, initial, inherit This specifies where to navigate to when the up arrow is pressed.
opacity opacity, initial, inherit This specifies the opacity level for an element.
order order, initial, inherit This specifies the order level for an flexible item relative to the rest of the flexible items.
outline color style width, initial, inherit This specifies the outline to be drawn around an element.
outline-color color, invert, initial, inherit This specifies the color of the outline to be drawn around an element.
outline-offset offset, invert, initial, inherit This specifies the amount of space to add between the outline and the border of the element.
outline-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, invert, initial, inherit This specifies the style of the outline of the element.
outline-width thickness, medium, thin, thick, initial, inherit This specifies the thickness of the outline of the element.
overflow visible, hidden, scroll, auto, initial, inherit This specifies how the content overflow of an element is handled.
overflow-x visible, hidden, scroll, auto, initial, inherit This specifies how the content overflow of an element is handled in the horizontal direction.
overflow-y visible, hidden, scroll, auto, initial, inherit This specifies how the content overflow of an element is handled in the vertical direction.
padding top right bottom left, initial, inherit This specifies the padding of an element for all four directions direction.
padding-bottom bottom, initial, inherit This specifies the padding of an element for the bottom side.
padding-left left, initial, inherit This specifies the padding of an element for the left side.
padding-right right, initial, inherit This specifies the padding of an element for the right side.
padding-top top, initial, inherit This specifies the padding of an element for the top side.
page-break-after auto, always, avoid, left, right, initial, inherit This specifies whether a page break should occur after the element.
page-break-before auto, always, avoid, left, right, initial, inherit This specifies whether a page break should occur before the element.
page-break-inside auto, avoid, initial, inherit This specifies whether a page break should occur inside the element.
perspective distance, initial, inherit This specifies the distance an element is placed from the view in 3d space.
perspective-origin x y, initial, inherit This specifies x and y placement of an element in 3d space.
position static, absolute, fixed, relative, sticky, initial, inherit This specifies the method of positioning for an element.
quotes first_quote1 last_quote1 first_quote2 last_quote2, none, initial, inherit This specifies the type of quotation marks to be used for an element.
resize both, horizontal, vertical, none, initial, inherit This specifies whether the element is resizable.
right x_coordinate, auto, initial, inherit This specifies the right edge of an element with absolute positioning.
tab-size spaces, size, initial, inherit This specifies the size of a tab character.
table-layout fixed, auto, initial, inherit This specifies layout algorithm for a table.
text-align left, right, center, justify, initial, inherit This specifies the horizontal alignment of text in an element.
text-align-last left, right, center, justify, start, end, auto, initial, inherit This specifies the horizontal alignment of last line of text in an element.
text-decoration none, underline, overline, line-through, initial, inherit This specifies the decoration to be used on text in an element.
text-decoration-color color, initial, inherit This specifies the color decoration to be used on text in an element.
text-decoration-line none, underline, overline, line-through, initial, inherit This specifies the line decoration to be used on text in an element.
text-decoration-style solid, double, dotted, dashed, wavy, initial, inherit This specifies how the line decoration will be displayed in an element.
text-indent indent, initial, inherit This specifies the indent of the first line if text in an element.
text-justify auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida, trim, initial, inherit This specifies the justification for text when the text-align property is set to "justify."
text-overflow message, clip, ellipsis, initial, inherit This specifies how overflow content should be indicated.
text-shadow horiz vert blur color, none, initial, inherit This specifies how many and in what manner shadows should be added to text. Multple shadows may be specified by comma separators.
text-transform capitalize, uppercase, lowercase, none, initial, inherit This specifies the capitalization of text characters.
top y_coordinate, auto, initial, inherit This specifies the top edge of an element with absolute positioning.
transform matrix(xx, yx, yx, yy, dx, dy), matrix3d(xx, yx, zx, wx, xy, yy, zy, wy, xz, yz, zz, wz, xw, yw, zw, ww), translate(dx, dy), translate3d(dx, dy, dz), translateX(dx), translateY(dy), translateZ(dz), scale(sx, sy), scale3d(sx, sy, sz), scaleX(sx), scaleY(sy), scaleZ(sz), rotate(theta), rotate3d(x, y, z, theta), rotateX(theta), rotateY(theta), rotateZ(theta), skew(theta_x, theta_y), skewX(theta_x), skewY(theta_y), perspective(dist_z), none, initial, inherit This specifies a 2D or 3D transfrom to apply to an element.
transform-origin matrix(x, y, z, initial, inherit This specifies the position of transformed elements.
transform-style flat, preserve-3d, initial, inherit This specifies how nested elements are rendered in 3D space.
transition property duration timing_function delay, initial, inherit This specifies all of the transition attributes.
transition-delay delay, initial, inherit This specifies when the transition begins.
transition-duration time, initial, inherit This specifies how long the transition takes.
transition-property property, all, none, initial, inherit This specifies the name of the CSS property to which the transition applies.
transition-timing-function cubic-bezier(cx1, cy1, cx2, cy2), steps(intervals, start or end), ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit This specifies the curve of the transition function.
unicode-bidi normal, embed, bidi-override, initial, inherit This specifies, along with the direction property, whether the text should be overridden to support multiple languages in a single document.
user-select auto, none, text, all This specifies whether the text can be selected.
vertical-align adjustment, baseline, sub, super, top, text-top, middle, bottom, text-bottom, initial, inherit This specifies the vertical alignment of an element.
visibility visible, hidden, collapse, initial, inherit This specifies whether an element should be visible.
white-space normal, nowrap, pre, pre-line, pre-wrap, initial, inherit This specifies how white-space is handled in an element.
width width, auto, initial, inherit This specifies the width of an element.
word-break normal, break-all, keep-all, initial, inherit This specifies the line breaking rules for text that is not Chinese, Japanese or Korean.
word-spacing width, normal, initial, inherit This specifies adjusts the amount of white space between words for an element.
word-wrap normal, break-word, initial, inherit This specifies the wrapping for long words and whether they can be broken and wrapped in an element.
z-index index, normal, initial, inherit This specifies stacking order of an element.