New to CSS3? Get Started With These CSS3 Basics

by 0 03/21/2012

Over the coming weeks, we are going to be introducing a variety of different CSS3 techniques that you can apply to your web pages to make them more interesting.

In this first post, we begin with CSS3 basics.

Let’s get started with CSS3.

What is CSS3?

CSS3 is a supplementary expansion to what is currently possible with Cascading Stylesheets (CSS), the language we use to control the presentation of our web page. As well as providing some excellent new features, CSS3 offers solutions to problems that have caused web developers headaches for some time such as rounded corners; page sizing; content flow; transformations and animations. All of your current CSS code is still valid with CSS3 and will continue to be supported by browsers.

CSS3 is not a single specification. Instead it is modular with features grouped together. This has the advantage of allowing each individual specification to be reviewed, approved and implemented separately. This has meant that while the entire scope of what CSS3 can do has not been finalized, certain modules are now stable enough for us to be able to implement them without concern.

CSS3 is not part of the HTML5 specification – although you will often hear CSS3 features promoted as HTML5. Over the last 12 months HTML5 seems to have become something of a catch-all marketing phrase for future web technologies (replacing Web 2.0).

Does CSS3 Work In All Browsers?

Browser support varies depending on the feature. Many of the CSS3 techniques we will be discussing will alter the look and feel of your pages, but will gracefully degrade for older browsers.

For example, with CSS3 it is possible to add rounded corners to boxes. In the majority of browsers (Google Chrome, Mozilla Firefox, Safari, Opera and Internet Explorer 9) the box will be shown with rounded corners. In browsers that do not support rounded corners (Internet Explorer 6 – 8), the box will still be shown with squared corners. To a user of older browsers, this makes no real difference – the content or functionality is still available.

How rounded corners appear on different browsers

Some of the features discussed will require vendor prefixes. Vendor prefixes enable browsers to experiment with features before they are ready to be committed to the browser. This allows vendors to ensure their features match the specification as it evolves and results in fewer inconsistencies.

Later articles will discuss features that would have a larger impact on your page – for example, a new way of laying out a page. For these features, support is often still in progress so it is recommended that you check your websites usage statistics before using one of these features in production.

For all the features discussed, we will provide a browser matrix of support so that there is no confusion.

Glossary of Terms

To bring you up to speed with some of the acronyms and terms we will be using throughout these articles, below is a glossary of some of the more commonly used terms.

  • CSS – Cascading Stylesheets – documents which define the presentation of a page.
  • Gecko – The browser rendering engine used to power Mozilla Firefox.
  • Graceful Degradation – Ensuring your website degrades well for less capable browsers.
  • Media Queries – Rules for tailoring designs to a specific range of devices without changing the content.
  • Responsive Web Design – A design that works on every screen size and/or device.
  • Selector – An identifier which matches to associated HTML elements on a page.
  • Vendor Prefixes- A prefix used to target a particular browser implementation. There are currently many discussions for and against vendor prefixes but they are here to stay for the meantime. The prefixes are:
    • -moz- for Mozilla Firefox
    • -ms- for Internet Explorer
    • -o- for Opera
    • -webkit- for Google Chrome, Android’s default browser and Safari
  • W3C – The World Wide Web Consortium, the main standards organisation for the World Wide Web.
  • Webkit – The browser rendering engine used to power both Google Chrome and Safari; as well as the iPhone and Android’s default browser.
  • WhatWG – The Web Hypertext Application Technology Working Group – a collaboration of browser manufacturers interested in evolving web standards.

Coming Up

Now you’ve learned CSS3 basics, the next article in this series will show how we can make text more interesting with CSS3. Later articles will cover different layout techniques; transformations and animations. Welcome to the world of CSS3!

About 

Andi Smith is a Presentation Technical Architect who writes about web development, CSS and JavaScript on andismith.com. You can follow him on Twitter at @andismith.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

No comments yet


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>