CSS Properties
Alphabetical list of all CSS properties from the CSS2 and CSS3 specifications.
- —*
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- azimuth
- backface-visibility
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- background
- bleed
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-bottom
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-source
- border-image-slice
- border-image-width
- border-left-color
- border-left-style
- border-left-width
- border-left
- border-radius
- border-right-color
- border-right-style
- border-right-width
- border-right
- border-spacing
- border-style
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-top
- border-width
- border
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip
- color
- color-interpolation-filters
- columns
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- content
- counter-increment
- counter-reset
- cue-after
- cue-before
- cue
- cursor
- direction
- display
- elevation
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- flood-color
- flood-opacity
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size-adjust
- font-size
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- font
- gap
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-column
- grid-gap
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-row
- grid-template-areas
- grid-template-columns
- grid-template-rows
- grid-template
- grid
- hanging-punctuation
- height
- hyphens
- image-rendering
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-break
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- margin-bottom
- margin-left
- margin-right
- margin-top
- margin
- marker-offset
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- nav-up
- nav-down
- nav-left
- nav-right
- object-fit
- object-position
- opacity
- order
- orphans
- outline-color
- outline-offset
- outline-style
- outline-width
- outline
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding-bottom
- padding-left
- padding-right
- padding-top
- padding
- page-break-after
- page-break-before
- page-break-inside
- page
- pause-after
- pause-before
- pause
- perspective
- perspective-origin
- pitch-range
- pitch
- place-content
- place-items
- place-self
- play-during
- position
- quotes
- resize
- rest-after
- rest-before
- rest
- richness
- right
- row-gap
- size
- speak-header
- speak-numeral
- speak-punctuation
- speak
- speech-rate
- stress
- tab-size
- table-layout
- text-align
- text-align-all
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-justify
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- voice-balance
- voice-duration
- voice-family
- voice-pitch
- voice-range
- voice-rate
- voice-stress
- voice-volume
- volume
- white-space
- widows
- width
- will-change
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
CSS3 Properties
The above list includes CSS2 and CSS3 properties.
The W3C is currently working on CSS3. CSS3 consists of various stand alone modules, each dealing in a specific area of CSS. For example, there’s the CSS Color Module, CSS Backgrounds and Borders Module, CSS Fonts Module, etc. Each of these modules is on its own development path, and therefore, they can have different level numbers. For example, one might be at level 3 while another is at level 4. Regardless, they are all considered «CSS3».
Here’s a separate list of CSS3 properties. These are some of the new properties that are being introduced to CSS via its various modules. These properties are also included in the above list.
How to use CSS Properties
CSS properties are used to apply styles to structured documents, such as those created with HTML or XML.
CSS properties are specified in the CSS standard. Each property has a set of possible values. Some properties can affect any type of element, and others apply only to particular groups of elements.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
CSS properties are used within a declaration block with a corresponding value.
In the following example, we set the background color of the body element to orange.
In this case, background-color is the property, and orange is its value.
And in this case, body is the «selector».
You can apply multiple properties against any selector:
You can also apply the same styles to multiple selectors at once.
Here’s an example of where styles can fit into an HTML document:
This example uses an embedded style sheet. You could also use an external style sheet and apply the styles against the whole site.
For more information on using CSS, check out the CSS tutorial.
Related
All css style properties
The all shorthand CSS property resets all of an element’s properties except unicode-bidi , direction , and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
Try it
Syntax
/* Global values */ all: initial; all: inherit; all: unset; all: revert; all: revert-layer;
The all property is specified as one of the CSS global keyword values. Note that none of these values affect the unicode-bidi and direction properties.
Values
Specifies that all the element’s properties should be changed to their initial values.
Specifies that all the element’s properties should be changed to their inherited values.
Specifies that all the element’s properties should be changed to their inherited values if they inherit by default, or to their initial values if not.
Specifies behavior that depends on the stylesheet origin to which the declaration belongs:
- If the rule belongs to the author origin, the revert value rolls back the cascade to the user level, so that the specified values are calculated as if no author-level rules were specified for the element. For purposes of revert , the author origin includes the Override and Animation origins.
- If the rule belongs to the user origin, the revert value rolls back the cascade to the user-agent level, so that the specified values are calculated as if no author-level or user-level rules were specified for the element.
- If the rule belongs to the user-agent origin, the revert value acts like unset .
Specifies that all the element’s properties should roll back the cascade to a previous cascade layer, if one exists. If no other cascade layer exists, the element’s properties will roll back to the matching rule, if one exists, in the current layer or to a previous style origin.
Formal definition
| Initial value | There is no practical initial value for it. |
|---|---|
| Applies to | all elements |
| Inherited | no |
| Computed value | as the specified value applies to each property this is a shorthand for. |
| Animation type | as each of the properties of the shorthand (all properties but unicode-bidi and direction ) |
Formal syntax
all =
initial |
inherit |
unset |
revert |
revert-layer