CSS3 Properties
Animation Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | animation | Specifies the keyframe-based animations. |
| 02. | animation-delay | Specifies when the animation will start. |
| 03. | animation-direction | Specifies whether the animation should play in reverse on alternate cycles or not. |
| 04. | animation-duration | Specifies the number of seconds or milliseconds an animation should take to complete one cycle. |
| 05. | animation-fill-mode | Specifies how a CSS animation should apply styles to its target before and after it is executing. |
| 06. | animation-iteration-count | Specifies the number of times an animation cycle should be played before stopping. |
| 07. | animation-name | Specifies the name of @keyframes defined animations that should be applied to the selected element. |
| 08. | animation-play-state | Specifies whether the animation is running or paused. |
| 09. | animation-timing-function | Specifies how a CSS animation should progress over the duration of each cycle. |
| 10. | animation-composition | Specifies how an animation's effect value combines with the underlying value of the property being animated. |
| 11. | animation-timeline | Specifies the timeline that is used to control the progress of a CSS animation. |
Background Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | background | Sets all the background properties in one declaration |
| 02. | background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| 03. | background-clip | Specifies the painting area of the background |
| 04. | background-color | Sets the background color of an element |
| 05. | background-image | Sets the background image for an element |
| 06. | background-origin | Specifies where the background image(s) is/are positioned |
| 07. | background-position | Sets the starting position of a background image |
| 08. | background-repeat | Sets how a background image will be repeated |
| 09. | background-size | Specifies the size of the background image(s) |
Border Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | border | Sets the width, style, and color for all four sides of an element's border. |
| 02. | border-bottom | Sets the width, style, and color of the bottom border of an element. |
| 03. | border-bottom-color | Sets the color of the bottom border of an element. |
| 04. | border-bottom-left-radius | Defines the shape of the bottom-left border corner of an element. |
| 05. | border-bottom-right-radius | Defines the shape of the bottom-right border corner of an element. |
| 06. | border-bottom-style | Sets the style of the bottom border of an element. |
| 07. | border-bottom-width | Sets the width of the bottom border of an element. |
| 08. | border-color | Sets the color of the border on all the four sides of an element. |
| 09. | border-image | Specifies how an image is to be used in place of the border styles. |
| 11. | border-image-outset | Specifies the amount by which the border image area extends beyond the border box. |
| 12. | border-image-repeat | Specifies whether the image-border should be repeated, rounded or stretched. |
| 13. | border-image-slice | Specifies the inward offsets of the image-border. |
| 14. | border-image-source | Specifies the location of the image to be used as a border. |
| 15. | border-image-width | Specifies the width of the image-border. |
| 16. | border-left | Sets the width, style, and color of the left border of an element. |
| 17. | border-left-color | Sets the color of the left border of an element. |
| 18. | border-left-style | Sets the style of the left border of an element. |
| 19. | border-left-width | Sets the width of the left border of an element. |
| 20. | border-radius | Defines the shape of the border corners of an element. |
| 21. | border-right | Sets the width, style, and color of the right border of an element. |
| 22. | border-right-color | Sets the color of the right border of an element. |
| 23. | border-right-style | Sets the style of the right border of an element. |
| 24. | border-right-width | Sets the width of the right border of an element. |
| 25. | border-style | Sets the style of the border on all the four sides of an element. |
| 26. | border-top | Sets the width, style, and color of the top border of an element. |
| 27. | border-top-color | Sets the color of the top border of an element. |
| 28. | border-top-left-radius | Defines the shape of the top-left border corner of an element. |
| 29. | border-top-right-radius | Defines the shape of the top-right border corner of an element. |
| 30. | border-top-style | Sets the style of the top border of an element. |
| 31. | border-top-width | Sets the width of the top border of an element. |
| 32. | border-width | Sets the width of the border on all the four sides of an element. |
Color Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | color | Specify the color of the text of an element. |
| 02. | opacity | Specifies the transparency of an element. |
| 03. | accent-color | Sets the accent color for UI controls like checkboxes, radio buttons, and range inputs. |
| 04. | caret-color | Sets the color of the text insertion cursor (caret) in an editable field. |
| 05. | color-scheme | Indicates which color schemes (light/dark) an element can be rendered in. |
Dimension Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | height | Specify the height of an element. |
| 02. | max-height | Specify the maximum height of an element. |
| 03. | max-width | Specify the maximum width of an element. |
| 04. | min-height | Specify the minimum height of an element. |
| 05. | min-width | Specify the minimum width of an element. |
| 06. | width | Specify the width of an element. |
| 07. | aspect-ratio | Sets a preferred aspect ratio for the box, used in the calculation of auto sizes. |
| 08. | inline-size | Defines the horizontal or vertical size of an element's box depending on its writing mode. |
| 09. | block-size | Defines the horizontal or vertical size of an element's box depending on its writing mode. |
Generated Content Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | content | Inserts generated content. |
| 02. | quotes | Specifies quotation marks for embedded quotations. |
| 03. | counter-reset | Creates or resets one or more counters. |
| 04. | counter-increment | Increments one or more counter values. |
Flexible Box Layout
| Sl.No | Property | Description |
|---|---|---|
| 01. | align-content | Specifies the alignment of flexible container's items within the flex container. |
| 02. | align-items | Specifies the default alignment for items within the flex container. |
| 03. | align-self | Specifies the alignment for selected items within the flex container. |
| 04. | flex | Specifies the components of a flexible length. |
| 05. | flex-basis | Specifies the initial main size of the flex item. |
| 06. | flex-direction | Specifies the direction of the flexible items. |
| 07. | flex-flow | A shorthand property for the flex-direction and the flex-wrap properties. |
| 08. | flex-grow | Specifies how the flex item will grow relative to the other items inside the flex container. |
| 09. | flex-shrink | Specifies how the flex item will shrink relative to the other items inside the flex container. |
| 10. | flex-wrap | Specifies whether the flexible items should wrap or not. |
| 11. | justify-content | Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved. |
| 12. | order | Specifies the order in which a flex items are displayed and laid out within a flex container. |
| 13. | gap | A shorthand for row-gap and column-gap in flex and grid containers. |
| 14. | row-gap | Sets the size of the gap between rows in a flex or grid container. |
| 15. | column-gap | Sets the size of the gap between columns in a flex or grid container. |
| 16. | justify-items | Defines the default justify-self for all items within the container. |
| 17. | justify-self | Sets the way a single box is justified inside its alignment container along the inline axis. |
| 18. | place-content | A shorthand for align-content and justify-content. |
| 19. | place-items | A shorthand for align-items and justify-items. |
| 20. | place-self | A shorthand for align-self and justify-self. |
Font Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | font | Defines a variety of font properties within one declaration. |
| 02. | font-family | Defines a list of fonts for element. |
| 03. | font-size | Defines the font size for the text. |
| 04. | font-size-adjust | Preserves the readability of text when font fallback occurs. |
| 05. | font-stretch | Selects a normal, condensed, or expanded face from a font. |
| 06. | font-style | Defines the font style for the text. |
| 07. | font-variant | Specify the font variant. |
| 08. | font-weight | Specify the font weight of the text. |
| 09. | font-feature-settings | Allows control over advanced typographic features in OpenType fonts. |
| 10. | font-kerning | Controls the use of the kerning information stored in a font. |
| 11. | font-optical-sizing | Sets whether text rendering is optimized for viewing at different sizes. |
| 12. | font-synthesis | Controls which missing typefaces (bold, italic, small-caps) may be synthesized by the browser. |
| 13. | font-variation-settings | Provides low-level control over OpenType or TrueType font variations. |
List Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | list-style | Defines the display style for a list and list elements. |
| 02. | list-style-image | Specifies the image to be used as a list-item marker. |
| 03. | list-style-position | Specifies the position of the list-item marker. |
| 04. | list-style-type | Specifies the marker style for a list-item. |
Margin Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | margin | Sets the margin on all four sides of the element. |
| 02. | margin-bottom | Sets the bottom margin of the element. |
| 03. | margin-left | Sets the left margin of the element. |
| 04. | margin-right | Sets the right margin of the element. |
| 05. | margin-top | Sets the top margin of the element. |
Multi-column Layout Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | column-count | Specifies the number of columns in a multi-column element. |
| 02. | column-fill | Specifies how columns will be filled. |
| 03. | column-gap | Specifies the gap between the columns in a multi-column element. |
| 04. | column-rule | Specifies a straight line, or “rule”, to be drawn between each column in a multi-column element. |
| 05. | column-rule-color | Specifies the color of the rules drawn between columns in a multi-column layout. |
| 06. | column-rule-style | Specifies the style of the rule drawn between the columns in a multi-column layout. |
| 07. | column-rule-width | Specifies the width of the rule drawn between the columns in a multi-column layout. |
| 08. | column-span | Specifies how many columns an element spans across in a multi-column layout. |
| 09. | column-width | Specifies the optimal width of the columns in a multi-column element. |
| 10. | columns | A shorthand property for setting column-width and column-count properties. |
Outline Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | outline | Sets the width, style, and color for all four sides of an element's outline. |
| 02. | outline-color | Sets the color of the outline. |
| 03. | outline-offset | Set the space between an outline and the border edge of an element. |
| 04. | outline-style | Sets a style for an outline. |
| 05. | outline-width | Sets the width of the outline. |
Padding Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | padding | Sets the padding on all four sides of the element. |
| 02. | padding-bottom | Sets the padding to the bottom side of an element. |
| 03. | padding-left | Sets the padding to the left side of an element. |
| 04. | padding-right | Sets the padding to the right side of an element. |
| 05. | padding-top | Sets the padding to the top side of an element. |
Table Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | border-collapse | Specifies whether table cell borders are connected or separated. |
| 02. | border-spacing | Sets the spacing between the borders of adjacent table cells. |
| 03. | caption-side | Specify the position of table's caption. |
| 04. | empty-cells | Show or hide borders and backgrounds of empty table cells. |
| 05. | table-layout | Specifies a table layout algorithm. |
Text Properties
| Sl.No | Property | Description | ||
|---|---|---|---|---|
| 01. | direction | Define the text direction/writing direction. | ||
| 02. | tab-size | Specifies the length of the tab character. | ||
| 03. | text-align | Sets the horizontal alignment of inline content. | ||
| 04. | text-align-last | Specifies how the last line of a block or a line right before a forced line break is aligned when | text-align is justify. | |
| 05. | text-decoration | Specifies the decoration added to text. | ||
| 06. | text-decoration-color | Specifies the color of the text-decoration-line. | ||
| 07. | text-decoration-line | Specifies what kind of line decorations are added to the element. | ||
| 08. | text-decoration-style | Specifies the style of the lines specified by the text-decoration-line property | ||
| 09. | text-indent | Indent the first line of text. | ||
| 10. | text-justify | Specifies the justification method to use when the text-align property is set to justify. | ||
| 11. | text-overflow | Specifies how the text content will be displayed, when it overflows the block containers. | ||
| 12. | text-shadow | Applies one or more shadows to the text content of an element. | ||
| 13. | text-transform | Transforms the case of the text. | ||
| 14. | line-height | Sets the height between lines of text. | ||
| 15. | vertical-align | Sets the vertical positioning of an element relative to the current text baseline. | ||
| 16. | letter-spacing | Sets the extra spacing between letters. | ||
| 17. | word-spacing | Sets the spacing between words. | ||
| 18. | white-space | Specifies how white space inside the element is handled. | ||
| 19. | word-break | Specifies how to break lines within words. | ||
| 20. | overflow-wrap | Specifies whether the browser may break lines within words to prevent overflow. | ||
| 21. | writing-mode | Specifies whether lines of text are laid out horizontally or vertically. | ||
| 22. | text-underline-offset | Sets the offset distance of an underline text decoration line from its original position. | ||
| 23. | text-emphasis | A shorthand for text-emphasis-style and text-emphasis-color. | ||
| 24. | text-emphasis-color | Sets the color of emphasis marks. | ||
| 25. | text-emphasis-position | Sets where emphasis marks are drawn relative to the text. | ||
| 26. | text-emphasis-style | Sets the appearance of emphasis marks on the text. | ||
| 27. | unicode-bidi | Specifies how the Unicode Bidirectional Algorithm should handle bidirectional text in the element. | ||
| 28. | text-rendering | Provides information to the rendering engine about what to optimize for when rendering text. |
Transform Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | backface-visibility | Specifies whether or not the “back” side of a transformed element is visible when facing the user. |
| 02. | perspective | Defines the perspective from which all child elements of the object are viewed. |
| 03. | perspective-origin | Defines the origin (the vanishing point for the 3D space) for the perspective property. |
| 04. | transform | Applies a 2D or 3D transformation to an element. |
| 05. | transform-origin | Defines the origin of transformation for an element. |
| 06. | transform-style | Specifies how nested elements are rendered in 3D space. |
Transitions Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | transition | Defines the transition between two states of an element. |
| 02. | transition-delay | Specifies when the transition effect will start. |
| 03. | transition-duration | Specifies the number of seconds or milliseconds a transition effect should take to complete. |
| 04. | transition-property | Specifies the names of the CSS properties to which a transition effect should be applied. |
| 05. | transition-timing-function | Specifies the speed curve of the transition effect. |
Visual formatting Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | display | Specifies how an element is displayed onscreen. |
| 02. | position | Specifies how an element is positioned. |
| 03. | top | Specify the location of the top edge of the positioned element. |
| 04. | right | Specify the location of the right edge of the positioned element. |
| 05. | bottom | Specify the location of the bottom edge of the positioned element. |
| 06. | left | Specify the location of the left edge of the positioned element. |
| 07. | float | Specifies whether or not a box should float. |
| 08. | clear | Specifies the placement of an element in relation to floating elements. |
| 09. | z-index | Specifies a layering or stacking order for positioned elements. |
| 10. | overflow | Specifies the treatment of content that overflows the element's box. |
| 11. | overflow-x | Specifies how to manage the content when it overflows the width of the element's content area. |
| 12. | overflow-y | Specifies how to manage the content when it overflows the height of the element's content area. |
| 13. | resize | Specifies whether or not an element is resizable by the user. |
| 14. | visibility | Specifies whether or not an element is visible. |
| 15. | cursor | Specify the type of cursor. |
| 16. | box-shadow | Applies one or more drop-shadows to the element's box. |
| 17. | box-sizing | Alter the default CSS box model. |
| 18. | appearance | Controls the native appearance of an element based on the operating system theme. |
| 19. | contain | Indicates that an element and its contents are as independent as possible from the rest of the document. |
| 20. | isolation | Defines whether an element must create a new stacking context. |
| 21. | mix-blend-mode | Sets how an element's content should blend with its parent's content and background. |
| 22. | object-fit | Specifies how a replaced element's content (image/video) is resized to fit its container. |
| 23. | object-position | Specifies the alignment of the replaced element's content within its box. |
| 24. | pointer-events | Specifies under what circumstances an element can become the target of pointer events. |
| 25. | user-select | Controls whether the user can select text within the element. |
| 26. | will-change | Hints to the browser about what kind of changes to expect to allow optimization ahead of time. |
Grid Layout Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | grid | A shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns and grid-auto-flow. |
| 02. | grid-area | Specifies a grid item's size and location within a grid by contributing lines, spans or nothing. |
| 03. | grid-auto-columns | Sets the size of implicitly created grid columns. |
| 04. | grid-auto-flow | Controls how auto-placed items are inserted in the grid (row, column, or dense packing). |
| 05. | grid-auto-rows | Sets the size of implicitly created grid rows. |
| 06. | grid-column | A shorthand for grid-column-start and grid-column-end. |
| 07. | grid-column-end | Specifies where to end the grid item in the column direction. |
| 08. | grid-column-start | Specifies where to start the grid item in the column direction. |
| 09. | grid-row | A shorthand for grid-row-start and grid-row-end. |
| 10. | grid-row-end | Specifies where to end the grid item in the row direction. |
| 11. | grid-row-start | Specifies where to start the grid item in the row direction. |
| 12. | grid-template | A shorthand for grid-template-rows, grid-template-columns and grid-template-areas. |
| 13. | grid-template-areas | Specifies how to display columns and rows using named grid item areas. |
| 14. | grid-template-columns | Defines the line names and track sizing functions of the grid columns. |
| 15. | grid-template-rows | Defines the line names and track sizing functions of the grid rows. |
Filter Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | filter | Applies graphical effects like blur, brightness, contrast, or color shift to an element. |
| 02. | backdrop-filter | Applies graphical effects to the area behind an element (requires the element to be at least partially transparent). |
Masking Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | clip-path | Specifies the clipping region using a basic shape, SVG source, or geometry box. |
| 02. | mask | A shorthand property for all the mask-* properties. |
| 03. | mask-clip | Specifies the area which is affected by the mask image. |
| 04. | mask-composite | Specifies the compositing operation used on the current mask layer with those below it. |
| 05. | mask-image | Specifies an image to be used as a mask layer for an element. |
| 06. | mask-mode | Specifies whether the mask layer image is treated as a luminance or alpha mask. |
| 07. | mask-origin | Specifies the origin position of the mask layer image. |
| 08. | mask-position | Sets the starting position of a mask layer image within the mask positioning area. |
| 09. | mask-repeat | Specifies whether and how a mask image is repeated (tiled). |
| 10. | mask-size | Specifies the size of a mask layer image. |
| 11. | mask-type | Specifies whether an SVG mask element is treated as a luminance or alpha mask. |
Scroll Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | scroll-behavior | Specifies the scrolling behavior for a scrolling box when triggered by navigation or CSSOM scrolling API. |
| 02. | scroll-margin | A shorthand for all the scroll-margin longhands (top, right, bottom, left). |
| 03. | scroll-margin-bottom | Sets the scroll margin on the bottom of an element. |
| 04. | scroll-margin-left | Sets the scroll margin on the left of an element. |
| 05. | scroll-margin-right | Sets the scroll margin on the right of an element. |
| 06. | scroll-margin-top | Sets the scroll margin on the top of an element. |
| 07. | scroll-padding | A shorthand for all the scroll-padding longhands. |
| 08. | scroll-padding-bottom | Sets the scroll padding on the bottom of the scroll container. |
| 09. | scroll-padding-left | Sets the scroll padding on the left of the scroll container. |
| 10. | scroll-padding-right | Sets the scroll padding on the right of the scroll container. |
| 11. | scroll-padding-top | Sets the scroll padding on the top of the scroll container. |
| 12. | scroll-snap-align | Specifies the box's snap position as an alignment of its snap area within its snap container. |
| 13. | scroll-snap-stop | Specifies whether the scroll container is allowed to pass over possible snap positions. |
| 14. | scroll-snap-type | Specifies how strictly snap points are enforced on the scroll container. |
| 15. | overscroll-behavior | Specifies what the browser does when reaching the boundary of a scrolling area. |
| 16. | overscroll-behavior-x | Specifies the overscroll behavior for the horizontal axis. |
| 17. | overscroll-behavior-y | Specifies the overscroll behavior for the vertical axis. |