What is the main difference between CSS and CSS3?

by Umesh Singh Software Engineer

The CSS is Cascading Style Sheets and CSS3 is the latest version of CSS, both are the technologies that are used to enhance and improvise the format of HTML Web pages. CSS is designed to handle the presentation layer of the HTML web pages. However, now it is used for the formatting of the web pages. The CSS3 is still under development as of July 2014, thus developers consider that features of CSS which is highly supportable by the modern browser. In CSS3 some of the features namely border-radius, image-source, image-slice and the values for width outset and stretch have seen added in CSS3. In general, CSS is a web-based mark-up language that is used for describing the outlook and formatting of the website to the browser. This blog discusses CSS3 interview questions that enable you to understand the core concepts of responsive website designing. CSS3 and CSS both languages are belonging to the same mark-up-up language but the difference is CSS3 is the higher version with the advanced features as compared to CSS.

Given below are the key differentials factors between CSS and CSS3

Backward Compatibility

CSS and CSS3 both languages are not compatible with each other. The CSS is a style sheet language that is used for describing the presentation semantics of the document which has been written in the markup language. CSS3 is completely backward-compatible as it allows the designer to change or modify the existing designs.

Responsive designing

CSS is the basic version so it does not support responsive design and handle the media queries efficiently. While CSS3 support responsive design and can also handle media queries, this property adds entirely new responsive design capabilities to the CSS repertoire. It is easier for the developers to design the webpage responsive with the use of a higher version of CSS3 as it supports a number of website responsive designing features that have not been supported by the CSS.

Viewport setting

Width property for responsive image

style="width:100%;">

Max- width property

max-width:100%;height:auto;">

Display different types of images on browser width

Responsive text size usage

font-size:10vw">Hello World

3D transformation

The developers cannot create 3D transformations and animations with the use of CSS. However, the developers can easily create 3D transformations, transactions, and animations with the use of advanced versions of CSS i.e. CSS3. For the very first time, elements can move on screen without the help of flash code or JavaScript. In addition to this, the CSS elements can also change their size and color in the case of CSS3.

Transformation properties usage

Transform: matrix(1, 2, 3, 4, 5, 6
Translate(120px, 50%);
Transform: scale(2, 0.5);
Transform: rotate(0.5turn);
Transform: skew(30deg, 20deg);
Transform: scale(0.5) translate(-100%, -100%);

Standardization in colors

CSS support old and standard colors but in the case of CSS3 new colorshave been added in it. CSS3 supports RGBA, HSLA, HSL and gradient colours. Another achievement of CSS3 is that it can now support the effect of rounded image corners.

Code for using colorsin CSS and CSS3m

body {

background-color: #0000ff;

}

body {

background: #0000ff;

}

h1 {

color: #0000ff;

}

article {

border-color: #0000ff;

}

article {

border: 1px solid #0000ff;

}

Box sizing tool

CSS does not have any box-sizing tool; developers have to follow the standard procedure to align the text in the webpages. In the case of CSS3, all the alignment problems are now fixed y the box-sizing tool. This tool allows its users to get the right size for their element without having to subtract dimensions for padding and borders.

Box sizing property usage

.div1 {
  width: 300px;
  height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

Conclusion

CSS3 is the advanced version of CSS and it is compatible with IE9 versions off browsers. Moreover, CSS3 has inherited the properties of CSS but it is integrated with some of the new features which are capable of supporting responsive website designing. In this blog, CSS interview questions are discussed which helps you to strengthen the logical and conceptual knowledge about CSS mark-up language. It is a well-known fact that the responsive web designing acts as the best tools for marketizing products across the globe