CSS3 Introduction – New Features, What it Can Do, and Resources

Posted in Coding, HTML & CSS • Posted on 12 Comments

A short time ago I posted an introduction article about HTML5 and I promised you a CSS3 introduction and what new things it brings to the industry, although it’s been some time since it was officially released. If you didn’t read the article on HTML5 yet, I strongly advise you do so, as CSS3 works better with the latest markup language from the World Wide Web Consortium.

CSS2 appeared back in 1998 and since then a lot has happened on the internet. Its only revision was made in 2011, CSS2.1, but experts in the industry say it was only a matter of time until CSS3 should have been released, as the features it comes with are entirely necessary and were missed during the past years. What many people didn’t know about CSS3 was that its development started only one year after the submission of its previous version. So the W3C has been working on this improved version since 1999, for more than 12 years until the first CSS3 stable version was released.

Although it sounds like there is a big difference between CSS2 and CSS3 (which is quite true), all modern browsers were quite quick to adopt the new addition to the W3C family. All major browsers support most CSS3 features that are currently available. As with HTML5, the Consortium still considers CSS3 to be under continuous development and it is very unlikely for it to get a final version, for the same reasons HTML5 will probably not. With the web requirements, and the industry in general, changing so fast, coding needs to move forward at the same pace.

UpdateCreate a Responsive Website Using HTML5 and CSS3 – Video Tutorial

Main differences

Maybe the biggest difference between CSS2 and CSS3 is the separation of modules. While in the previous version everything was a large single specification defining different features, CSS3 is divided into several documents which are called modules. Every single module has new capabilities, without hurting the compatibility of the previous stable release. When we talk about modules, we can name more than fifty of them, however four of these have been published as formal recommendations. The big four is comprised of the following:

  • Media Queries (published in 2012)
  • Namespaces (published in 2011)
  • Selectors Level 3 (published in 2011)
  • Color (published in 2011)

The media queries might well be the most important addition to CSS. What it does is simple: it allows certain conditions to be applied to different stylesheets, making websites fluid and fit all kinds of screen sizes. Media queries allow developers to tailor to different resolutions without having to change or remove content.

media queries

Example of a responsive grid built with media queries

Media queries work very easily and once you have used them once you are pretty much set. Let’s look below at some lines of code.

@media screen and (max-width: 600px) {
    background: #FFF;
}

By starting to style in the media query above, you will only style for screens with a maximum width of 600 pixels. In the example above, all screens with a maximum width of 600 pixels will show you a white background. However, the max-width is not the only condition you can apply to a stylesheet. You can use max-device-width too (which is the screen resolution, unlike max-width which is the viewing area), you can use min instead of max, but you can also combine two conditions, such as in the example below, which will only apply for screens with a viewing area between 600 and 900 pixels.

@media screen and (min-width: 600px) and (max-width: 900px) {
    background: #FFF;
}

CSS3 has some pre-defined stylesheets for portable devices, such as iPhone or iPad, which you can see below:

	<link href="iphone4.css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" />

and

	<link href="portrait.css" rel="stylesheet" media="all and (orientation:portrait)" />

 

	<link href="landscape.css" rel="stylesheet" media="all and (orientation:landscape)" />

As you can see above, the media queries can come in quite handy when developers need to make fluid grids work on different devices with different screen sizes.

Some other important design considerations of CSS3 are, for example, the borders, which now can be made rounded without hacks. CSS3 has actually introduced rounder borders, which is a huge help for designers and developers. However, many of these features do not work in older versions of Internet Explorer , but this is not something new for us, we’ve heard it before. The only code you need to add in the stylesheet (in the specific class) is something similar to:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;

As you can see, it is much easier than before. Gradients are also available in CSS3, another cool addition that we have wanted to see for some time, as well as box/text shadows and border images. In order to add text shadow to content without any hacks, CSS3 simply requires something similar to the following line of code:

text-shadow: 2px 2px 2px #ddccb5;

Creating columns for content has never been easier than with CSS3, as now you have four lines of code you can use at any time. These are:

  • column-count
  • column-width
  • column-gap
  • column-rule

Another great time saver is the option of inserting multiple background directly from CSS, instead of using all kinds of hacks as we used to do before. The code is simple to write and to remember, and I am sure you will use it at some point in time.

.multiplebackgrounds {
height: 100px;
width: 200px;
padding: 20px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}

Vendor prefixes

Back when CSS3 was newly released, vendor prefixes were used all the time, as they helped browsers interpret the code. Sometimes you still need to use them today, in case the browser you are testing in doesn’t read the code. So below is a short list with all the vendor prefixes for major browsers:

  • -moz- : Firefox
  • -webkit- : Webkit browsers such as Safari and Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Note that, according to an official press release from a few weeks ago, Opera will soon build their new desktop and mobile browser on webkit too, instead of their current Presto rendering engine. This means that the -o- vendor prefix will disappear at some point in time, leaving us with only three major ones.

Browser logos

Vendor prefixes are used in order to make CSS3 compatible with all major browsers

New pseudo-classes

The arrival of CSS3 brings us a bunch of new pseudo-classes, including structural ones, that target elements based on their position in the document and relation to different other elements.

  • :only-child – in case you have an element in the document tree that is the only child of its parent, it can be targeted by this pseudo-class.
  • :empty – targets elements that don’t have any children or any text, for example an empty element such as <p></p>.
  • :nth-child(n) – it takes advantage of numeric (n) values and targets child elements in relation to their position within the parent. To give you a precise example, a list of blog comments would probably look more appealing with alternating background colors – this can be done using this pseudo-class.
  • :first-of-type – this targets the first of a specific type of element within a parent, and is the opposite of :last-of-type.
  • :first-child – targets the first child element in a parent, regardless of its type. It is the opposite of :last-child.
  • :not(s) – this one targets elements that are not matched by the specified selector (s).
  • :root – this one targets the root element of a document.

There are more pseudo-classes added to the new CSS3, but as this is basically an article for beginners, it is not really worth mentioning them.

Examples

There are not many examples of CSS3 that I can show you, as it usually is used in collaboration with HTML5 or jQuery. CSS is for styling and enhancement, not for creating applications. Therefore there are only two interesting links I want to share with you.

1. Rotating Multiple Images

rotating multiple images

2. Robot Animation

Robot Animation

Where to learn?

As I advised you in the HTML5 article (and even much more now), CSS3 is impossible to master unless you have prior CSS knowledge. I assume, since you’ve read this article, that you have prior CSS experience, so you just have to build on that. Otherwise you need to take it from the top. In order to ease you into the CSS3 learning process, I will recommend several sources below:

Conclusion

HTML5 and CSS3 are here to stay, and in combination these two tools are very powerful and can create beautiful, high-quality solutions. Therefore you need to learn them and start using them today, otherwise you will fall behind your competitors.

As promised before, I will start working on putting together several HTML5/CSS3 tutorials so that you will be able to learn even more from 1WD. However, until that comes, please make sure you have at least some basic knowledge of HTML5 and CSS3, so that we are all on the same page when we start. See you next time!

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

12 Comments Best Comments First
  • Akmal Irfan

    Sunday, March 17th, 2013 08:51

    1

    “W3Schools.com is not affiliated with the W3C in any way.” – from w3fools.com
    Otherwise, nice article.

    +5
    • Suzette Franck

      Sunday, March 17th, 2013 14:49

      3

      I was going to reiterate, I love w3school.com’s website, but I don’t think they are associated with the real W3.

      Very good article! Most resources I find on the web seem incomplete, but I highly recommend this book, which is pretty comprehensive: ” HTML5 & CSS3 For The Real World” by Alex Goldstein, Louis Lazaris, and Estelle Weyl published by sitepoint.

      -5
      • Christian

        Tuesday, March 19th, 2013 11:45

        8

        Thank you for the book recommendation Suzette, I haven’t read it but I am definitely going to look more into it.

        +19
  • Dreamsky

    Monday, March 18th, 2013 09:04

    4

    Christian Vasile has written the post nicely. Here he has described the differences between css2 & css3. Not only that but also he described about the new pseudo-classes along with some examples. There is no doubt that this post is helpful for us. Hope he will continue this type of writing.

    -1
  • Wendy

    Monday, March 18th, 2013 13:17

    5

    Helpful information to someone such as myself who is learning everything for the first time. Thanks-

    -1
  • Joseph12

    Friday, March 22nd, 2013 09:51

    9

    After study a few of the posts on this website now, and I truly like your way of blogging. I bookmarked it and will be checking back soon.

    -2
  • Jitendra Kumar Sahoo

    Sunday, March 17th, 2013 14:35

    2

    Good and informative article. Before reading this article I only know about media query and vendor prefix. Nice to know about pseudo classes and image animation. But I am only confused about column count, width, gap, rule. If you have more information on column. Let me know about it.

    -3
  • Ahmad Ali

    Thursday, March 28th, 2013 04:40

    10

    Dear Christian Vasile, I really appreciate, you wrote an excellent & informative article. Thank you.

    -4
  • JoeFlash

    Monday, March 18th, 2013 18:02

    6

    Wouldn’t restricting the responsive coding to ‘screen’ type cause problems? The trend now is to design for mobile first. Then restyling is applied for higher and higher resolution devices. If you restrict the restyling to only ‘screen’ this could cause issues with devices that only look for a specific device type other than undefined or ‘all'; such as ‘handheld’ or ‘tv’ or ‘projection’. These devices will then likely only get the ‘mobile’ rendering definitions which is likely not desirable.

    -6
  • Sandra Smith

    Saturday, March 30th, 2013 06:54

    11

    After an awesome HTML5 round up here is another awesome CSS 3. Anything else my friend? Lately I am seeing people talking about pseudo-classes, it is great to find information about this here.

    -6
  • ashish

    Tuesday, March 19th, 2013 02:06

    7

    css3 get’s really very awesome features and the gradient property is very cool by that we do not have to use the gradient images by that the performance of web page is also increases.

    -8
  • Lucky Balaraman

    Monday, April 8th, 2013 23:54

    12

    Excellent, informative (and entertaining!) article.

    1) I’m curious to know how the “Robot Animation” was done using only CSS. Maybe you could explain that in a future article?
    2) Are the animation properties and selectors accepted by recent versions of popular browsers?

    Best,

    Lucky

    -12
  • Lucky Balaraman

    Monday, April 8th, 2013 23:54

    12

    Excellent, informative (and entertaining!) article.

    1) I’m curious to know how the “Robot Animation” was done using only CSS. Maybe you could explain that in a future article?
    2) Are the animation properties and selectors accepted by recent versions of popular browsers?

    Best,

    Lucky

    -12
  • Sandra Smith

    Saturday, March 30th, 2013 06:54

    11

    After an awesome HTML5 round up here is another awesome CSS 3. Anything else my friend? Lately I am seeing people talking about pseudo-classes, it is great to find information about this here.

    -6
  • Ahmad Ali

    Thursday, March 28th, 2013 04:40

    10

    Dear Christian Vasile, I really appreciate, you wrote an excellent & informative article. Thank you.

    -4
  • Joseph12

    Friday, March 22nd, 2013 09:51

    9

    After study a few of the posts on this website now, and I truly like your way of blogging. I bookmarked it and will be checking back soon.

    -2
  • ashish

    Tuesday, March 19th, 2013 02:06

    7

    css3 get’s really very awesome features and the gradient property is very cool by that we do not have to use the gradient images by that the performance of web page is also increases.

    -8
  • JoeFlash

    Monday, March 18th, 2013 18:02

    6

    Wouldn’t restricting the responsive coding to ‘screen’ type cause problems? The trend now is to design for mobile first. Then restyling is applied for higher and higher resolution devices. If you restrict the restyling to only ‘screen’ this could cause issues with devices that only look for a specific device type other than undefined or ‘all'; such as ‘handheld’ or ‘tv’ or ‘projection’. These devices will then likely only get the ‘mobile’ rendering definitions which is likely not desirable.

    -6
  • Wendy

    Monday, March 18th, 2013 13:17

    5

    Helpful information to someone such as myself who is learning everything for the first time. Thanks-

    -1
  • Dreamsky

    Monday, March 18th, 2013 09:04

    4

    Christian Vasile has written the post nicely. Here he has described the differences between css2 & css3. Not only that but also he described about the new pseudo-classes along with some examples. There is no doubt that this post is helpful for us. Hope he will continue this type of writing.

    -1
  • Jitendra Kumar Sahoo

    Sunday, March 17th, 2013 14:35

    2

    Good and informative article. Before reading this article I only know about media query and vendor prefix. Nice to know about pseudo classes and image animation. But I am only confused about column count, width, gap, rule. If you have more information on column. Let me know about it.

    -3
  • Akmal Irfan

    Sunday, March 17th, 2013 08:51

    1

    “W3Schools.com is not affiliated with the W3C in any way.” – from w3fools.com
    Otherwise, nice article.

    +5
    • Suzette Franck

      Sunday, March 17th, 2013 14:49

      3

      I was going to reiterate, I love w3school.com’s website, but I don’t think they are associated with the real W3.

      Very good article! Most resources I find on the web seem incomplete, but I highly recommend this book, which is pretty comprehensive: ” HTML5 & CSS3 For The Real World” by Alex Goldstein, Louis Lazaris, and Estelle Weyl published by sitepoint.

      -5
      • Christian

        Tuesday, March 19th, 2013 11:45

        8

        Thank you for the book recommendation Suzette, I haven’t read it but I am definitely going to look more into it.

        +19

Comments are closed.

54.196.159.11 - unknown - unknown - US