CSS3 basics

If you have ever been in the world of web development, chances are that you have heard of CSS, or more formally, cascading style sheets. If you aren't familiar with CSS, it is a language that is used to define how HTML-based content is displayed on the web. CSS can be used to control layout, spacing, colors, fonts, and much more, and has been an integral component of "the Web" since it began gaining popularity in the mid-1990s.

If you are actively engaged in designing or developing web content, then chances are that you have also heard of CSS3. Though you may have heard of it, you might be wondering what it is, and how it differs from existing implementations of CSS.

All technologies mature over time, hence the common adoption of version numbers and terms such as "beta." These labels allow you to identify which version of a particular technology you are using, and thus you can reliably expect what kind of features that piece of software will support. CSS3 is the third iteration of the CSS standard; it is a maturation of the cascading style sheets language that defines new features that allow for richer presentation of content within HTML.

Since its inception, CSS has allowed you to tailor the presentation of information within your HTML content. Fonts, colors, background images, solid borders, and so on are all easily configured via existing CSS styles. CSS3 does not detract from the existing capabilities from the Web; rather, it augments and extends the capabilities of the browser to support richer features and richer presentation of HTML-based content.

Previous iterations of the CSS specifications were all-encompassing definitions of what makes up the CSS language. In CSS3, the specification has been broken up into a collection of smaller specifications, referred to as modules. Each module defines aspects within a given subset of functionality. One module covers media selectors, another covers colors, another covers SVG, and so on. The modular approach allows for specific aspects of the CSS specification to be approved and implemented as a standard sooner than having one massive specification that includes all features; which would undoubtedly take much longer to become ratified as a standard. In a nutshell, this means that it is an evolving standard, where specific aspects may become standardized before others. You can learn more about the modular design of the CSS3 specification through the W3C.

Since its inception, CSS has allowed you to tailor the presentation of information within your HTML content. Fonts, colors, background images, solid borders, and so on are all easily configured via existing CSS styles. CSS3 does not detract from the existing capabilities from the Web; rather, it augments and extends the capabilities of the browser to support richer features and richer presentation of HTML-based content.

The Web 2.0 movement brought with it a new level of design in web-based interfaces. No longer were web pages an organization of solid colors, images, and squares. HTML-based interfaces began to emerge which employed nonstandard fonts, complex color gradients, rounded corners, and overall, a much more polished and refined look and feel. The combined HTML and CSS that were used to create these interfaces often became complex, fragile, and unwieldy. CSS3 introduces new styles for much easier control over the presentation of these sophisticated interfaces.

CSS3 defines styles that control the corner radius of divs, spans, or other HTML elements; thus creating a rounded box no longer requires multiple nested HTML containers and chopped up image assets. It can now be specified through simple CSS definitions, on a single HTML container.

In addition to rounding the corners of HTML containers, CSS3 defines new styles for the borders of HTML container elements. Through simple CSS style definitions, developers and designers will now be able to easily create complex borders that are not limited to simple dotted or dashed lines, rather they can be based on tiled or stretched image assets Again, this is a feature that enables quick-and-easy development of complex visual interfaces, yet with minimal complexity in the underlying code.

Following inline with visual changes using simple code: CSS3 introduces capabilities for adding drop shadows to both HTML containers and text segments, adds the ability to define multi-column text layouts, and even support for web fonts (the usage of custom, non-standard fonts within HTML interfaces).

CSS3 also introduces powerful new methods for controlling color and opacity of content within HTML. CSS3 introduces support for HSL (Hue, Saturation, and Lightness), HSLA (HSL with Alpha), RGB (Red, Green, Blue), and RGBA (RGB with Alpha) color spaces. These allow for more refined control of presentation, and better control of content alpha within your HTML documents. In addition to the support of additional color spaces, CSS3 also enables support of complex color gradients using any of these color spaces, including alpha gradients.

One notable addition with CSS3 is the support of media queries. CSS3 media queries allow designers and developers to create style sheets that apply to specific screen dimensions. Using media queries, a singular HTML document can have a varied presentation on a range of screens or devices. A designer or developer can create styles that are selectively applied based upon the dimensions of the screen where content is being viewed. Therefore, differing layout and presentation for tablet-based interfaces, mobile phone interfaces, and desktop interfaces can be applied to the same HTML document.

Media queries aren't the only way that you can have conditional styles applied to your HTML content via CSS. Selectors are not new in CSS3, however CSS3 defines many additional selectors for your use. Selectors are conditional rules for applying style sheets to HTML elements. Any time you have used a :hover style on a link style, you have used a selector. The new CSS3 selectors can be used to apply styles to specific elements, first-child elements, last-child elements, sibling elements, and many other scenarios. You can read about all of the difference selector rules in the W3C specification.

Another notable addition with CSS3 is the inclusion of transformations. Transformations are styles that control the transformation of the visual display of a particular object. 2D transformations apply to a dimensional space, such as translation on the x or y axes, scaling horizontally and vertically, rotating around the point of origin, or even skewing content in both the x and y directions. All browsers that support CSS3 support 2D transformations, however, some browsers even support CSS3 3D transformations. 3D transformations are more-or-less the same as those available with 2D transformations, with the addition of the third axis. 3D transformations enable scaling, translation, and rotating in a three dimensional space, along the x (horizontal), y (vertical), or z (depth) axes. For more information on 2D transformations and 3D transformations refer to the W3C site.

Another extremely powerful addition is that CSS3 introduces animations and transitions through CSS styles. Animations and transitions are a fairly significant step for CSS. These features allow you to create style sheets that define animation of specific content, or transitions from one visual state to another. Web designers and developers no longer have to rely solely upon JavaScript and timer events for animating content within the browser. With CSS3 animations and transitions, style sheets can be defined that abstract the animation logic away from the actual HTML structure, and no scripting is involved in any way. As an added bonus, some browsers even support hardware acceleration for optimized playback and animation quality. The W3C site provides more information on CSS animations and transitions.

Although this is not an exhaustive list of all of the new features included within CSS3, hopefully it will give you an idea of what CSS3 makes possible, and how use of CSS3 can help you simplify your HTML content.

CSS3 has commonly been misconceived as a subset of HTML5 features. While CSS3 and HTML5 often accompany each other, they are not synonymous. HTML5 is the fifth iteration of the HTML (Hyper Text Markup Language) specification, which is used to define the structure, content, and capabilities within HTML documents. HTML5 allows for new tags and support of richer media, whereas CSS3 defines new rules for customizing the presentation of the user interface. CSS3 defines how that HTML content will actually be presented within the browser.

Now that we have a general idea of what CSS3 is, it is important to know where you can actually use it. All of the major desktop browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) support many CSS3 features. However, only the latest versions of these browsers actually support the majority of these CSS3 features. Older versions of these popular browsers may not support all, if any CSS3 features. If you do take advantage of CSS3 styles of features within your own content, you may want to be sure that your target audience can support those features before proceeding too far. A great resource for verifying the compatibility of CSS3 features in different browsers is www.caniuse.com, which lists browser support for individual CSS3 features.

If you are targeting mobile browsers, then you're in luck. CSS3 is supported by most of the latest smartphone operating systems. This includes the default web browsers for iOS, Android, BlackBerry, and even the latest generation of Windows devices. In fact, mobile browsers have some of the best support for CSS3 features. The catch is that not all desktop and mobile browsers support all of the features equally.

In addition to the fact that not all browsers support all CSS3 features to the same level, some features may work better in a particular browser than they do in others, even though both may "support" a given feature. This is especially true when comparing the result in a hardware-accelerated browser to that of a nonhardware-accelerated browser.

If that wasn't enough, CSS3 can get even more confusing by the fact that not all browsers support the same syntax for particular CSS3 features. Since the CSS3 specification is not yet standardized, many browser vendors prefix their CSS3 styles with browser-specific identifiers. As an example, using the CSS3 style " -webkit-border-radius " will only work in browsers based upon the webkit engine, even though other browsers support their own CSS3 border-radius implementation. Until the CSS3 specification is finally implemented as a standard, these kinds of inconsistencies will be evident, and will need to be worked around.

CSS3 features offer powerful additions to the CSS language. Through the use of CSS3, web designers and developers can more easily create complex and sophisticated layouts, dynamic layouts that morph to fit the consuming screen, as well as sophisticated animation and transition sequences, which are often thought only possible with plugin-based content.

The following resources should help you get started with CSS3:

• Start using CSS3 today
• CSS3.info
• Wikipedia: Cascading Style Sheets
• W3C: Cascading Style Sheets
• W3C: Introduction to CSS3
• caniuse.com

Lastly, be sure to check out Chrome Experiments, a showcase for web projects built with CSS3 and other web technologies.