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
- 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
- font-feature-settings
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font-family
- 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
- 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
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- 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
- 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
- size
- speak-header
- speak-numeral
- speak-punctuation
- speak
- speech-rate
- stress
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-indent
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- 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
- 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
CSS Reference
This CSS reference guide helps you find CSS answers quickly. We cover all CSS properties and values — with examples. Try the code examples in our unique online CSS Editor.
CSS Properties
CSS properties determine the design and behavior of an element. Properties can change color, background, animations, and more. This reference guide includes all CSS properties with examples.
Using properties
A CSS property declaration appears as a property: value pair, for example: color: red . Each declaration is assigned to a selector with one or more property declarations .
Syntax
CSS declarations can also include multiple properties and/or selectors.
A block of properties is called a rule set .
selector1, selector2, selector3
CSS Selectors
If HTML has tags, CSS uses selectors. Selectors are names specified in internal or external stylesheets. It can be an HTML tag, class, id, or more. Curly brackets are used to enclose properties inside selectors. A value is assigned to a property using a colon (:) . Semi-colons separate each property.
CSS Length
Numerous properties require a length value, for example height, width, border-width, margin, and line-height. Their values are expressed as a unit of measure. CSS supports different units. Here are some examples: 10px, 1.2em, 2cm, 40%, etc
CSS units can be absolute or relative:
Absolute Lengths
- Absolute length units have a fixed size .
- With absolute lengths be aware that different devices have different screen sizes.
- These are the CSS absolute length units.
- px — unit for pixels (.e.g. width: 220px)
- pt — unit for points, usually used for printed media (e.g. font-size: 14pt)
- pc — unit for picas where 1pc = 12pt (e.g. font-size: 2pc)
- cm — unit for centimeters
- mm — unit for millimeters
- in — unit for inches where 1in = 96px (e.g. height: 2in)
Relative Lengths
- Relative length units adapt to the parent element, screen size, or resolution.
- These are the CSS relative length units.
- em — relative to the font size, so 2em is twice the current font size
- % — relative to the parent (e.g. width: 50%)
- ex — rarely used, relative to x-height of current font
- ch — relative to the width of the «0»
- rem — relative to the root element’s font size
- vw — relative to the browser window width
- vh — relative to the browser window height
- vmin — relative to the browser window smaller dimension
- vmax — relative to the browser window larger dimension
For a complete list of length units see our CSS Length Reference Guide
CSS Functions
CSS has a number of functions that are used as property values. These are built-in functions; custom functions are not supported in CSS.
A list of the CSS functions. Click the name for more details.
Function Description attr() Returns the selected element attribute value. calc() Performs calculations to determine CSS property values cubic-bezier() Specifies a cubic bezier curve hsl() Specifies color using the hue, saturation, lightness model (HSL) hsla() Specifies a color using the hue, saturation, lightness, alpha model (HSLA) linear-gradient() Specifies a linear background gradient with 2 or more color stops for top to bottom. radial-gradient() Specifies a radial background gradient with 2 or more color stops for center to edge. repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient rgb() Specifies a color using the red, green, blue model (RGB) rgba() Specifies colors using the red, green, blue, alpha model (RGBA) var() Inserts the value of a custom property CSS Defaults
Below are some elements and their default property values.
Element Defaults display: none; display: block; display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 50px;
margin-right: 50px;display: block;
margin: 10px;text-decoration: line-through; display: block;
margin-left: 3px;
margin-right: 3px;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid #ccc;display: inline-block;
margin-top: 0em;font-weight: bold; display: block; font-style: italic; display: inline-block; display: block;
padding-left: 3px;
padding-right: 3px;list-style-type: upper-roman; margin-left: 20px; display: block;
font-family: monospace;
white-space: pre;display: none; font-weight: bold; vertical-align: super;
font-size: smaller;border-collapse: collapse;
border: 1px solid black;display: table-cell;
vertical-align: inherit;display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;list-style-type: circle;