You are on page 1of 3

With the Internet dominating each and every facet of our lives, web applications and

designer web pages have become more indispensable and significant than ever before.
Given this scenario, Cascading Style Sheets (CSS) are working in unison with HTML and
other web development elements to create useful style and structure. CSS offers the
definition of how HTML elements will appear on web pages. CSS3, the latest version of
CSS, showcases several JavaScript like capabilities and mobile development features.
Through this article, we aim to throw light on the advanced features of CSS 3, the
difference between CSS and CSS3 and the definitions of CSS and CSS3. We begin with a
CSS vs CSS3 comparative chart that follows below.

Basis of Difference CSS CSS 3


Compatibility Designed to offer several CSS3 provides backward
formatting features, CSS is compatibility with CSS and
not compatible with CSS3. supports all codes written
in CSS version 1.
Rounded gradients and In CSS, designers had to CSS3 allows for the setting
corners develop rounded borders of rounded gradients and
separately from the other corners with the help of
web page elements and codes.
then position them on the
server to compete the look.
Textual effects and In CSS, animations were Text shadows can be
animations coded via JQuery and added with CSS3 and
JavaScript. There are no allows for easier reading
design layer features. Text capabilities. Visual effects
shading/ shadowing and for braking longer words
other special effects are and lines is also possible
not possible as page along with advanced
elements. features for font setting.
Support for media queries Media queries are not CSS3 supports queries for
supported by CSS responsive websites
Splitting into modules CSS codes cannot be split CSS3 codes are capable of
up into varied modules being split up into
different modules
Support by new browsers CSS codes are not CSS3 gains support from
supported by all types of all new browsers
new browsers
Colours CSS offers standard and Support is provided for
old colours only RGBA, HSL HSLA and
gradient colours
Lists CSS allows users to: CSS3 lists must have the
-Create different lists to ‘display’ properties
provide ordered lists defined in them. List items
have counters that are
- Set varied lists for the
directly affected via
unordered lists
counter increments as well
- Set images for list item as counter reset
markers properties.
- Add background colours
to list items and lists

Cascading Style Sheets (CSS) or CSS refers to a style sheet language. It is useful for
describing the overall presentation of documents coded in markup languages like
HTML. It is the cornerstone technology for the Internet and is closely related to HTML
and JavaScript. CSS is equipped to separate presentation and content; this includes the
separation of layouts, fonts and colours. This feature of CSS allows for better content
accessibility, enhanced flexibility and control, as well as specification of the
characteristics of presentation. CSS enables varied and multiple web pages to share the
formatting via specifications of relevant CSS in separate .css files. Overall, CSS reduces
complexity/repetitions in the structural and elements of web pages.

Cascading Style Sheets Level 3 (CSS3) refers to an iteration of different CSS standards
that are used for structuring, styling and formatting web pages. It incorporates different
CSS2 standards and includes important changes and improvements. One important
feature is the divisibility of CSS standards into separate modules that are simpler to
decipher and learn. While some features are still awaiting the nod of the World Wide
Web Consortium (W3C), a large number of CSS3 properties have already been
implemented and are supported by the latest versions of new browsers.

The advanced features of CSS 3 are:

Combinator: CSS3 offers the new General Sibling Combinator that can match up with the
sibling elements of specific elements via the tilde (~) Combinator.

CSS Selectors: In comparison to the 'simple selectors' offered by CSS2, the components
in CSS3 can be referred to as 'a sequence of easy to use and simple selectors'.

Pseudo-Elements: In the latest version of CSS3, plenty of pseudo elements have been
incorporated to give off in-depth but easy styling as well as new conventions of double
colons '::'.
Background Style Properties: CSS3 users can opt for multiple background images that
are capable of being layered in a specific box with different elements such as
background images, positioning and repeat features. Background-clips, size, style and
origin properties have also been added.

Border Style: The styling of borders in CSS3 includes images and corners with rounded
designs. Border-radius, image-slice, image-source and values for width stretch and
outset have also been newly added in CSS3.

The above differences between CSS3 and CSS depict the gradual transformation of
features and functionality of the first version of CSS to the latest one. In case you have
any further queries, do write to us in the comments section below, we will get back to
you at the earliest.

You might also like