CSS Reference

X

## CSS Reference

CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser Support

## CSS Properties

align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

# CSS Reference

« W3Schools Home
Next Reference »

W3Schools' CSS reference is tested regularly with all major browsers.

## CSS Properties

### CSS Property Groups

- Color
- Background and Borders
- Basic Box
- Flexible Box
- Text
- Text Decoration
- Fonts
- Writing Modes

- Table
- Lists and Counters
- Animation
- Transform
- Transition
- Basic User Interface
- Multi-column

- Paged Media
- Generated Content
- Filter Effects
- Image/Replaced Content
- Masking
- Speech
- Marquee

The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

## Color Properties

Property | Description | CSS
--- | --- | ---
color | Sets the color of text | 1
opacity | Sets the opacity level for an element | 3

## Background and Border Properties

Property | Description | CSS
--- | --- | ---
background | Sets all the background properties in one declaration | 1
background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | 1
background-color | Sets the background color of an element | 1
background-image | Sets the background image for an element | 1
background-position | Sets the starting position of a background image | 1
background-repeat | Sets how a background image will be repeated | 1
background-clip | Specifies the painting area of the background | 3
background-origin | Specifies the positioning area of the background images | 3
background-size | Specifies the size of the background images | 3
border | Sets all the border properties in one declaration | 1
border-bottom | Sets all the bottom border properties in one declaration | 1
border-bottom-color | Sets the color of the bottom border | 1
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner | 3
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner | 3
border-bottom-style | Sets the style of the bottom border | 1
border-bottom-width | Sets the width of the bottom border | 1
border-color | Sets the color of the four borders | 1
border-image | A shorthand property for setting all the border-image-* properties | 3
border-image-outset | Specifies the amount by which the border image area extends beyond the border box | 3
border-image-repeat | Specifies whether the image-border should be repeated, rounded or stretched | 3
border-image-slice | Specifies the inward offsets of the image-border | 3
border-image-source | Specifies an image to be used as a border | 3
border-image-width | Specifies the widths of the image-border | 3
border-left | Sets all the left border properties in one declaration | 1
border-left-color | Sets the color of the left border | 1
border-left-style | Sets the style of the left border | 1
border-left-width | Sets the width of the left border | 1
border-radius | A shorthand property for setting all the four border-*-radius properties | 3
border-right | Sets all the right border properties in one declaration | 1
border-right-color | Sets the color of the right border | 1
border-right-style | Sets the style of the right border | 1
border-right-width | Sets the width of the right border | 1
border-style | Sets the style of the four borders | 1
border-top | Sets all the top border properties in one declaration | 1
border-top-color | Sets the color of the top border | 1
border-top-left-radius | Defines the shape of the border of the top-left corner | 3
border-top-right-radius | Defines the shape of the border of the top-right corner | 3
border-top-style | Sets the style of the top border | 1
border-top-width | Sets the width of the top border | 1
border-width | Sets the width of the four borders | 1
box-decoration-break | Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break. | 3
box-shadow | Attaches one or more drop-shadows to the box | 3

## Basic Box Properties

Property | Description | CSS
--- | --- | ---
bottom | Specifies the bottom position of a positioned element | 2
clear | Specifies which sides of an element where other floating elements are not allowed | 1
clip | Clips an absolutely positioned element | 2
display | Specifies how a certain HTML element should be displayed | 1
float | Specifies whether or not a box should float | 1
height | Sets the height of an element | 1
left | Specifies the left position of a positioned element | 2
overflow | Specifies what happens if content overflows an element's box | 2
overflow-x | Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area | 3
overflow-y | Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area | 3
padding | Sets all the padding properties in one declaration | 1
padding-bottom | Sets the bottom padding of an element | 1
padding-left | Sets the left padding of an element | 1
padding-right | Sets the right padding of an element | 1
padding-top | Sets the top padding of an element | 1
position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed) | 2
right | Specifies the right position of a positioned element | 2
top | Specifies the top position of a positioned element | 2
visibility | Specifies whether or not an element is visible | 2
width | Sets the width of an element | 1
vertical-align | Sets the vertical alignment of an element | 1
z-index | Sets the stack order of a positioned element | 2

## Flexible Box Layout

Property | Description | CSS
--- | --- | ---
align-content | Specifies the alignment between the lines inside a flexible container when the items do not use all available space. | 3
align-items | Specifies the alignment for items inside a flexible container. | 3
align-self | Specifies the alignment for selected items inside a flexible container. | 3
display | Specifies how a certain HTML element should be displayed | 1
flex | Specifies the length of the item, relative to the rest | 3
flex-basis | Specifies the initial length of a flexible item | 3
flex-direction | Specifies the direction of the flexible items | 3
flex-flow | A shorthand property for the flex-direction and the flex-wrap properties | 3
flex-grow | Specifies how much the item will grow relative to the rest | 3
flex-shrink | Specifies how the item will shrink relative to the rest | 3
flex-wrap | Specifies whether the flexible items should wrap or not | 3
justify-content | Specifies the alignment between the items inside a flexible container when the items do not use all available space. | 3
margin | Sets all the margin properties in one declaration | 1
margin-bottom | Sets the bottom margin of an element | 1
margin-left | Sets the left margin of an element | 1
margin-right | Sets the right margin of an element | 1
margin-top | Sets the top margin of an element | 1
max-height | Sets the maximum height of an element | 2
max-width | Sets the maximum width of an element | 2
min-height | Sets the minimum height of an element | 2
min-width | Sets the minimum width of an element | 2
order | Sets the order of the flexible item, relative to the rest | 3

## Text Properties

Property | Description | CSS
--- | --- | ---
hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3
hyphens | Sets how to split words to improve the layout of paragraphs | 3
letter-spacing | Increases or decreases the space between characters in a text | 1
line-break |  | 3
line-height | Sets the line height | 1
overflow-wrap |  | 3
tab-size | Specifies the length of the tab-character | 3
text-align | Specifies the horizontal alignment of text | 1
text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3
text-indent | Specifies the indentation of the first line in a text-block | 1
text-justify | Specifies the justification method used when text-align is "justify" | 3
text-transform | Controls the capitalization of text | 1
white-space | Specifies how white-space inside an element is handled | 1
word-break | Specifies line breaking rules for non-CJK scripts | 3
word-spacing | Increases or decreases the space between words in a text | 1
word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3

## Text Decoration Properties

Property | Description | CSS
--- | --- | ---
text-decoration | Specifies the decoration added to text | 1
text-decoration-color | Specifies the color of the text-decoration | 3
text-decoration-line | Specifies the type of line in a text-decoration | 3
text-decoration-style | Specifies the style of the line in a text decoration | 3
text-shadow | Adds shadow to text | 3
text-underline-position |  | 3

## Font Properties

Property | Description | CSS
--- | --- | ---
font | Sets all the font properties in one declaration | 1
font-family | Specifies the font family for text | 1
font-feature-setting |  | 3
@font-feature-values |  | 3
font-kerning |  | 3
font-language-override |  | 3
font-synthesis |  | 3
font-variant-alternates |  | 3
font-variant-caps |  | 3
font-variant-east-asian |  | 3
font-variant-ligatures |  | 3
font-variant-numeric |  | 3
font-variant-position |  | 3
font-size | Specifies the font size of text | 1
font-style | Specifies the font style for text | 1
font-variant | Specifies whether or not a text should be displayed in a small-caps font | 1
font-weight | Specifies the weight of a font | 1
@font-face | A rule that allows websites to download and use fonts other than the "web-safe" fonts | 3
font-size-adjust | Preserves the readability of text when font fallback occurs | 3
font-stretch | Selects a normal, condensed, or expanded face from a font family | 3

## Writing Modes Properties

Property | Description | CSS
--- | --- | ---
direction | Specifies the text direction/writing direction | 2
text-orientation |  | 3
text-combine-horizontal |  | 3
unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document | 2
writing-mode |  | 3

## Table Properties

Property | Description | CSS
--- | --- | ---
border-collapse | Specifies whether or not table borders should be collapsed | 2
border-spacing | Specifies the distance between the borders of adjacent cells | 2
caption-side | Specifies the placement of a table caption | 2
empty-cells | Specifies whether or not to display borders and background on empty cells in a table | 2
table-layout | Sets the layout algorithm to be used for a table | 2

## Lists and Counters Properties

Property | Description | CSS
--- | --- | ---
counter-increment | Increments one or more counters | 2
counter-reset | Creates or resets one or more counters | 2
list-style | Sets all the properties for a list in one declaration | 1
list-style-image | Specifies an image as the list-item marker | 1
list-style-position | Specifies if the list-item markers should appear inside or outside the content flow | 1
list-style-type | Specifies the type of list-item marker | 1

## Animation Properties

Property | Description | CSS
--- | --- | ---
@keyframes | Specifies the animation | 3
animation | A shorthand property for all the animation properties below, except the animation-play-state property | 3
animation-delay | Specifies when the animation will start | 3
animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles | 3
animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle | 3
animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing | 3
animation-iteration-count | Specifies the number of times an animation should be played | 3
animation-name | Specifies a name for the @keyframes animation | 3
animation-timing-function | Specifies the speed curve of the animation | 3
animation-play-state | Specifies whether the animation is running or paused | 3

## Transform Properties

Property | Description | CSS
--- | --- | ---
backface-visibility | Defines whether or not an element should be visible when not facing the screen | 3
perspective | Specifies the perspective on how 3D elements are viewed | 3
perspective-origin | Specifies the bottom position of 3D elements | 3
transform | Applies a 2D or 3D transformation to an element | 3
transform-origin | Allows you to change the position on transformed elements | 3
transform-style | Specifies how nested elements are rendered in 3D space | 3

## Transitions Properties

Property | Description | CSS
--- | --- | ---
transition | A shorthand property for setting the four transition properties | 3
transition-property | Specifies the name of the CSS property the transition effect is for | 3
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete | 3
transition-timing-function | Specifies the speed curve of the transition effect | 3
transition-delay | Specifies when the transition effect will start | 3

## Basic User Interface Properties

Property | Description | CSS
--- | --- | ---
box-sizing | Allows you to define certain elements to fit an area in a certain way | 3
content | Used with the :before and :after pseudo-elements, to insert generated content | 2
cursor | Specifies the type of cursor to be displayed | 2
icon | Provides the author the ability to style an element with an iconic equivalent | 3
ime-mode |  | 3
nav-down | Specifies where to navigate when using the arrow-down navigation key | 3
nav-index | Specifies the tabbing order for an element | 3
nav-left | Specifies where to navigate when using the arrow-left navigation key | 3
nav-right | Specifies where to navigate when using the arrow-right navigation key | 3
nav-up | Specifies where to navigate when using the arrow-up navigation key | 3
outline | Sets all the outline properties in one declaration | 2
outline-color | Sets the color of an outline | 2
outline-offset | Offsets an outline, and draws it beyond the border edge | 3
outline-style | Sets the style of an outline | 2
outline-width | Sets the width of an outline | 2
resize | Specifies whether or not an element is resizable by the user | 3
text-overflow | Specifies what should happen when text overflows the containing element | 3

## Multi-column Layout Properties

Property | Description | CSS
--- | --- | ---
break-after |  | 3
break-before |  | 3
break-inside |  | 3
column-count | Specifies the number of columns an element should be divided into | 3
column-fill | Specifies how to fill columns | 3
column-gap | Specifies the gap between the columns | 3
column-rule | A shorthand property for setting all the column-rule-* properties | 3
column-rule-color | Specifies the color of the rule between columns | 3
column-rule-style | Specifies the style of the rule between columns | 3
column-rule-width | Specifies the width of the rule between columns | 3
column-span | Specifies how many columns an element should span across | 3
column-width | Specifies the width of the columns | 3
columns | A shorthand property for setting column-width and column-count | 3
widows | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2

## Paged Media

Property | Description | CSS
--- | --- | ---
orphans | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2
page-break-after | Sets the page-breaking behavior after an element | 2
page-break-before | Sets the page-breaking behavior before an element | 2
page-break-inside | Sets the page-breaking behavior inside an element | 2

## Generated Content for Paged Media

Property | Description | CSS
--- | --- | ---
marks | Adds crop and/or cross marks to the document | 3
quotes | Sets the type of quotation marks for embedded quotations | 2

## Filter Effects Properties

Property | Description | CSS
--- | --- | ---
filter |  | 3

## Image Values and Replaced Content

Property | Description | CSS
--- | --- | ---
image-orientation | Specifies a rotation in the right or clockwise direction that a user agent applies to an image | 3
image-rendering |  | 3
image-resolution |  | 3
object-fit |  | 3
object-position |  | 3

## Masking Properties

Property | Description | CSS
--- | --- | ---
mask |  | 3
mask-type |  | 3

## Speech Properties

Property | Description | CSS
--- | --- | ---
mark | A shorthand property for setting the mark-before and mark-after properties | 3
mark-after | Allows named markers to be attached to the audio stream | 3
mark-before | Allows named markers to be attached to the audio stream | 3
phonemes | Specifies a phonetic pronunciation for the text contained by the corresponding element | 3
rest | A shorthand property for setting the rest-before and rest-after properties | 3
rest-after | Specifies a rest or prosodic boundary to be observed after speaking an element's content | 3
rest-before | Specifies a rest or prosodic boundary to be observed before speaking an element's content | 3
voice-balance | Specifies the balance between left and right channels | 3
voice-duration | Specifies how long it should take to render the selected element's content | 3
voice-pitch | Specifies the average pitch (a frequency) of the speaking voice | 3
voice-pitch-range | Specifies variation in average pitch | 3
voice-rate | Controls the speaking rate | 3
voice-stress | Indicates the strength of emphasis to be applied | 3
voice-volume | Refers to the amplitude of the waveform output by the speech synthesises | 3

## Marquee Properties

Property | Description | CSS
--- | --- | ---
marquee-direction | Sets the direction of the moving content | 3
marquee-play-count | Sets how many times the content move | 3
marquee-speed | Sets how fast the content scrolls | 3
marquee-style | Sets the style of the moving content | 3

« W3Schools Home
Next Reference »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

UK Reseller Hosting cPanel Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER Free HTML5 Templates

## W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

## SHARE THIS PAGE

## WEB RESOURCES

Web Statistics Web Validation