This tutorial will teach you how to use CSS3 to create even more attractive and easy to maintain websites.

First basics: The Cascading Style Sheets (CSS) are a programming language that allows us to style or format the web page in the way we want. Furthermore, it allows us to separate styling from content, structure and functionality of a web page. The CSS has evolved throughout the years that nowadays it provides a full precision control for elements spacing and positioning, color and gradients, fonts, text, backgrounds and everything else included.

Advantages of CSS3

The CSS3 is built as a group of modules, each of which describing a certain structure or content from a web page; for example these are some of the modules: selectors, animations, user interface, etc... Those modules have capacity to thoroughly deal with each and every aspect of a HTML document's structure in details.

There are numerous advantages of using CSS3. Some of the advantages of using CSS3 are listed here:

  • Usage of external style sheets saving site's load time
  • Usage of external style sheets simplifying site's coding and troubleshooting
  • Differentiation and isolation
  • Helps to achieve multi column layout
  • Flexibility in Handling
  • Handling multiple background images
  • Better graphical capabilities
  • Better control of over user interface
  • And more...

CSS3 is also backward compatible and does not need any special parse or technique to make it work. You can simply add your CSS3 syntax to your already running CSS2 based style sheet and voilà!

To learn about the CSS3 and understand better all of its perks and cool things about, and to get a grasp on the importance of it, please continue with the chapters that follow.

Browser difficulties in CSS3

The only problem currently with CSS3 is actually the Cross Browser Compatibility problems. At the moment of writing this introduction, it was still a good practice to make styling bullet proof for older browsers, such as Internet Explorer 9.0 and older, as well as using proprietary selectors when possible to make sure that Firefox, Safari, or Chrome will execute properly our shadows and gradients (and other cool stuff offered by CSS3).

NOTE: This tutorial have been updated in April, 2016, and at this time the mainstream CSS3 is widely supported by variety of desktop and mobile browsers.

Examples

Each chapter has attached an interactive example that can be easily modified and tested as wanted.

For the purpose of simplicity many examples are written with internal styles, instead of being imported from an external file as it is suggested.

All examples can be found at the end of the tutorial.

›› go to examples ››

References

At the end of the tutorial you will find a complete reference list with all properties, modules, etc...

›› go to references ››