CSS Reference Page 1 of 21

☰  HTML CSS MORE  

w3schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS Reference
❮ Home Next ❯

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

CSS Properties
CSS Property Groups
Color Table Paged Media
Background and Lists and Counters Generated Content
Borders Animation Filter Effects
Basic Box Transform Image/Replaced
Flexible Box Transition Content
Text Basic User Interface Masking
Text Decoration Multi-column Speech
Fonts Marquee
Writing Modes

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

Color Properties
Property Description CSS

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 2 of 21

color Sets the color of text 1

☰  HTML CSS MORE  
opacity Sets the opacity level for an element 3

Background and Border Properties

Property Description CSS

background A shorthand property for setting all the background 1

properties in one declaration

background- Sets whether a background image is fixed or scrolls 1

attachment with the rest of the page

background- Specifies the blending mode of each background 3

blend-mode layer (color/image)

background- Specifies the background color of an element 1

color

background- Specifies one or more background images for an 1

image element

background- Specifies the position of a background image 1

position

background- Sets how a background image will be repeated 1

repeat

background-clip Specifies the painting area of the background 3

background- Specifies where the background image(s) is/are 3

origin positioned

background-size Specifies the size of the background image(s) 3

border Sets all the border properties in one declaration 1

border-bottom Sets all the bottom border properties in one 1

declaration

border-bottom- Sets the color of the bottom border 1

color

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 3 of 21

border-bottom- Defines the shape of the border of the bottom-left

☰  HTML CSS MORE  
left-radius corner

border-bottom- Defines the shape of the border of the bottom-right 3

right-radius corner

border-bottom- Sets the style of the bottom border 1

style

border-bottom- Sets the width of the bottom border 1

width

border-color Sets the color of the four borders 1

border-image A shorthand property for setting all the border- 3

image-* properties

border-image- Specifies the amount by which the border image 3

outset area extends beyond the border box

border-image- Specifies whether the border image should be 3

repeat repeated, rounded or stretched

border-image- Specifies how to slice the border image 3

slice

border-image- Specifies the path to the image to be used as a 3

source border

border-image- Specifies the widths of the image-border 3

width

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- 3

*-radius properties

border-right Sets all the right border properties in one 1

declaration

Sets the color of the right border 1

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 4 of 21

border-right-
☰  HTML CSS MORE  
color

border-right- Sets the style of the right border 1

style

border-right- Sets the width of the right border 1

width

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- Defines the shape of the border of the top-left 3

radius corner

border-top- Defines the shape of the border of the top-right 3

right-radius corner

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- Sets the behaviour of the background and border of 3

break an element at page-break, or, for in-line elements,
at line-break.

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 2

element

clear Specifies which sides of an element where other 1

floating elements are not allowed

clip Clips an absolutely positioned element 2

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 5 of 21

display Specifies how a certain HTML element should be 1

☰  HTML CSS MORE  
displayed

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

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

overflow Specifies what happens if content overflows an 2

element's box

overflow-x Specifies whether or not to clip the left/right edges 3

of the content, if it overflows the element's content
area

overflow-y Specifies whether or not to clip the top/bottom 3

edges of the content, if it overflows the element's
content area

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

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 6 of 21

position Specifies the type of positioning method used for an 2

☰  HTML CSS MORE  
element (static, relative, absolute or fixed)

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 3

flexible container when the items do not use all
available space

align-items Specifies the alignment for items inside a flexible 3

container

align-self Specifies the alignment for selected items inside a 3

flexible container

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 3

flex-wrap properties

flex-grow Specifies how much the item will grow relative to 3

the rest

flex-shrink Specifies how the item will shrink relative to the 3

rest

flex-wrap 3

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 7 of 21

Specifies whether the flexible items should wrap or

☰  HTML CSS MORE  
not

justify-content Specifies the alignment between the items inside a 3

flexible container when the items do not use all
available space

order Sets the order of the flexible item, relative to the 3

rest

Text Properties
Property Description CSS

hanging- Specifies whether a punctuation character may be 3

punctuation placed outside the line box

hyphens Sets how to split words to improve the layout of 3

paragraphs

letter-spacing Increases or decreases the space between 1

characters in a text

line-break Specifies how/if to break lines 3

line-height Sets the line height 1

overflow-wrap Specifies whether or not the browser may break 3

lines within words in order to prevent overflow
(when a string is too long to fit its containing box)

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 3

before a forced line break is aligned when text-align
is "justify"

text-combine- Specifies the combination of multiple characters 3

upright into the space of a single character

text-indent Specifies the indentation of the first line in a text- 1

block

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 8 of 21

text-justify Specifies the justification method used when text- 3

☰  HTML CSS MORE  
align is "justify"

text-transform Controls the capitalization of text 1

white-space Specifies how white-space inside an element is 1

handled

word-break Specifies line breaking rules for non-CJK scripts 3

word-spacing Increases or decreases the space between words in 1

a text

word-wrap Allows long, unbreakable words to be broken and 3

wrap to the next line

Text Decoration Properties

Property Description CSS

text-decoration Specifies the decoration added to text 1

text-decoration- Specifies the color of the text-decoration 3

color

text-decoration- Specifies the type of line in a text-decoration 3

line

text-decoration- Specifies the style of the line in a text decoration 3

style

text-shadow Adds shadow to text 3

text-underline- Specifies the position of the underline which is set 3

position using the text-decoration property

Font Properties
Property Description CSS

@font-face A rule that allows websites to download and use 3

fonts other than the "web-safe" fonts

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 9 of 21

@font-feature- Allows authors to use a common name in font- 3

☰  HTML CSS MORE  
values variant-alternate for feature activated differently in
OpenType

font Sets all the font properties in one declaration 1

font-family Specifies the font family for text 1

font-feature- Allows control over advanced typographic features 3

settings in OpenType fonts

font-kerning Controls the usage of the kerning information (how 3

letters are spaced)

font-language- Controls the usage of language-specific glyphs in a 3

override typeface

font-size Specifies the font size of text 1

font-size-adjust Preserves the readability of text when font fallback 3

occurs

font-stretch Selects a normal, condensed, or expanded face 3

from a font family

font-style Specifies the font style for text 1

font-synthesis Controls which missing typefaces (bold or italic) 3

may be synthesized by the browser

font-variant Specifies whether or not a text should be displayed 1

in a small-caps font

font-variant- Controls the usage of alternate glyphs associated to 3

alternates alternative names defined in @font-feature-values

font-variant- Controls the usage of alternate glyphs for capital 3

caps letters

font-variant- Controls the usage of alternate glyphs for East 3

east-asian Asian scripts (e.g Japanese and Chinese)

font-variant- Controls which ligatures and contextual forms are 3

ligatures used in textual content of the elements it applies to

font-variant- Controls the usage of alternate glyphs for numbers, 3

numeric fractions, and ordinal markers

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 10 of 21

font-variant- Controls the usage of alternate glyphs of smaller 3

☰  HTML CSS MORE  
position size positioned as superscript or subscript regarding
the baseline of the font

font-weight Specifies the weight of a font 1

Writing Modes Properties

Property Description CSS

direction Specifies the text direction/writing direction 2

text-orientation Defines the orientation of the text in a line 3

text-combine- Specifies the combination of multiple characters 3

upright into the space of a single character

unicode-bidi Used together with the direction property to set or 2

return whether the text should be overridden to
support multiple languages in the same document

user-select Specifies whether the text of an element can be 3

selected

writing-mode 3

Table Properties
Property Description CSS

border-collapse Specifies whether or not table borders should be 2

collapsed

border-spacing Specifies the distance between the borders of 2

adjacent cells

caption-side Specifies the placement of a table caption 2

empty-cells Specifies whether or not to display borders and 2

background on empty cells in a table

table-layout Sets the layout algorithm to be used for a table 2

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 11 of 21

ListsandHTML
☰ Counters
CSS Properties
MORE  

Property Description CSS

counter- Increments one or more counters 2

increment

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- Specifies if the list-item markers should appear 1

position inside or outside the content flow

list-style-type Specifies the type of list-item marker 1

Animation Properties
Property Description CSS

@keyframes Specifies the animation code 3

animation A shorthand property for all the animation 3

properties (except animation-play-state and
animation-fill-mode)

animation-delay Specifies a delay for the start of an animation 3

animation- Specifies whether or not the animation should play 3

direction in reverse on alternate cycles

animation- Specifies how many seconds or milliseconds an 3

duration animation takes to complete one cycle

animation-fill- Specifies a style for the element when the 3

mode animation is not playing (when it is finished, or
when it has a delay)

animation- Specifies the number of times an animation should 3

iteration-count be played

animation-name Specifies the name of the @keyframes animation 3

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 12 of 21

 HTML
☰animation-play- CSS whether
Specifies MORE the animation is running or 3 
state paused

animation- Specifies the speed curve of an animation 3

timing-function

Transform Properties
Property Description CSS

backface- Defines whether or not an element should be visible 3

visibility when not facing the screen

perspective Specifies the perspective on how 3D elements are 3

viewed

perspective- Specifies the bottom position of 3D elements 3

origin

transform Applies a 2D or 3D transformation to an element 3

transform-origin Allows you to change the position on transformed 3

elements

transform-style Specifies how nested elements are rendered in 3D 3

space

Transitions Properties
Property Description CSS

transition A shorthand property for setting the four transition 3

properties

transition- Specifies the name of the CSS property the 3

property transition effect is for

transition- Specifies how many seconds or milliseconds a 3

duration transition effect takes to complete

transition- Specifies the speed curve of the transition effect 3

timing-function

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 13 of 21

transition-delay Specifies when the transition effect will start 3

☰  HTML CSS MORE  

Basic User Interface Properties

Property Description CSS

box-sizing Tells the browser what the sizing properties (width 3

and height) should include

content Used with the :before and :after pseudo-elements, 2

to insert generated content

cursor Specifies the type of cursor to be displayed 2

ime-mode Controls the state of the input method editor for 3

text fields

nav-down Specifies where to navigate when using the arrow- 3

down navigation key

nav-index Specifies the tabbing order for an element 3

nav-left Specifies where to navigate when using the arrow- 3

left navigation key

nav-right Specifies where to navigate when using the arrow- 3

right navigation key

nav-up Specifies where to navigate when using the arrow- 3

up navigation key

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 3

edge

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 3

the user

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 14 of 21

text-overflow Specifies what should happen when text overflows 3

☰  HTML CSS MORE  
the containing element

Multi-column Layout Properties

Property Description CSS

break-after Specifies the page-, column-, or region-break 3

behavior after the generated box

break-before Specifies the page-, column-, or region-break 3

behavior before the generated box

break-inside Specifies the page-, column-, or region-break 3

behavior inside the generated box

column-count Specifies the number of columns an element should 3

be divided into

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- 3

rule-* properties

column-rule- Specifies the color of the rule between columns 3

color

column-rule- Specifies the style of the rule between columns 3

style

column-rule- Specifies the width of the rule between columns 3

width

column-span Specifies how many columns an element should 3

span across

column-width Specifies the width of the columns 3

columns A shorthand property for setting column-width and 3

column-count

widows 2

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 15 of 21

Sets the minimum number of lines that must be left

☰  HTML CSS MORE  
at the top of a page when a page break occurs
inside an element

Paged Media
Property Description CSS

orphans Sets the minimum number of lines that must be left 2

at the bottom of a page when a page break occurs
inside an element

page-break-after Sets the page-breaking behavior after an element 2

page-break- Sets the page-breaking behavior before an element 2

before

page-break- Sets the page-breaking behavior inside an element 2

inside

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 2

quotations

Filter Effects Properties

Property Description CSS

filter Defines effects (e.g. blurring or color shifting) on an 3

element before the element is displayed

Image Values and Replaced Content

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 16 of 21

Property Description CSS

☰  HTML CSS MORE  
image- Specifies a rotation in the right or clockwise 3
orientation direction that a user agent applies to an image
(This property is likely going to be deprecated and
its functionality moved to HTML)

image-rendering Gives a hint to the browser about what aspects of 3

an image are most important to preserve when the
image is scaled

image-resolution Specifies the intrinsic resolution of all raster images 3

used in/on the element

object-fit Specifies how the contents of a replaced element 3

should be fitted to the box established by its used
height and width

object-position Specifies the alignment of the replaced element 3

inside its box

Masking Properties
Property Description CSS

mask 3

mask-type 3

Speech Properties
Property Description CSS

mark A shorthand property for setting the mark-before 3

and mark-after properties

mark-after Allows named markers to be attached to the audio 3

stream

mark-before Allows named markers to be attached to the audio 3

stream

phonemes 3

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 17 of 21

Specifies a phonetic pronunciation for the text

☰  HTML CSS MORE  
contained by the corresponding element

rest A shorthand property for setting the rest-before and 3

rest-after properties

rest-after Specifies a rest or prosodic boundary to be 3

observed after speaking an element's content

rest-before Specifies a rest or prosodic boundary to be 3

observed before speaking an element's content

voice-balance Specifies the balance between left and right 3

channels

voice-duration Specifies how long it should take to render the 3

selected element's content

voice-pitch Specifies the average pitch (a frequency) of the 3

speaking voice

voice-pitch- Specifies variation in average pitch 3

range

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 3

the speech synthesises

Marquee Properties
Property Description CSS

marquee- Sets the direction of the moving content 3

direction

marquee-play- Sets how many times the content move 3

count

marquee-speed Sets how fast the content scrolls 3

marquee-style Sets the style of the moving content 3

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 18 of 21

☰  HTML CSS MORE  

❮ Home Next ❯

COLOR PICKER

LEARN MORE
Tabs
Dropdowns

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 19 of 21

Accordions
☰  HTML CSS MORE  
Convert Weights
Animated Buttons
Side Navigation
Top Navigation
JS Animations
Modal Boxes
Progress Bars
Login Form
HTML Includes
Google Maps
Loaders
Tooltips
Slideshow
Filter List
Sort List

SHARE

  


CERTIFICATES
HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.

Read More »

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 20 of 21

☰  HTML CSS MORE  

 

REPORT ERROR PRINT PAGE FORUM ABOUT

Top 10 Tutorials Top 10 References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
W3.CSS Tutorial W3.CSS Reference
Bootstrap Tutorial Browser Statistics
SQL Tutorial PHP Reference
PHP Tutorial HTML Colors
jQuery Tutorial HTML Character Sets
Angular Tutorial jQuery Reference
XML Tutorial AngularJS Reference

Top 10 Examples Web Certificates

HTML Examples HTML Certificate
CSS Examples CSS Certificate

https://www.w3schools.com/cssref/default.asp 09-03-17
CSS Reference Page 21 of 21

JavaScript Examples JavaScript Certificate

☰  HTML Examples
W3.CSS CSS MORE  jQuery Certificate 
HTML DOM Examples PHP Certificate
Bootstrap Certificate
XML Certificate

https://www.w3schools.com/cssref/default.asp 09-03-17