CSS3 Properties

The following section contains a list of CSS3 properties along with a brief description.

The following section contains a complete list of standard properties belonging to the latest CSS3 specifications. All the properties are listed alphabetically.

• align-content: Specifies the orientation of the objects in the flexible container within the flex container.
• align-items: Specifies the default alignment for flex container components.
• align-self: The alignment of chosen objects within the flex container is specified.
• animation: This property specifies the keyframe-based animations.
• animation-delay: When the animation will begin is specified.
• animation-direction: Specifies whether or not the animation should be played backwards on alternate cycles.
• animation-duration: Specifies the amount of seconds or milliseconds it should take for an animation to complete one cycle.
• animation-fill-mode: Specifies how a CSS animation should style its target before and after it executes.
• animation-iteration-count: Specifies how many times an animation cycle should be performed before it is stopped.
• animation-name: The name of the @keyframes specified animations that should be applied to the chosen element. Indicates whether the animation is active or halted.
• animation-play-state: Indicates whether the animation is active or halted.
• animation-timing-function: Specifies how a CSS animation should develop during each cycle.
• backface-visibility: When facing the user, this property specifies whether or not the "back" side of a converted element is shown.
• background: Within a single declaration, a range of background characteristics are defined.
• background-attachment: Choose whether the background picture remains fixed in the viewport or scrolls.
• background-clip: Specifies the background painting area.
• background-color: The backdrop colour of an element is defined by this property.
• background-image: The background image of an element is defined by this property.
• background-origin: Specifies the region in which the background pictures will be positioned.
• background-position: The origin of a backdrop picture is defined by this property.
• background-repeat: Specify whether or not the background picture should be tiled.
• background-size: The size of the backdrop pictures is specified here.
• border: Sets the width, style, and colour of an element's border on all four sides.
• border-bottom: Sets the width, style, and colour of an element's bottom border.
• border-bottom-color: Sets the colour of an element's bottom border.
• border-bottom-left-radius: Defines the form of an element's bottom-left border corner.
• border-bottom-right-radius: Defines the form of an element's bottom-right border corner.
• border-bottom-style: Sets the style of an element's bottom border.
• border-bottom-width: Sets the width of an element's bottom border.
• border-collapse: This property specifies whether the table cell boundaries are joined or separated.
• border-color: Sets the colour of an element's border on all four sides.
• border-image: Specifies how an image should be used instead of border styles.
• border-image-outset: The amount by which the border image area extends beyond the border box is specified.
• border-image-repeat: This option specifies whether the picture border should be repeated, rounded, or extended.
• border-image-slice: Specifies the image-inward border's offsets.
• border-image-source: Specifies where the picture will be used as a border.
• border-image-width: The width of the picture border is specified here.
• border-left: Sets the width, style, and colour of an element's left border.
• border-left-color: Sets the colour of an element's left border.
• border-left-style: Sets the style of an element's left border.
• border-left-width: Sets the width of an element's left border.
• border-radius: Defines the form of an element's border corners.
• border-right: Sets the width, style, and colour of an element's right border.
• border-right-color: Sets the colour of an element's right border.
• border-right-style: Sets the style of an element's right border.
• border-right-width: Sets the width of an element's right border.
• border-spacing: Sets the distance between neighbouring table cell borders.
• border-style: Sets the border style for all four edges of an element.
• border-top: Sets the width, style, and colour of an element's top border.
• border-top-color: Sets the colour of an element's top border.
• border-top-left-radius: Defines the form of an element's top-left border corner.
• border-top-right-radius: Specifies the form of an element's top-right border corner.
• border-top-style: Sets the style of an element's top border.
• border-top-width: Sets the width of an element's top border.
• border-width: Sets the width of an element's border on all four edges.
• bottom: Specify the position of the positioned element's bottom edge.
• box-shadow: The element's box is given one or more drop-shadows.
• box-sizing: Modify the CSS box model by default.
• caption-side: Set the location of the table's caption.
• clear: Specifies an element's position with regard to floating elements.
• clip: The clipping area is defined here.
• color: Specify the colour of an element's text.
• column-count: The number of columns in a multi-column element is specified.
• column-fill: Specifies how columns are to be filled.
• column-gap: In a multi-column element, this specifies the space between the columns.
• column-rule: In a multi-column layout, this property specifies the colour of the rules drawn between columns.
• column-rule-color: In a multi-column layout, this property specifies the style of the rule drawn between the columns.
• column-rule-style: In a multi-column layout, this property specifies the style of the rule drawn between the columns.
• column-rule-width: In a multi-column layout, this property specifies the width of the rule drawn between the columns.
• column-span: In a multi-column layout, specifies how many columns an element runs across.
• column-width: Specifies the appropriate column width in a multi-column element.
• columns: A shortcut for configuring the column-width and column-count parameters.
• content: This function inserts created material.
• counter-increment: Increase the value of one or more counters.
• counter-reset: One or more counters are created or reset.
• cursor: Choose the kind of cursor.
• direction: Define the textual/writing direction.
• display: Specifies how an element should be presented on the screen.
• empty-cells: Empty table cell borders and backgrounds can be shown or hidden.
• flex: The components of a flexible length are specified.
• flex-basis: Specifies the flex item's initial primary size.
• flex-direction: This property specifies the orientation of the flexible objects.
• flex-flow: A shortcut for the flex-direction and flex-wrap attributes.
• flex-grow: This property specifies how the flex item will expand in relation to the other items in the flex container.
• flex-shrink: Specifies how the flex item will shrink in relation to the other things included within the flex container.
• flex-wrap: Specifies whether or not the flexible objects should be wrapped.
• float: Specifies whether a box should float or not.
• font: Within a single declaration, a range of font attributes are defined.
• font-family: This property specifies a list of typefaces for the element.
• font-size: The font size for the text is specified here.
• font-size-adjust: When font fallback occurs, the readability of the text is preserved.
• font-stretch: From a font, choose a standard, condensed, or extended face.
• font-style: This property specifies the font style for the text.
• font-variant: Choose a font variation.
• font-weight: Text font weight can be specified.
• height: Specify an element's height.
• justify-content: After any flexible lengths and auto margins have been resolved, this property specifies how flex items are aligned along the main axis of the flex container.
• left: Set the position of the positioned element's left edge.
• letter-spacing: Sets the additional space between letters.
• line-height: Sets the distance between text lines.
• list-style: Defines the display style for a list and its components.
• list-style-image: Specifies the picture to be used as a list-item marker.
• list-style-position: Defines the location of the list-item marker.
• list-style-type: Specifies the marker style for a list item.
• margin: Sets the margin on all four edges of the element.
• margin-bottom: Sets the bottom margin of the element.
• margin-left: The element's left margin is set.
• margin-right: Sets the right margin of the element.
• margin-top: Sets the top margin of the element.
• max-height: Set the maximum height of an element.
• max-width: Set the maximum width of an element.
• min-height: Specify an element's minimum height.
• min-width: Specify an element's minimum width.
• opacity: Specifies an element's transparency.
• order: The order in which flex objects are presented and put out within a flex container is specified.
• outline: Sets the width, style, and colour of an element's outline on all four sides.
• outline-color: The colour of the outline is set here.
• outline-offset: Set the distance between an outline and an element's border edge.
• outline-style: Sets the outline's style.
• outline-width: Sets the width of the outline.
• overflow: Specifies how content that exceeds the element's box should be handled.
• overflow-x: Specifies how to handle material that horizontally exceeds the element's box.
• overflow-y: Specifies how material that exceeds the element's box vertically should be handled.
• padding: padding Adds padding to the element's four sides.
• padding-bottom: Padding is applied to the bottom side of an element.
• padding-left: Sets the padding on an element's left side.
• padding-right: Padding is applied to the right side of an element.
• padding-top: Padding is applied to the top side of an element.
• page-break-after: After an element, insert a page break.
• page-break-before: Before an element, insert a page break.
• page-break-inside: Add a page break within an element.
• perspective: Defines the viewpoint from which all of the object's child components are viewed.
• perspective-origin: Defines the perspective property's origin (the vanishing point in 3D space).
• position: This property specifies how an element is positioned.
• quotes: For embedded quotes, specifies quotation marks.
• resize: Specifies whether or not a user may resize an element.
• right: Specify the position of the positioned element's right edge.
• tab-size: The length of the tab character is specified here.
• table-layout: A table layout algorithm is described.
• text-align: This property specifies the horizontal alignment of inline text.
• text-align-last: When text-align is justified, this property specifies how the final line of a block or the line just before a forced line break is aligned.
• text-decoration: Specifies the ornamentation that has been added to the text.
• text-decoration-color: The color of the text-decoration-line is specified here.
• text-decoration-line: Specifies the kind of line decorations that will be added to the element.
• text-decoration-style: The text-decoration-line attribute specifies the style of the lines.
• text-indent: The first line of text should be indented.
• text-justify: When the text-align property is set, this property specifies the justification technique to be used.
• text-overflow: When the text content overflows the block containers, this property specifies how it will be presented.
• text-shadow: Apply one or more shadows to an element's text content.
• text-transform: The text's case is transformed.
• top: Specify the position of the positioned element's top edge.
• transform: A 2D or 3D transformation is applied to an element.
• transform-origin: Defines the source of an element's transformation.
• transform-style: This property specifies how nested items are represented in 3D space.
• transition: The transition between two states of an element is defined by transition.
• transition-delay: When the transition impact will begin is specified.
• transition-duration: Specifies how many seconds or milliseconds it should take for a transition effect to finish.
• transition-property: The names of the CSS attributes to which a transition effect should be applied are specified.
• transition-timing-function: Specifies the transition effect's speed curve.
• vertical-align: Sets an element's vertical position in relation to the current text baseline.
• visibility: The visibility of an element specifies whether or not it is visible.
• white-space: Specifies how white space within the element should be treated.
• width: Specify an element's width.
• word-break: Specifies how lines inside words should be broken.
• word-spacing: This property specifies the space between words.
• word-wrap: When the content of a container exceeds the bounds of its container, this option specifies whether or not to break the words.
• z-index: For positioned items, specifies a layering or stacking sequence.