Difference Between CSS

Difference Between CSS, CSS2 And CSS3

A Cascading Style Sheet, commonly known as CSS, is the layer of styling over HTML elements, or in simpler terms, it lets you style the elements (font, size, color, and spacing) of your HTML pages and content by gently applying classes to it. CSS takes care of the presentation and helps you determine how the pages and content that you make with HTML are going to look and display. CSS will be a savior once you have learned to master the code. To master CSS, you first need to understand the different types of CSS. There are basically three ways of writing CSS, which are mentioned below.

Internal CSS (Internal Style Sheet)

Using an internal style sheet means that whatever style you are going to create is going to be coded right into the HTML of that particular page. The internal style is defined inside the

				
					<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

				
					<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!
Using an external style sheet means you create a .css file and then use it in your HTML page as per your requirements. Generally, external CSS is used when you have many HTML attributes and you wish to use them as required; there is no need to write and rewrite the CSS style again and again in the HTML body. It is recommended to use an external style sheet majorly for two reasons.

It saves a lot of your page’s loading time.
It is convenient to have just about everything in one place.

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css extension.The external .css file should not contain any HTML tags.

				
					<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Here is how the “mystyle.css” file looks:

				
					body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Major Differences Between CSS, CSS2 & CSS3

CSS was originally released in 1996 and consists of properties for adding font properties such as typeface and emphasis color of text, backgrounds, and other elements. CSS2 was released in 1998 with added styles for other media types so that it can be used for page layout designing. CSS3 was released in 1999 and presentation-style properties were added in it that allows you to build a presentation from documents.
Unlike CSS2, which was comprised of a single document, CSS3 has its specifications divided into many individual modules, which makes CSS3 a whole lot easier to handle.
With CSS3, the designers can now use special fonts, like those available in Google Fonts and Typecast. Earlier, with CSS and CSS2, designers could only use “web-safe fonts” for being 100% sure to use fonts that would always display the same on every machine.
While CSS and CSS2 had ‘simple selectors’, CSS3 calls the components as ‘a sequence of simple selectors’.
CSS3 came up with some key web design considerations like rounded borders that help in rounding up the borders without any hassle. This turned out to be a huge plus point for developers who were struggling with initial versions of CSS borders.
CSS3 has the capability to split text sections into multiple columns so that it can be read like a newspaper. In CSS2, the developers had difficulty because the standard was not equipped with automatically breaking the text so that it fits within a box.

Conclusion

CSS3 is the latest version of CSS. It is only compatible with IE9 and not with older versions of browsers. The more you code, the more you will learn about CSS3 but there is one thing to note – you cannot master CSS3 unless you know about CSS. CSS3 took the properties of CSS and developed them to include new features to provide ease of use to the designers. CSS3 is capable of supporting responsive designs and can also handle media queries as compared to CSS, which does not support responsive design and is not capable of handling media queries. CSS3 is very important for web designers because it provides a vast range of options and it helps in creating more enhanced opportunities for designing a webpage. Through web designing, marketers can increase their product awareness in the market easily.

But what is a CSS framework?

CSS frameworks are ready-to-use CSS style sheets or CSS libraries with already-coded web designs that offer web developers some relief, as they save them some work in developing code. Different frameworks are useful for different project requirements, and each has some unique features.
Which framework is the best? That depends on the website you’re looking to build. The most popular CSS framework, however, is Bootstrap. CSS frameworks use preprocessors to automate tasks.