CSS3 101 – What’s new in CSS3?

Cascading style sheet (CSS) is a style sheet language that helps web developers separate content of the web pages, from its design without affecting the HTML design of webpage. Backed by the W3C consortium, universal syntaxes and browser independence, CSS finds use as a global web design language.


CSS’ tremendous popularity has urged W3C to release a newer CSS3 design standard. More details can be found here on the W3C site; however, all major functionalities are already available for use on major web browsers.

A Brief History

CSS1

The first edition of CSS introduced in 1996 came with several feature-rich properties such as;

  • unique identification
  • classes to define same style attributes
  • margin, border, padding and positioning of HTML elements.

CSS2

Published in 1998, CSS2 brought additional features such as:

  • absolute, relative, and fixed positioning of elements
  • use of z-index
  • bidirectional texts and newer front properties such as shadows

Two updates and features came in form of CSS2.1, to fix the errors in CSS 2

CSS3

CSS3 is the latest edition of the CSS Style sheets. CSS3 is a superset of CSS2.1 with several additional features such as:

  • Rounded corners,
  • Background image improvements,
  • Use of alpha in color values,
  • Text effects, text-shadow, ellipsis, clip,
  • Attribute matching,
  • Web fonts, font-face definitions,

What’s New In CSS3?

Rounded Corners

An improvement over previous versions is reducing number of steps to achieve rounded borders through border-radius property. Before CSS3 either image backgrounds or javascript hacks were used to create rounded corners, and this was a real pain. It also brought things to get more complicated. This was one of the biggest improvements in CSS3.

Background Decoration, multiple backgrounds

background-origin and background-clip gives customized positioning and clipping for single and multiple page backgrounds. With addition of background-image-size property, now users can scale background images to fit container width. The new recommendation also made usage of multiple background images possible. This allows users to create buttons, interfaces without using a lot of empty divs. You can read more about how to use multiple background images here.

Colors with transparency

Transparency using Opacity in CSS2


RGBA background in CSS3



A huge improvement over older versions, CSS3 uses HSL, HSLA and RGBA properties to accommodate the degree of opacity along with standard color palettes. Use of alpha attributes in colors, allow designers to use transparent backgrounds without making text transparent, which is a great design feature if you use nice background images.

Text Effects

CSS3 added text effects such as text-shadow to give shadow effect. Text overflow control too uses ellipsis and clip to define text boundaries. You can also use mask filters for additional text-effects.

Attribute Matching

This new feature allows substring match of attribute values, as opposed to older versions of making two different divs for this purpose. For example using a[href^="http://"] you can style all links that href attribute starts with “http://”. You can style elements using all attributes like title, href, rel, etc. This way for some elements you won’t even need to specify classes.

Custom Web Fonts

This is one of the best improvements in CSS3. Using font-face syntax, designers can now use custom fonts on web design projects. Many great websites today use professional web fonts. This gives sites a more classy look. In old site designs, designers used to use images for menu elements, headings etc. Use of custom web fonts made things easier and it also made web readible by search engines.

Conclusion

In this post, I tried to highlight many of the great improvements in CSS3. We used many codes, images, hacks to make sites seem better. W3C adopted all those great design elements in CSS3 to make things easier. So, why try harder when things got more simple? Start using it now ;)



NS Weight Release

WP-Backgrounds Lite by InoPlugs Web Design and Juwelier Schönmann 1010 Wien