CSS3
CSS3 (or CSS 3) refers to Cascading Style Sheets Level 3, which at the time of writing, is under development by the W3C.
CSS3 adds quite a considerable amount to the capabilities of CSS. For example, CSS3 enables you to add animation to your web pages (without needing third party plugins etc). It allows you to transform your HTML elements and create 3D animations. It also provides you with the ability to add gradients to your background colors, rounded corners to your <div> tags, multiple columns to your text, and much more.
In this section of the website, you will find CSS3 examples and property references, etc.
In case you're wondering what CSS is, it is the standard way to add style (e.g., fonts, colors, spacing) to websites and other HTML documents. For a basic introduction to how CSS works, see the CSS tutorial.
CSS Properties
Below is a list of CSS properties that are being introduced with CSS3.
Grid Layout
Animation
Transition Properties
Transform Properties
Multi-Column
Color/Image Effects
Text Decoration
- text-decoration (updated from CSS2 — now shorthand for the following properties)
- text-decoration-line
- text-decoration-style
- text-decoration-color
- text-decoration-skip
- text-underline-position
New Background Properties
Overflow/Resize
- overflow (minor update from CSS 2.01)
- overflow-wrap
- overflow-x
- overflow-y
- resize
- text-overflow
Text Wrapping
Speech Media
New Alignment Properties
Text Manipulation
Dropped CSS3 Properties
The following properties were introduced into draft versions of CSS3 before being dropped, or at least, appearing to be on their way out.
Marquees
Use animations to create CSS marquees instead.
Other Dropped Properties
- appearance (this property has been dropped from CSS3)
- overflow-style (most likely been dropped)
- rotation (this property has most likely been dropped from CSS3. Use transform instead)
- rotation-point (this property has most likely been dropped from CSS3. Use transform-origin instead)
CSS3 Gradients
CSS level 3 enables web developers to create CSS gradients. A gradient is where one color fades gradually into another color. This can give you a nice subtle effect for shading in backgrounds, buttons, and other HTML elements. The good thing about CSS3 gradients is that you can create a gradient without needing to use background images (like you had to in CSS 2).