You Have Learned CSS, Now What?

CSS Summary

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.
You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.
You have learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.
You have also learned about many of the new features in CSS3: rounded borders, box and text shadows, gradient backgrounds, 2D and 3D transformations, transitions, animations, multiple columns, and more.
To learn more about CSS, please take a look at our CSS examples and CSS reference.

---

Now You Know CSS, What's Next?

The next step is to learn JavaScript.
JavaScript is the scripting language of the Web. All modern HTML pages are using JavaScript.
JavaScript was designed to add interactivity to HTML pages.
JavaScript is a language with a very simple syntax, and anyone can put small "snippets" of JavaScript code into HTML pages.
If you want to learn more about JavaScript, please visit our JavaScript tutorial.

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

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specifies the first version that worked with a prefix.

Property
resize	Not supported	4.0	5.0 4.0 -moz-	4.0	15.0
box-sizing	Partial from 8.0	10.0 4.0 -webkit-	29.0 2.0 -moz-	5.1 3.1 -webkit-	9.5
outline-offset	Not supported	4.0	5.0 4.0 -moz-	4.0	9.5

---

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
{
-moz-box-sizing:border-box; /* Firefox */
box-sizing:border-box;
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 »

---

CSS3 User-interface Properties

The following table lists all the user-interface properties:

Property	Description	CSS
appearance	Allows you to make an element look like a standard user interface element	3
box-sizing	Allows you to define certain elements to fit an area in a certain way	3
icon	Provides the author the ability to style an element with an iconic equivalent	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-offset	Offsets an outline, and draws it beyond the border edge	3
resize	Specifies whether or not an element is resizable by the user	3

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

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specifies the first version that worked with a prefix.

Property
column-count	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	10.0	4.0 -webkit-	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1

---

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
{
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
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
{
-webkit-column-gap:40px; /* Chrome, Safari, Opera */
-moz-column-gap:40px; /* Firefox */
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
{
-webkit-column-rule:3px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule:3px outset #ff00ff; /* Firefox */
column-rule:3px outset #ff00ff;
}

Try it yourself »

---

CSS3 Multiple Columns Properties

The following table lists all the multiple columns properties:

Property	Description	CSS
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

CSS3 Animations

CSS3 Animations

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

CSS3
Animation

---

Browser Support

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
@keyframes	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-
animation	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

---

CSS3 @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.

---

CSS3 Animation

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector (element) by specifying at least these two properties:

•  the name of the animation
•  the duration of the animation

Example

Bind the "myfirst" animation to the div element. Animation duration: 5 seconds:

div
{
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

/* Standard syntax */
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

Try it yourself »

Note: If the duration part is not specified, the animation will have no effect, because the default value is 0.

---

What Are CSS3 Animations?

An animation lets an element gradually change from one style to another.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.

Example

Change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete:

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

/* Standard syntax */
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Try it yourself »

Example

Change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete:

/* Chrome, Safari, Opera */
@-webkit-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;}
}

/* Standard syntax */
@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;}
}

Try it yourself »

---

More Animation Examples

The example below uses seven of the animation properties:

Example

div
{
/* Chrome, Safari, Opera */
-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;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

Try it yourself »

The same animation effect as the example above (except the animation-play-state property). However, here we are using the shorthand animation property:

Example

div
{
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}

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 setting all the animation properties, except the animation-play-state and the animation-fill-mode 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 styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay")	3
animation-iteration-count	Specifies the number of times an animation should be played	3
animation-name	Specifies the name of the @keyframes animation	3
animation-play-state	Specifies whether the animation is running or paused	3
animation-timing-function	Specifies the speed curve of the animation

CSS3 Transitions

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Mouse over the element below:

CSS3
Transition

---

Browser Support

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
transition	10.0	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	10.0	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	10.0	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	10.0	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	10.0	26.0 4.0 -webkit-	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

---

What Are CSS3 Transitions?

CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

Example

Add a transition effect on the width property, with a duration of 2 seconds:

div
{
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:

div:hover
{
width:300px;
}

Try it yourself »

Note: When the cursor mouse out of the element, it gradually changes back to its original style.

---

Multiple Changes

To add transition effects for more than one CSS property, separate the properties with a comma:

Example

Add transition effects on width, height, and transformation:

div
{
-webkit-transition: width 2s, height 2s,-webkit-transform 2s;  /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}

Try it yourself »

---

More Transition Examples

The example below uses all the four transition properties:

Example

div
{
/* For Safari 3.1 to 6.0 */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}

Try it yourself »

The same transition effects as the example above. However, here we are using the shorthand transition property:

Example

div
{
-webkit-transition:width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}

Try it yourself »

---

CSS3 Transition Properties

The following table lists all the transition properties:

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

CSS3 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 for 3D Transforms

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
transform	10.0	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-
transform-origin (three-value syntax)	10.0	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-
transform-style	Not supported	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-
perspective	10.0	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-
perspective-origin	10.0	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-
backface-visibility	10.0	12.0 -webkit-	16.0 10.0 -moz-	4.0 -webkit-	15.0 -webkit-

---

The rotateX() Method

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

Example

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

Try it yourself »

---

The rotateY() Method

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

Example

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

Try it yourself »

---

CSS3 Transform Properties

The following table lists all the transform properties:

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

3D Transform Methods

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
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 2D Transforms

CSS3 Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transformation is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

---

Browser Support for 2D Transforms

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -ms-, -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
transform	10.0 9.0 -ms-	12.0 -webkit-	16.0 3.5 -moz-	3.1 -webkit-	15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	10.0 9.0 -ms-	12.0 -webkit-	16.0 3.5 -moz-	3.1 -webkit-	15.0 -webkit- 12.1 10.5 -o-

---

CSS3 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
{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}

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
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px);
}

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
{
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}

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
{
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
}

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
{
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg);
}

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
{
-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); /* Chrome, Safari, Opera */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

Try it yourself »

---

CSS3 Transform Properties

The following table lists all the transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on 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-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis