Blog

After our article on how HTML will benefit web design, we thought that this week we’d have a look at another weapon in the web designer’s arsenal: CSS3. This is something that has been around for a couple of years now, but it has had improvements made to it so that it can work properly with HTML5 and further enhance the experience of web users.

What is CSS3?

CSS3 is the latest version of the Cascading Style Sheets, which is a web language used by developers to tell web browsers how a site should look and be formatted. It is usually used with HTML websites, although it can be used with other types of documents – and the capabilities of CSS3 are far beyond anything that came before.

It is the product of a group commonly called W3C, whose full name is the World Wide Web Consortium. They first developed CSS with the aim of promoting better standards on the internet and making sure there was a consistent approach to the development of webpages.

What are the benefits of CSS3?

One of the main benefits associated with CSS3 is that it allows web designers to create webpages that have fewer requirements in terms of coding. This helps to make pages load faster than before, a benefit that we have previously seen in relation to HTML5.

This means that CSS3 is good for sites that are content-rich as the code is streamlined and it can handle more visual effects than previous versions of CSS. Another benefit of CSS3 is that it is broken down into modules, such as Colour and Media Queries. The two versions that came before it both ended up being fairly complicated; by contrast, the fact that CSS3 allows web developers to update individual modules helps to make the whole process much easier.

Another benefit of CSS3 is that it is now supported by the vast majority of web browsers. Originally, many of its teething problems existed due to the fact it could not be supported on Internet Explorer – and when you consider that it first came about in 1999, it gives an idea of the scale of the issue. However, even though earlier versions of IE are still incompatible, IE9 now supports CSS3, as does Firefox, Chrome, Safari and Opera.

How does CSS3 relate to HTML5?

Even though CSS3 has been around for much longer than HTML5, it is only now properly supported by browsers and so there is a lot of talk about how the two platforms support each other.

One of the main ways in which HTML5 and CSS3 benefit each other is in relation to Flash applications. We saw in our previous HTML5 article that the new version of HTML is able to support much of the media that previously would have required Flash, which isn’t always compatible with some people’s operating systems. The combination of HTML5 and CSS3 works well here, as they make it easier for alternative apps to be developed and supported – which also gives web developers more options in terms of design.

Another reason for using CSS3 in conjunction with HTML5 is that even though web designers might not need all the features of CSS3 in order for the site to function, it does have capabilities that make it easier to give websites the ‘wow’ factor.  For example, it has excellent text and layout features that help to make websites look fantastic, which as we all know is vital for the user experience.

CSS3 has also benefitted from some updates to make it work better with HTML5, all of which is very positive for users. An example of this is the ability to create box shadows, which is a good way of creating the illusion of depth on a site. It is now also much easier to create rounded corners with CSS3 – this might sound like a really small update, but it is very often the little details that make all the difference.

The colouring module of CSS3 is another aspect that has received an update, making the colouring process much easier; developers don’t have to know huge amounts about hex colouring anymore, because CSS3 allows us to select the amount of colour to appear in a design.

One of the challenges for CSS3 and HTML5 is that not all of their features are available on all browsers at the moment, so there is still a bit of waiting around and further development to be done before they can be utilised to their full advantage. However, the combination of both CSS3 and HTML5 is already helping to make the web design process more efficient and is improving our ability to create exciting-looking websites. We look forward to the day when all the features are fully compatible across all browsers.

By Chelsey Evans

Follow @AmpheonLtd