CSS: CSS stands for Cascading Style Sheet. Its main objective is to provide styling and fashion to the web page. CSS provides color, layout, background, font, and border properties. CSS features allow better content accessibility, enhanced flexibility, and control, as well as the specification of the characteristics of presentation.
CSS3: CSS3 stands for Cascading Style Sheet level 3, which is the advanced version of CSS. It is used for structuring, styling, and formatting web pages. Several new features have been added to CSS3 and it is supported by all modern web browsers. The most important feature of CSS3 is the splitting of CSS standards into separate modules that are simpler to learn and use.
Difference between CSS and CSS3:
|1||CSS is capable of positioning texts and objects. CSS is somehow backward compatible with CSS3.||On the other hand, CSS3 is capable of making the web page more attractive and take less time to create it. If you write CSS3 code in CSS, it will be invalid.|
|2||Responsive designing is not supported in CSS||CSS3 is the latest version, hence it supports responsive design.|
|3||CSS cannot be split into modules.||Whereas, CSS3 can be breakdown into modules.|
|4||Using CSS, we cannot build 3D animation and transformation.||But in CSS3 we can perform all kinds of animation and transformations as it supports animation and 3D transformations.|
|5||CSS is very slow as compared to CSS3||Whereas, CSS3 is faster than CSS.|
|6||In CSS we have a good collection of unique color schemas and standard color.||Whereas, CSS3 has a good collection of HSL RGBA, HSLA, and gradient colors.|
|7||In CSS we can only use single text blocks.||But in CSS3 we can use multi-column text blocks|
|8||CSS does not support media queries.||But CSS3 supports media queries|
|9||CSS codes are not supported by all types of modern browsers.||Being the latest version, CSS3 codes are supported by all modern browsers.|
|10||In CSS, designers have to manually develop rounded gradients and corners.||But CSS3 provide codes for setting rounded gradients and corners|
|12||In CSS, the user can add background colors to list items and lists, set images for the list items, etc.||Whereas, CSS3 list has a special display property defined in it. Even list items also have counter reset properties.|
New features of CSS3:
Combinator: CSS3 has a new General sibling combinator which matches up with sibling elements via the tilde (~) combinator.
CSS Selectors: CSS3 selectors are much advanced in comparison to simple selectors offered by CSS, and are termed as a sequence of easy to use and simple selectors.
Pseudo-elements: Plenty of new pseudo-elements have been added to CSS3 to give easy styling in depth. Even a new convention of double colons :: is also added.
Border Style: The latest CSS3 also has new border styling features like border-radius, image-slice, image-source, and values for “width stretch”, etc.
Background style properties: New features like background-clip, size, style, and origin properties have been added to CSS3.
- Advantage of CSS3 over CSS
- How to Create Link Tooltip Using CSS3 and jQuery ?
- How to make bubble background using HTML5 and CSS3?
- How to Create Animated Background using CSS3 ?
- How to use Sass Variables with CSS3 Media Queries ?
- How to Create a Curve Text using CSS3/Canvas ?
- Difference between bootstrap.css and bootstrap-theme.css
- What is the difference between display: inline and display: inline-block in CSS?
- What is the difference between inline-flex and inline-block in CSS?
- What is the difference between CSS and SCSS ?
- Difference between "." and "#" selector in CSS
- Difference between :first-child and :first-of-type selector in CSS
- Difference between revert and unset keyword in CSS
- Difference Between CSS and Bootstrap
- Difference between HTML and CSS
- How to override the CSS properties of a class using another CSS class ?
- What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
- Differences between HTML <center> Tag and CSS "text-align: center;" Property
- How to Set the Gap Between Text and Underlining using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.