CSS Reference

 

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

 

CSS Properties

CSS Property Groups

   

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

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

Tells the browser what the sizing properties (width and height) should include

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