CSS3 vs CSS – How Are They Different ? (Infograph)

Difference Between CSS3 vs CSS

Cascading Style Sheets or CSS is a key element of web design. As a web developer or designer, you need to understand CSS, especially the difference between CSS3 vs CSS.

You may have heard or come across the term CSS3 if you’ve read up about web development or web design. If you ever thought about what the difference could be between CSS3 vs CSS, here’s where all your doubts will be laid to rest: They are both the same.

That’s right: CSS3 vs CSS are as different from each other as HTML and HTML5. CSS3 is simply the latest iteration of CSS. People who talk about coding CSS right now are actually just referring to CSS3.

Both HTML5 and CSS3 have generally become buzzwords, with meanings beyond their actual technologies. They symbolize adherence to certain core standards in web development instead of using proprietary software. For the most part, the hype around these buzzwords has already died down. Most companies, even the ones that swear by keeping everything in-house, would agree that sticking to these core standards makes life much easier for everyone.

Now, it’s been quite a while since CSS3 has been launched and accepted by one and all. It brought a lot of great things to the industry and marked quite a big step forward for web development in general. The previous version, CSS2, was launched all the way back in 1998. That’s almost 20 years ago. The only revision it received after its launch was in 2011, called CSS2.1. Even with the revision, most experts had already started telling that CSS3 is inevitable. CSS3 came with a number of features and capabilities that had become entirely necessary by then.

What you may not have known about CSS3 is that it began development just a year after its previous version was submitted. This means that the W3C was working on the improved version since 1999. It took more than 12 years to release the first stable version of CSS3.

There are huge differences between CSS3 vs CSS (which we will get to soon). But the fact is that web browsers were already ready for the additions to CSS3 by the time it released. As a result, they adapted rather quickly to the new release. Every major web browser now supports CSS3, even Internet Explorer!

Of course, the W3C still continues to develop CSS3 and HTML5, so a final version is unlikely. To be fair, a final version is also not a necessity at the moment, given how quickly the internet is progressing. With web requirements and the industry itself growing and changing so rapidly, coding has to move forward as rapidly, if not more.

CSS3 vs CSS Infographics

CSS3 vs CSS Differences Defined

Now that you know a little bit about the background behind CSS3 let’s take a closer look at what it changed. Perhaps the biggest difference between CSS3 and the previous release that it replaced is the module separation. In CSS2, everything was a single large specification that defined different features. However, CSS3 changed this by bringing in several documents called modules. Every module has its own new capabilities that do not impact the previous stable CSS release’s compatibility.

Media Queries

There are a lot of modules available, but just four are published as formal recommendations by W3C. These big four modules are as follows:

1. Color, published 2011
2. Selectors Level 3, published 2011
3. Namespaces published 201
4. Media queries published 2012

Among these, the most important module is Media queries. In fact, this module could arguably be the most important addition that CSS3 brought to CSS in general. Media queries do some rather simple: it enables the application of certain conditions to different style sheets. This allows websites to be fluid or ‘responsive’ to different screen sizes. In other words, websites can adjust their dimensions and elements to fit different devices. Today, responsive web design is probably the biggest buzzword. Given that a majority of internet usage is now on mobile devices, responsive design is absolutely essential, and media queries help achieve this. The module also enables developers to tailor websites to various resolutions without changing or removing content.

Media queries are also pretty easy to figure out and add. Once you use them a few times, you can pretty much figure out the rest. Here are some example lines of code:

@media screen and (max-width: 600px) {

    background: #FFF;

}

It seems simple enough, doesn’t it? With these couple of lines of code, you can enable styling for screens with a maximum of 600 pixels of width. This means that all screens with a maximum of 600 pixels width will show a white background. The maximum width is just one of the several conditions you could apply to a style sheet on CSS3. Another one is max-device-width. This is the screen resolution and not the viewing area. Also, a minimum value can be stated instead of the maximum; just use ‘min’ instead of ‘max’. You could also combine the two, like below:

@media screen and (min-width: 600px) and (max-width: 900px) {

    background: #FFF;

}

Here, the styling only applies for screens with a viewing width of 600-900 pixels. CSS3 comes with some pre-defined style sheets for popular mobile devices, like the Apple iPad and iPhone. Here are some of them:

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

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

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

It should be pretty clear by now how important media queries are. This module is very handy for developers who want to create responsive web design with the least possible amount of coding.

Rounded borders

CSS3 also comes with some really key web design considerations. For instances, the borders can be rounded without hacks, with CSS3 introducing rounded borders. This was a huge plus for web developers and designers who were struggling with CSS borders before. Not surprisingly, some of these features still do not work in old versions of Internet Explorer. The only additional code you need to add to the specific class within the style sheet is, for example:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border: 2px solid #897048;

Thus, CSS3 makes life a lot easier for web developer and designer. The release also came with gradients, which was surprisingly unavailable in previous releases.

Recommended courses

Border images, text shadows

Other elements that were added with CSS3 but missing in previous versions included border images and box/text shadows. CSS3 made things much simpler, removing the need to add hacks for any of the above common styling elements. For example, here is the solitary line of code to add for text shadows:

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

Columns

CSS3 also simplified how to add columns to content. All you need to do now is add four lines of code:

1. column-count
2. column-width
3. column-gap
4. column-rule

Multiple backgrounds

The latest CSS release also added the ability to directly insider multiple backgrounds from CSS rather than using roundabout hacks like before. The code is incredibly simple to remember and write, and is also super important for creating modern web design elements. Here is an example:

.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

Vendor prefixes were frequently used during the time when CSS3 had just released. They helped browsers interpret CSS code. They are used to this day if your web browser cannot read the code. Here are the vendor prefixes for major browsers:

• -moz- : Firefox
• -webkit- : Webkit browsers like Apple Safari and Google Chrome
• -o- : Opera
• -ms- : Internet Explorer

Opera’s prefix has also become redundant since the company switched its mobile and desktop browser to the Webkit platform from its Presto rendering engine. Although the vendor prefix continues to be used to some extent, it has mostly disappeared at this point.

Added pseudo-classes

With the addition of CSS3, we also got a lot of additional pseudo-classes, including structural ones for targeting elements based on their document position and relation to other different elements. Here are some of them:

• :root targets the document’s root element
• :not(s) targets elements not matched by the selectors specified in (s)
• :first-child targets the first child in a container regardless of the type of item
• :first-of-type targets the first specified type of element within a parent
• :nth-child(n) uses numeric values within (n) to target child elements with respect to their position in the parent. For instance, you could use this to add alternating background colors to blog comments
• :empty targets elements that do not have text or children, like empty elements such as <p></p>
• :only-child targets elements in a document tree that is the only child element within the parent

New CSS3 selectors

CSS3 offers a number of ways to write up CSS rules through the new selectors, a new combinatory and pseudo-elements: here are the three new attribute selectors:

• For exact matches, element[foo^=”bar”]
• For matching an element with an attribute called foo beginning with ‘bar’, element[foo$=”bar”]
• For matching an element with an attribute called foo ending with ‘bar’, element[foo*=”bar”]

CSS3 comes with several new pseudo-classes, some of which have been discussed above. Here are some more:

• :nth-last-child(n) matches the exact child elements from the last one
• :nth-of-type(n) matches sibling elements having the same name before them in the document tree
• :nth-last-of-type(n) matches sibling elements having the same name from the bottom
• :last-of-type targets the last specified type of element within a parent
• :only-of-type targets the element of which it is the only type
• :target elements that the referring URI targets
• :enabled matches the element when it is enabled
• :disabled matches the element when it is disabled
• :checked targets the element when it is checked through a checkbox or radio button

A new combinator

CSS3 also comes with a brand new combinator: elementA ~ elementB

This new combinator matches when elementA is followed somewhere afterwards by elementB but not immediately afterwards.

New box style properties

CSS3 features the same box model as the previous release but with some new style properties that help you style your boxes’ borders and backgrounds. The new background properties in CSS3 are:

• background-clip

This property is used to define how to clip a background image. The default clipping dimensions is the border-box, but you can change it to the content box or padding box.

• background-origin

This particular property is used to determine if the background should be put in the border-box, content-box or padding box.

• background-size

This property enables the developer to indicate the background image size and stretch smaller images for fitting the page.

CSS3 also changed up some of the existing background style properties. Here is a look at the changes:

• background-repeat

This property now comes with two new values: round and space. Round rescales the image for tiling it several times in a box. Space evenly spaces the tiled image within the box without clipping.

• background-attachment

The property no includes a ‘local’ value so that the background scrolls with the element content in case the element has a scroll bar.

New border properties

CSS3 enables borders to be styled as double, solid, dashed or even as an image. Border images are an interesting addition: they let you create an image of all four borders and then tell CSS to apply the image to the borders. Here are a few of the new border properties that come with CSS3:

• border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius let you create rounded borders
• border-image-source lets you specify an image source file instead of using predefined border styles
• border-image-slice represents inward offsets from the edges of the border images
• border-image-width defines the width value for your border-image
• border-image-outset specifies the amount beyond the border-box that the image extends to
• border-image-stretch defines the tiling or scaling of the middle and side parts of the border-image

Conclusion

You will learn a lot more about CSS3 as you code more. But there is one caveat: you cannot master CSS3 unless you know CSS. Learning CSS3 involves building on your understanding of and experience with CSS. If you do not know CSS, you have to learn it from the top along with CSS3. The good thing is that if you are not familiar with CSS, it should be easier to club both CSS3 vs CSS learning together to make it easier and faster.

Recommended Articles

Here are some articles that will help you to get more detail about CSS3 vs CSS, so just go through the link.

1. CSS vs HTML
2. Exciting To Know The CSS Flexbox Essentials For Beginners
3. HTML5 vs JavaScript Best Thing To Learn 
4. CSS vs CSS3 : Differences
5. Examples of CSS Border Style