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. |
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. |
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. |
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. |
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. |
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. |
Print Properties
| Sl.No | Property | Description |
|---|---|---|
| 01. | page-break-after | Insert a page breaks after an element. |
| 02. | page-break-before | Insert a page breaks before an element. |
| 03. | page-break-inside | Insert a page breaks inside 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. | word-wrap | Specifies whether to break words when the content overflows the boundaries of its container. |
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. | clip | Defines the clipping region. |
| 15. | visibility | Specifies whether or not an element is visible. |
| 16. | cursor | Specify the type of cursor. |
| 17. | box-shadow | Applies one or more drop-shadows to the element’s box. |
| 18. | box-sizing | Alter the default CSS box model. |