Core CSS
Properties Table
| 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:
|
| 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 the function that is used for the animation interpolation. |
| 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:
|
| 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:
|
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 whteher they can be broken and wrapped in an element. |
| z-index | index, normal, initial, inherit | This specifies stacking order of an element. |
© 2007–2024 XoaX.net LLC. All rights reserved.