CSS3 Tutorial

CSS is used to control the style and layout of Web pages.

CSS3 is the latest standard for CSS.
This tutorial teaches you about the new features in CSS3!
Start learning CSS3 now!

CSS3 Example
div
{
transform:rotate(30deg);
}

Try it yourself
Click on the "Try it Yourself" button to see how it works.

CSS3 References
At W3Schools you will find complete CSS3 references of all properties and selectors with syntax, examples, browser
support, and more.
CSS Properties Reference
CSS3 Browser Support Reference
CSS Selectors Reference
CSS Color Reference

CSS3 Introduction
CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always
support CSS2.

CSS3 Modules
CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Text Effects
 2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Recommendation
The CSS3 specification is still under development by W3C.
However, many of the new CSS3 properties have been implemented in modern browsers.

CSS3 Borders
CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a
design program, like Photoshop.
In this chapter you will learn about the following border properties:
border-radius
box-shadow
border-image

Browser Support
Property Browser
Support

border-
radius

box-
shadow

border-
image

Internet Explorer 9+ supports border-radius and box-shadow.

Firefox, Chrome, and Safari supports all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.

CSS3 Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners:
This box has rounded corners!

Example
Add rounded corners to a div element:
div
{
border:2px solid;
border-radius:25px;
}

Try it yourself

CSS3 Box Shadow

In CSS3, the box-shadow property is used to add shadow to boxes:

Example
Add a box-shadow to a div element:
div
{
box-shadow: 10px 10px 5px #888888;
}

Try it yourself

CSS3 Border Image

With the CSS3 border-image property you can use an image to create a border:
The border-image property allows you to specify an image as a border!
The original image used to create the border above:
 Example
Use an image to create a border around a div element:
div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Try it yourself

New Border Properties

Property Description CSS

border-image A shorthand property for setting all the 3

border-image-* properties

border-radius A shorthand property for setting all the 3

four border-*-radius properties

box-shadow Attaches one or more drop-shadows to 3

the box

CSS3 Backgrounds
CSS3 Backgrounds
CSS3 contains several new background properties,
which allow greater control of the background element.
In this chapter you will learn about the following background properties:
background-size
background-origin
You will also learn how to use multiple background images.

Browser Support
Property Browser
Support

background-
size
background-
origin

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the new background properties.

CSS3 The background-size Property

The background-size property specifies the size of the background image.
Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to
specify the size of the background image, which allows us to re-use background images in different contexts.
You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the
width and height of the parent element.

Example 1
Resize a background image:
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Try it yourself

Example 2
Stretch the background image to completely fill the content area:
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}

Try it yourself

CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.
 Example
Position the background image within the content-box:
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

Try it yourself

CSS3 Multiple Background

Images
CSS3 allows you to use several background
images for an element.

Example
Set two background images for the body element:
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

Try it yourself

New Background Properties

Property Description CSS

background-clip Specifies the painting area of the 3

background images

background- Specifies the positioning area of the 3

origin background images

background- Specifies the size of the background 3

size images
CSS3 Text Effects
CSS3 contains several new text features.
In this chapter you will learn about the following text properties:
text-shadow
word-wrap

Browser Support
Property Browser
Support

text-
shadow

word-
wrap

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
Note: Internet Explorer 9 and earlier versions, does not support the text-shadow property.

CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.

You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Example
Add a shadow to a header:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Try it yourself

CSS3 Word Wrapping

If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and
 wrap to the next line.
In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a
word:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and
wrap to the next line.
The CSS code is as follows:

Example
Allow long words to be able to break and wrap onto the next line:
p {word-wrap:break-word;}

Try it yourself

New Text Properties

Property Description CSS

hanging- Specifies whether a punctuation character 3

punctuation may be placed outside the line box

punctuation-trim Specifies whether a punctuation character 3

should be trimmed

text-align-last Describes how the last line of a block or a 3

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

text-emphasis Applies emphasis marks, and the 3

foreground color of the emphasis marks, to
the element's text

text-justify Specifies the justification method used 3

when text-align is "justify"

text-outline Specifies a text outline 3

text-overflow Specifies what should happen when text 3

overflows the containing element

text-shadow Adds shadow to text 3

text-wrap Specifies line breaking rules for text 3

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

scripts
word-wrap Allows long, unbreakable words to be 3
broken and wrap to the next line

CSS3 Fonts

The CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes.
When you have found/bought the font you wish to use, include the font file on your web server, and it will be
automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.

Browser Support
Property Browser
Support

@font-
face

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
Chrome, Safari and Opera also support SVG fonts/shapes.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Using The Font You Want

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example
<style>
@font-face
{
font-family: myFirstFont;
 src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

Try it yourself

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

Example
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

Try it yourself
The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.

CSS3 Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:
Descriptor Values Description

font-family name Required. Defines a name for the font

src URL Required. Defines the URL of the font file

font-stretch normal Optional. Defines how the font should be stretched. Default
condensed is "normal"
ultra-condensed
extra-condensed
semi-condensed
expanded
 semi-expanded
extra-expanded
ultra-expanded

font-style normal Optional. Defines how the font should be styled. Default is
italic "normal"
oblique

font-weight normal Optional. Defines the boldness of the font. Default is

bold "normal"
100
200
300
400
500
600
700
800
900

unicode-range unicode-range Optional. Defines the range of UNICODE characters the font
supports. Default is "U+0-10FFFF"

CSS3 2D Transforms
CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

How Does it Work?

A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

Browser Support
Property Browser
Support

transform

Internet Explorer 10, Firefox, and Opera support the transform property.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9 requires the prefix -ms-.
2D Transforms
In this chapter you will learn about the 2d transform methods:
translate()
rotate()
scale()
skew()
matrix()
You will learn about 3D transforms in the next chapter.

Example
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Try it yourself

The translate() Method

With the translate() method, the element moves from its current position, depending on the parameters given for the
left (X-axis) and the top (Y-axis) position:

Example
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

Try it yourself
The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the
element counter-clockwise.

Example
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Try it yourself
The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width
(X-axis) and the height (Y-axis):

Example
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

Try it yourself
The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-
axis) and the vertical (Y-axis) lines:

Example
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

Try it yourself
The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

The matrix() Method

The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move
(translate), and skew elements.

Example
How to rotate a div element 30 degrees, using the matrix method:
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

Try it yourself

New Transform Properties

The following table lists all the transform properties:
Property Description CSS

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

element

transform- Allows you to change the position on 3

origin transformed elements

2D Transform Methods
Function Description

matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values

translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis

translateY(n) Defines a 2D translation, moving the element along the Y-axis

scale(x,y) Defines a 2D scale transformation, changing the elements width and height

scaleX(n) Defines a 2D scale transformation, changing the element's width

scaleY(n) Defines a 2D scale transformation, changing the element's height

rotate(angle) Defines a 2D rotation, the angle is specified in the parameter

skew(x-angle,y- Defines a 2D skew transformation along the X- and the Y-axis

angle)

skewX(angle) Defines a 2D skew transformation along the X-axis

skewY(angle) Defines a 2D skew transformation along the Y-axis

CSS3 3D Transforms
3D Transforms
CSS3 allows you to format your elements using 3D transforms.
In this chapter you will learn about some of the 3D transform methods:
rotateX()
rotateY()
Click on the elements below, to see the difference between a 2D transform and a 3D transform:
2D rotate
3D rotate

Browser Support
Property Browser
Support

transform

Internet Explorer 10 and Firefox supports 3D transforms.

Chrome and Safari requires the prefix -webkit-.
Opera does not yet support 3D transforms (It supports 2D transforms only).
 The rotateX() Method

With the rotateX() method, the element rotates around its X-axis at a given degree.

Example
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

Try it yourself

The rotateY() Method

With the rotateY() method, the element rotates around its Y-axis at a given degree.

Example
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Try it yourself

Transform Properties
The following table lists all the transform properties:
Property Description CSS

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

element

transform- Allows you to change the position on 3

origin transformed elements

transform-style Specifies how nested elements are rendered 3

in 3D space
perspective Specifies the perspective on how 3D 3
elements are viewed

perspective- Specifies the bottom position of 3D 3

origin elements

backface- Defines whether or not an element should be 3

visibility visible when not facing the screen

3D Transform Methods
Function Description

matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 values

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z) Defines a 3D translation

translateX(x) Defines a 3D translation, using only the value for the X-axis

translateY(y) Defines a 3D translation, using only the value for the Y-axis

translateZ(z) Defines a 3D translation, using only the value for the Z-axis

scale3d(x,y,z) Defines a 3D scale transformation

scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis

scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis

scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis

rotate3d(x,y,z,angle) Defines a 3D rotation

rotateX(angle) Defines a 3D rotation along the X-axis

rotateY(angle) Defines a 3D rotation along the Y-axis

rotateZ(angle) Defines a 3D rotation along the Z-axis

perspective(n) Defines a perspective view for a 3D transformed element

CSS3 Animations
CSS3 Animations
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in
many web pages.

CSS3
Animation
CSS3 @keyframes Rule
To create animations in CSS3, you will have to learn about the @keyframes rule.
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes
rule and the animation will gradually change from the current style to the new style.

Browser Support
Property Browser Support

@keyframes

animation

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation
property.

Example
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */

{
from {background: red;}
to {background: yellow;}
}

CSS3 animation
When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will
have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation

Example
Binding the "myfirst" animation to a div element, duration: 5 seconds:
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Try it yourself
Note: You must define the name and the duration of the animation. If duration is omitted, the
animation will not run, because the default value is 0.

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.
You can change as many styles you want, as many times you want.
Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as
0% and 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support, you should always define both the 0% and the 100% selectors.

Example
Change the background color when the animation is 25%, 50%, and again when the animation is 100%
complete:
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */

{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Try it yourself

Example
Change the background color and position:
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */

{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Try it yourself

CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:
Property Description CSS

@keyframes Specifies the animation 3

animation A shorthand property for all the the 3
animation properties, except the
animation-play-state property

animation-name Specifies the name of the @keyframes 3

animation

animation-duration Specifies how many seconds or 3

milliseconds an animation takes to
complete one cycle. Default 0

animation-timing- Describes how the animation will 3

function progress over one cycle of its duration.
Default "ease"

animation-delay Specifies when the animation will start. 3

Default 0

animation-iteration- Specifies the number of times an 3

count animation is played. Default 1

animation-direction Specifies whether or not the animation 3

should play in reverse on alternate cycles.
Default "normal"

animation-play- Specifies whether the animation is 3

state running or paused. Default "running"

The two examples below sets all the animation properties:

Example
Run an animation called myfirst, with all the animation properties set:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Try it yourself

Example
The same animation as above, using the shorthand animation property:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

Try it yourself

CSS3 Multiple Columns

CSS3 Multiple Columns
With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:
column-count
column-gap
column-rule

Browser Support
Property Browser Support

column-
count
column-gap

column-rule

Internet Explorer 10 and Opera supports multiple columns properties.

Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the multiple columns properties.

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

Example
Divide the text in a div element into three columns:
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

Try it yourself

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

Example
Specify a 40 pixels gap between the columns:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

Try it yourself
CSS3 Column Rules
The column-rule property sets the width, style, and color of the rule between columns.

Example
Specify the width, style and color of the rule between columns:
div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

Try it yourself

New Multiple Columns Properties

Property Description CSS

column-count Specifies the number of columns an 3

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

column-rule-* properties

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

color columns

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

style columns

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

width columns
column-span Specifies how many columns an element 3
should span across

column-width Specifies the width of the columns 3

columns A shorthand property for setting column- 3

width and column-count

CSS3 User Interface

CSS3 User Interface
In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
In this chapter you will learn about the following user interface properties:
resize
box-sizing
outline-offset

Browser Support
Property Browser Support

resize

box-sizing

outline-
offset

The resize property is supported in Firefox, Chrome, and Safari.

The box-sizing is supported in Internet Explorer, Chrome, Safari, and Opera. Firefox requires the prefix
-moz-.
The outline-offset property is supported in all major browsers, except Internet Explorer.

CSS3 Resizing
In CSS3, the resize property specifies whether or not an element should be resizable by the user.
This div element is resizable by the user (in Firefox, Chrome, and Safari).
The CSS code is as follows:
Example
Specify that a div element should be resizable by the user:
div
{
resize:both;
overflow:auto;
}

Try it yourself

CSS3 Box Sizing

The box-sizing property allows you to define certain elements to fit an area in a certain way:

Example
Specify two bordered boxes side by side:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

Try it yourself

CSS3 Outline Offset

The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
Outlines do not take up space
Outlines may be non-rectangular
This div has an outline 15px outside the border edge.
The CSS code is as follows:
Example
Specify an outline 15px outside the border edge:
div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Try it yourself

New User-interface Properties

Property Description CSS

appearance Allows you to make an element look like a 3

standard user interface element

box-sizing Allows you to define certain elements to fit 3

an area in a certain way

icon Provides the author the ability to style an 3

element with an iconic equivalent

nav-down Specifies where to navigate when using the 3

arrow-down navigation key

nav-index Specifies the tabbing order for an element 3

nav-left Specifies where to navigate when using the 3

arrow-left navigation key

nav-right Specifies where to navigate when using the 3

arrow-right navigation key

nav-up Specifies where to navigate when using the 3

arrow-up navigation key

outline-offset Offsets an outline, and draws it beyond the 3

border edge
resize Specifies whether or not an element is 3
resizable by the user

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

CSS Properties
CSS Property Groups
Animation Grid Print
Background Hyperlink Ruby
Border and outline Linebox Speech
Box List Table
Color Margin Text
Content Paged Marquee 2D/3D Transform
Media Multi-column Transition
Dimension Padding User-interface
Flexible Box Paged Media
Font Positioning
Generated content
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

Animation Properties
Property Description CSS

@keyframes Specifies the animation 3

animation A shorthand property for all the animation 3

properties below, except the animation-
play-state property

animation-name Specifies a name for the @keyframes 3

animation

animation- Specifies how many seconds or 3

duration milliseconds an animation takes to
complete one cycle
animation- Specifies the speed curve of the animation 3
timing-function

animation-delay Specifies when the animation will start 3

animation- Specifies the number of times an animation 3

iteration-count should be played

animation- Specifies whether or not the animation 3

direction should play in reverse on alternate cycles

animation-play- Specifies whether the animation is running 3

state or paused

Background Properties
Property Description CSS

background Sets all the background properties in one 1

declaration

background- Sets whether a background image is fixed 1

attachment or scrolls with the rest of the page

background- Sets the background color of an element 1

color

background- Sets the background image for an element 1

image

background- Sets the starting position of a background 1

position image

background- Sets how a background image will be 1

repeat repeated

background-clip Specifies the painting area of the 3

background

background- Specifies the positioning area of the 3

origin background images

background-size Specifies the size of the background images 3

Border and Outline Properties
Property Description CSS

border Sets all the border properties in one 1

declaration

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

declaration

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

color

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-left Sets all the left border properties in one 1

declaration

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-right Sets all the right border properties in one 1

declaration

border-right- Sets the color of the right border 1

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 1

 declaration

border-top-color Sets the color of the top border 1

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

outline Sets all the outline properties in one 2

declaration

outline-color Sets the color of an outline 2

outline-style Sets the style of an outline 2

outline-width Sets the width of an outline 2

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

left-radius bottom-left corner

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

right-radius bottom-right corner

border-image A shorthand property for setting all the 3

border-image-* properties

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

outset image area extends beyond the border box

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

repeat be repeated, rounded or stretched

border-image- Specifies the inward offsets of the image- 3

slice border

border-image- Specifies an image to be used as a border 3

source

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

width

border-radius A shorthand property for setting all the four 3

border-*-radius properties
border-top-left- Defines the shape of the border of the top- 3
radius left corner

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

radius right corner

box-decoration- 3
break

box-shadow Attaches one or more drop-shadows to the 3

box

Box Properties
Property Description CSS

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

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

overflow-y Specifies whether or not to clip the 3

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

overflow- Specifies the preferred scrolling method for 3

style elements that overflow

rotation Rotates an element around a given point 3

defined by the rotation-point property

rotation- Defines a point as an offset from the top left 3

point border edge

Color Properties
Property Description CSS

color-profile Permits the specification of a source color 3

profile other than the default

opacity Sets the opacity level for an element 3

rendering- Permits the specification of a color profile 3

intent rendering intent other than the default

Content for Paged Media Properties

Property Description CSS

bookmark- Specifies the label of the bookmark 3

label

bookmark- Specifies the level of the bookmark 3

level

bookmark- Specifies the target of the bookmark link 3

target

float-offset Pushes floated elements in the opposite 3

direction of the where they have been
floated with float

hyphenate- Specifies the minimum number of characters 3

after in a hyphenated word after the hyphenation
character

hyphenate- Specifies the minimum number of characters 3

before in a hyphenated word before the
hyphenation character

hyphenate- Specifies a string that is shown when a 3

character hyphenate-break occurs

hyphenate- Indicates the maximum number of 3

lines successive hyphenated lines in an element

hyphenate- Specifies a comma-separated list of external 3

resource resources that can help the browser
determine hyphenation points

hyphens Sets how to split words to improve the 3

layout of paragraphs

image- Specifies the correct resolution of images 3

resolution
marks Adds crop and/or cross marks to the 3
document

string-set 3

Dimension Properties
Property Description CSS

height Sets the height 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

width Sets the width of an element 1

Flexible Box Properties

Property Description CSS

box-align Specifies how to align the child elements of a 3

box

box- Specifies in which direction the children of a 3

direction box are displayed

box-flex Specifies whether the children of a box is 3

flexible or inflexible in size

box-flex- Assigns flexible elements to flex groups 3

group

box-lines Specifies whether columns will go onto a 3

new line whenever it runs out of space in the
parent box

box-ordinal- Specifies the display order of the child 3

group elements of a box
box-orient Specifies whether the children of a box 3
should be laid out horizontally or vertically

box-pack Specifies the horizontal position in horizontal 3

boxes and the vertical position in vertical
boxes

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

displayed in a small-caps font

font-weight Specifies the weight of a font 1

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

use fonts other than the "web-safe" fonts

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

adjust fallback occurs

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

face from a font family

Generated Content Properties

Property Description CSS

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

elements, to insert generated content

counter- Increments one or more counters 2

increment
counter-reset Creates or resets one or more counters 2

quotes Sets the type of quotation marks for 2

embedded quotations

crop Allows a replaced element to be just a 3

rectangular area of an object, instead of the
whole object

move-to Causes an element to be removed from the 3

flow and reinserted at a later point in the
document

page-policy Determines which page-based occurance of a 3

given element is applied to a counter or
string value

Grid Properties
Property Description CSS

grid- Specifies the width of each column in a grid 3

columns

grid-rows Specifies the height of each column in a 3

grid

Hyperlink Properties
Property Description CSS

target A shorthand property for setting the target- 3

name, target-new, and target-position
properties

target- Specifies where to open links (target 3

name destination)

target-new Specifies whether new destination links 3

should open in a new window or in a new tab
of an existing window

target- Specifies where new destination links should 3

position be placed

Linebox Properties
Property Description CSS

alignment- Allows more precise alignment of elements 3

adjust

alignment- Specifies how an inline-level element is 3

baseline aligned with respect to its parent

baseline-shift Allows repositioning of the dominant- 3

baseline relative to the dominant-baseline

dominant- Specifies a scaled-baseline-table 3

baseline

drop-initial- Sets the alignment point of the drop initial 3

after-adjust for the primary connection point

drop-initial- Sets which alignment line within the initial 3

after-align line box is used at the primary connection
point with the initial letter box

drop-initial- Sets the alignment point of the drop initial 3

before-adjust for the secondary connection point

drop-initial- Sets which alignment line within the initial 3

before-align line box is used at the secondary connection
point with the initial letter box

drop-initial-size Controls the partial sinking of the initial 3

letter

drop-initial- Activates a drop-initial effect 3

value

inline-box-align Sets which line of a multi-line inline block 3

align with the previous and next inline
elements within a line

line-stacking A shorthand property for setting the line- 3

stacking-strategy, line-stacking-ruby, and
 line-stacking-shift properties

line-stacking- Sets the line stacking method for block 3

ruby elements containing ruby annotation
elements

line-stacking- Sets the line stacking method for block 3

shift elements containing elements with base-
shift

line-stacking- Sets the line stacking strategy for stacked 3

strategy line boxes within a containing block
element

text-height Sets the block-progression dimension of the 3

text content area of an inline box

List Properties
Property Description CSS

list-style Sets all the properties for a list in one 1

declaration

list-style- Specifies an image as the list-item marker 1

image

list-style- Specifies if the list-item markers should 1

position appear inside or outside the content flow

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

type

Margin Properties
Property Description CSS

margin Sets all the margin properties in one 1

declaration

margin- Sets the bottom margin of an element 1

bottom
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

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

Multi-column Properties
Property Description CSS

column- Specifies the number of columns an element 3

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

column-rule-* properties

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

color columns

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

style columns

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

width columns
column-span Specifies how many columns an element 3
should span across

column- Specifies the width of the columns 3

width

columns A shorthand property for setting column- 3

width and column-count

Padding Properties
Property Description CSS

padding Sets all the padding properties in one 1

declaration

padding- Sets the bottom padding of an element 1

bottom

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

Paged Media Properties

Property Description CSS

fit Gives a hint for how to scale a replaced 3

element if neither its width nor its height
property is auto

fit-position Determines the alignment of the object 3

inside the box

image- Specifies a rotation in the right or clockwise 3

orientation direction that a user agent applies to an
image

page Specifies a particular type of page where an 3

element SHOULD be displayed
size Specifies the size and orientation of the 3
containing box for page content

Positioning Properties
Property Description CSS

bottom Specifies the bottom position of a positioned 2

element

clear Specifies which sides of an element where 1

other floating elements are not allowed

clip Clips an absolutely positioned element 2

cursor Specifies the type of cursor to be displayed 2

display Specifies how a certain HTML element should 1

be displayed

float Specifies whether or not a box should float 1

left Specifies the left position of a positioned 2

element

overflow Specifies what happens if content overflows an 2

element's box

position Specifies the type of positioning method used 2

for an element (static, relative, absolute or
fixed)

right Specifies the right position of a positioned 2

element

top Specifies the top position of a positioned 2

element

visibility Specifies whether or not an element is visible 2

z-index Sets the stack order of a positioned element 2

Print Properties
Property Description CSS

orphans Sets the minimum number of lines that must 2

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

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

after element

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

before element

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

inside element

widows Sets the minimum number of lines that must 2

be left at the top of a page when a page break
occurs inside an element

Ruby Properties
Property Description CSS

ruby-align Controls the text alignment of the ruby text 3

and ruby base contents relative to each other

ruby- Determines whether, and on which side, ruby 3

overhang text is allowed to partially overhang any
adjacent text in addition to its own base, when
the ruby text is wider than the ruby base

ruby- Controls the position of the ruby text with 3

position respect to its base

ruby-span Controls the spanning behavior of annotation 3

elements

Speech Properties
Property Description CSS
mark A shorthand property for setting the mark- 3
before and mark-after properties

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

audio stream

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

audio stream

phonemes Specifies a phonetic pronunciation for the text 3

contained by the corresponding element

rest A shorthand property for setting the rest- 3

before and 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- Specifies the balance between left and right 3

balance channels

voice- Specifies how long it should take to render 3

duration the selected element's content

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

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

applied

voice- Refers to the amplitude of the waveform 3

volume output by the speech synthesises
Table Properties
Property Description CSS

border- Specifies whether or not table borders should 2

collapse be collapsed

border- Specifies the distance between the borders of 2

spacing adjacent cells

caption- Specifies the placement of a table caption 2

side

empty-cells Specifies whether or not to display borders 2

and background on empty cells in a table

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

table

Text Properties
Property Description CSS

color Sets the color of text 1

direction Specifies the text direction/writing direction 2

letter-spacing Increases or decreases the space between 1

characters in a text

line-height Sets the line height 1

text-align Specifies the horizontal alignment of text 1

text-decoration Specifies the decoration added to text 1

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

text-block

text-transform Controls the capitalization of text 1

unicode-bidi 2

vertical-align Sets the vertical alignment of an element 1

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

word-spacing Increases or decreases the space between 1

words in a text

hanging- Specifies whether a punctuation character 3

punctuation may be placed outside the line box

punctuation- Specifies whether a punctuation character 3

trim should be trimmed

text-align-last Describes how the last line of a block or a 3

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

text-justify Specifies the justification method used when 3

text-align is "justify"

text-outline Specifies a text outline 3

text-overflow Specifies what should happen when text 3

overflows the containing element

text-shadow Adds shadow to text 3

text-wrap Specifies line breaking rules for text 3

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

scripts

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

and wrap to the next line

2D/3D Transform Properties

Property Description CSS

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

element

transform- Allows you to change the position on 3

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

perspective Specifies the perspective on how 3D 3

elements are viewed

perspective- Specifies the bottom position of 3D elements 3

origin

backface- Defines whether or not an element should be 3

visibility visible when not facing the screen

Transition Properties
Property Description CSS

transition A shorthand property for setting the four 3

transition properties

transition- Specifies the name of the CSS property the 3

property transition effect is for

transition- Specifies how many seconds or 3

duration milliseconds a transition effect takes to
complete

transition- Specifies the speed curve of the transition 3

timing-function effect

transition-delay Specifies when the transition effect will 3

start

User-interface Properties
Property Description CSS

appearance Allows you to make an element look like a 3

standard user interface element

box-sizing Allows you to define certain elements to fit 3

an area in a certain way

icon Provides the author the ability to style an 3

 element with an iconic equivalent

nav-down Specifies where to navigate when using the 3

arrow-down navigation key

nav-index Specifies the tabbing order for an element 3

nav-left Specifies where to navigate when using the 3

arrow-left navigation key

nav-right Specifies where to navigate when using the 3

arrow-right navigation key

nav-up Specifies where to navigate when using the 3

arrow-up navigation key

outline- Offsets an outline, and draws it beyond the 3

offset border edge

resize Specifies whether or not an element is 3

resizable by the user

CSS Selector Reference

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

CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
Selector Example Example description CSS

.class .intro Selects all elements with 1

class="intro"

#id #firstname Selects the element with 1

id="firstname"

* * Selects all elements 2

element p Selects all <p> elements 1

element,element div,p Selects all <div> elements and 1
all <p> elements

element element div p Selects all <p> elements inside 1

<div> elements

element>element div>p Selects all <p> elements where 2

the parent is a <div> element

element+element div+p Selects all <p> elements that 2

are placed immediately after
<div> elements

[attribute] [target] Selects all elements with a 2

target attribute

[attribute=value] [target=_blank] Selects all elements with 2

target="_blank"

[attribute~=value] [title~=flower] Selects all elements with a title 2

attribute containing the word
"flower"

[attribute|=value] [lang|=en] Selects all elements with a 2

lang attribute value starting
with "en"

:link a:link Selects all unvisited links 1

:visited a:visited Selects all visited links 1

:active a:active Selects the active link 1

:hover a:hover Selects links on mouse over 1

:focus input:focus Selects the input element 2

which has focus

:first-letter p:first-letter Selects the first letter of every 1

<p> element

:first-line p:first-line Selects the first line of every 1

<p> element
:first-child p:first-child Selects every <p> element that 2
is the first child of its parent

:before p:before Insert content before the 2

content of every <p> element

:after p:after Insert content after every <p> 2

element

:lang(language) p:lang(it) Selects every <p> element 2

with a lang attribute equal to
"it" (Italian)

element1~element2 p~ul Selects every <ul> element 3

that are preceded by a <p>
element

[attribute^=value] a[src^="https"] Selects every <a> element 3

whose src attribute value
begins with "https"

[attribute$=value] a[src$=".pdf"] Selects every <a> element 3

whose src attribute value ends
with ".pdf"

[attribute*=value] a[src*="w3schools"] Selects every <a> element 3

whose src attribute value
contains the substring
"w3schools"

:first-of-type p:first-of-type Selects every <p> element that 3

is the first <p> element of its
parent

:last-of-type p:last-of-type Selects every <p> element that 3

is the last <p> element of its
parent

:only-of-type p:only-of-type Selects every <p> element that 3

is the only <p> element of its
parent

:only-child p:only-child Selects every <p> element that 3

is the only child of its parent
:nth-child(n) p:nth-child(2) Selects every <p> element that 3
is the second child of its parent

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that 3

is the second child of its
parent, counting from the last
child

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that 3

is the second <p> element of
its parent

:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that 3

is the second <p> element of
its parent, counting from the
last child

:last-child p:last-child Selects every <p> element that 3

is the last child of its parent

:root :root Selects the documents root 3

element

:empty p:empty Selects every <p> element that 3

has no children (including text
nodes)

:target #news:target Selects the current active 3

#news element (clicked on a
URL containing that anchor
name)

:enabled input:enabled Selects every enabled <input> 3

element

:disabled input:disabled Selects every disabled <input> 3

element

:checked input:checked Selects every checked <input> 3

element

:not(selector) :not(p) Selects every element that is 3

not a <p> element
::selection ::selection Selects the portion of an 3
element that is selected by a
user