New Features in CSS3 Tutorial

Charlie R. Claywell
Reviewed by Vikki Olds
CSS3 Code
CSS3 coding

If you want to create visually compelling and engaging websites, then mastering CSS3 is a good first step. Many of the new features simplify design and give you more creative leeway with your styles. Use this list of tutorials, resources, tips and background information to quickly learn the new CSS3 standards,

Introducing CSS3

In some ways, CSS3 represents a change in how web standards are introduced, defined and implemented. At the core, though, the goal of CSS3 is the same as the goal for CSS in general -- improve the look and layout of a web page to enhance the user's experience.

CSS3 Relationship to HTML 5

The underlying concept of HTML5 is that Web standards evolve and the markup language should evolve as well -- instead of taking the more purist approach of specifying how Web standards should be. Since the Web has moved to more visual and audio elements, HTML5, and its styling counterpart CSS3, have attempted to keep up with this trend by adding more 'real world' tags to the language. With the introduction of HTML5, tags like <nav> or <audio> in HTML5, designers can more easily create CSS3 styles that fully capture the power of a tag and its attributes.

Key Concepts Introduced

  • Accommodating multiple display options. Display must now accommodate a wider variety of devices. The introduction of media queries is due in large part to the vast amount of display options that sites must be designed for --everything from smartphones to large HD monitors. This feature allows a site and the appropriate style to be accessed so the site will display as designed on any given device.
  • Fine-tuning site appearance: Designers must be able to fine-tune a site's look to the depth they need. The concept of attribute selectors builds on the idea of giving more display options to the web designer. A designer can now fine-tune the look of a site by designing various levels of selectors through the attribute selectors feature. Another method that permits this ability is pseudo-classes. These have been around since the beginning of CSS, but CSS3 introduced 16 new ones that build on the idea of styling content dynamically.


One of the more important changes introduced by CSS3 has more to do with the approval protocol than with the actual design elements. CSS3 introduced modules to the process by breaking out the various CSS attributes into logical blocks of information. This change should accomplish at least two important things:

  • Make ongoing changes to CSS standards easier to approve
  • More systematic browser support (since suppliers can prioritize which modules to implement first)

Key Changes

Media Queries

The idea of media types was first introduced in CSS2 -- and for the most part the only type that really caught on was media type print. The concept was to target a specific stylesheet to the media type. Media queries expand on that concept, but instead of looking for a media type -- like print -- it looks for the capabilities of the device. For example, it will seek out the following information:

  • Width and Height of the Device
  • Width and Height of Browser
  • Orientation of Device (Landscape or Portrait)
  • Screen Resolution

With this feature you can now create styles for the device, based on the capabilities of that device. If the amount of styles you wish to change are minimal -- for a mobile device versus your standard site -- you can include the styles in your main stylesheet. However, it the changes are substantial it is best to create a new one.

When using media queries, you need to consider how you want your site to display on the mobile device. For example, some common differences between a main site and a mobile site is the size of the header. The size should be greatly reduced for a mobile device. Navigation and content tends to be stacked vertically on mobile devices to simplify accessing the content.

If the style for your main site looks like this:

div#header {

background-image: url(large-bg-image.jpg);

height: 200px;

position: relative;


You could create a specific style for a mobile device -- based on its maximum width -- like this:

@media screen and (max-device-width: 480px) {

div#header {

background-image: url(small-bg-image.jpg);

height: 75px;

position: relative;



This feature lets you add a Flash-like effect to an element without the need for Flash or even JavaScript. To use the Transition property you first need to specify the CSS property you want to add an effect to and specify the duration (time) of the effect. In this example, the style of box is attached to a div tag. The box style combines several transition type --width, height, background-color and transform.

To see how it works, place this coding between the <body> tags of your HTML page.

<div class="box"></div>

Then add these styles to your stylesheet

.box {

border-style: solid;

border-width: 5px;

display: block;

width: 100px;

height: 100px;

background-color: #ff0000;

-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;

transition:width 2s, height 2s, background-color 2s, transform 2s;


.box:hover {

background-color: #00ffff;

border-style: solid;

border-width: 1px;






When you hover over the box on your HTML page, the box will rotate gradually while at the same time slowly changing colors. Transitions can be used to create powerful effects on your site -- like an engaging navigational menu.

Advanced Selectors

One of the more commonly referenced selectors introduced in CSS3 is the nth-child selector. This selector allows you to target styles to a specific element so if, for example, you wanted alternate colors for the items on an ordered list, you could either target them by even or odd -- or by selecting the number of the row.

To create an ordered list with alternating rows of white and grey you would simply style them like this:

li:nth-child(odd) { color: #fff; }

li:nth-child(even) { color: #ccc; }

or to pick out a specific row, in this case row 6, and change it to the color red you would:

li:nth-of-type(6) { color: red; }

You could also style the first or last element with CSS3 by using the first-of-type {li:first-of-type} or last-of-type {li:last-of-type}.

Borders and Text

CSS3 has also simplified creating a rounded borders. What used to require background images can now be accomplished by using the border-radius property. You can round one or all the corners of a box. The new standard also makes a nice leap forward for maintaining the typeface you chose for your site's design. By using the @font-face rule, you can now make sure your font is used when the page displays in the browser instead of a default font on the user's machine.

Getting Started with CSS

If you are completely new to CSS, as opposed to being a skilled CSS user who wants to master the new features of CSS3, start with an overall tutorial.

  • The free tutorials offered by W3Schools are a great place to start. These lessons let you set your own pace and with their "try it yourself" editor option, you can completely master a concept before moving on.
  • Getting Started with CSS by Mozilla Developer Network is another great free source for entry-level training. Their lessons are designed for beginners.

Tutorials on Common Web Page Elements

If you want to learn how to wow visitors on your web site, there are a number of common web page areas you can improve with CSS3. Your improvements can be as simple or as complex as you choose since each of the tutorials listed below supplies you with the CSS3 coding.

  • Navigation: CSS3 opens up a lot of design possibility with menu navigation. You can amp up drop down or flat-style menus with relative ease. Create a Mac-style dropdown menu by using the box-shadow, text-shadow and the border-radius CSS3 properties. The menu also degrades nicely for non-CSS3 compliant web browsers. Use the nth-child selector introduced in CSS3 to create a stylish flat-style navigation menu or style your navigation buttons as pictogram icons.
  • Dealing with Images: Photos are an integral part of almost every website, but too many sites fall under the spell of simply placing an image on the page. You can spice up how you display images using techniques like photo stacking or by building galleries with images that transition in, out or rotate. Previously these techniques required Flash or JavaScript, but now they can be handled from the style sheet.
  • Cool tricks with text: Hiding and displaying text accordion style is not necessarily new as a concept, but now it can be handled in a simpler manner. You can give your text a 3D appearance by using the text-shadow property or take it one step farther with the hover property and create text that feels like it is popping off the page.
  • Special effects: Create speech bubbles to enclose some of the text on your page and create an interesting design element. If you want to fully appreciate what kind of special effects can be created solely using CSS3 then visit Ben Lister's CSS3 demo using a non-Internet Explorer browser like Chrome and click on the IE Compatibility Test. The way the page disintegrates is fun to watch.

Additional Resources

One of the quickest ways to get up to speed on the new features besides step-by-step tutorials is by reading experts or using tools that generate the code, so you concentrate what action is associated with a particular style.

Where to Find Help

  • Books: Several books on the market explain the benefits of CSS3 and what it can do. A couple books to consider are Stunning CSS3: A project-based guide to the latest in CSS and The Book of CSS3: A Developer's Guide to the Future of Web Design. If you are serious about mastering web design you may also want to look into books that go into the theory of CSS and HTML.
  • Courses: W3Schools hosts a good free introductory tutorial about CSS3. The site also has courses about CSS, HTML and HTML5, as well as more about web design and web standards. Ed2Go offers a paid course ($89) that combines HTML5 and CSS3.
  • Communities: Online communities are great resources for learning web design and/or CSS3. A couple to try are CSS Globe and CSS Beauty .


  • Mashable: Learn how to enhance or create bar graphs, buttons and menus in Mashable's list of seven cool tricks.
  • WDL: Learn how to hide and display content accordion style, build an image slider, a calendar and more in this list of 20 lessons.
  • 1stWebDesigner: Use this list of 50 lessons if you want to learn how to incorporate the various text-centered features of CSS3. Learn how to rotate and curve text, create a text gradient or shadow, make tags clouds or -- just for fun -- develop a bouncing ball effect using only three CSS3 features.


  • CSS3Gen: Easy navigation makes this one of the top CSS3 generators on the web. To use the tool, select the feature you want on your site, such as a box shadow. You will be directed to a page with a generator that lets you set all the properties. Once finished with your design you can copy the coding displayed below the tool and paste it into your style sheet.
  • CSS 3.0 Maker: A nice feature of this tool is everything you need to generate your style sheet is on one page. You select the feature you want to create, tweak it with the tool displayed in the upper left corner of the page. When finished, download the code by clicking on the link on the right side of the page.


  • CSS Reference: This page, created by Mozilla Developer Network, lists all the CSS properties, classes and features you will ever need to reference. Listed in alphabetical order, simply click on a feature to open a page that contains the definition, syntax, browser support, values and (when applicable), examples of the property.

Powerful Tool

CSS3 is a powerful tool for web designers and developers. Taking the time to work through general tutorials as well as lessons specific to particular features is the best way to master and fine-tune your skills, learning both how features work and how to implement them.

Was this page useful?
New Features in CSS3 Tutorial