Types of Cascading Style Sheets (CSS)

Introduction

 
This article explains the various ways we can use CSS and types of CSS in web applications. 
 

CSS and types of the CSS

 
CSS stands for Cascading Style Sheets. It is generally used to display HTML in various views. It is used to design the view for HTML. CSS is a combination of a selector and a declaration.
 
What are the selector and declaration?
 
A selector is a HTML tag to for a style and a declaration is a combination of the property and a value.
 
The Declaration's Property is predefined and the value is dependent on our requirements. If we have a number of properties then we can separate them by a colon if we want to design the font color, back color, and font size. For this, we have a number of CSS properties. The way to specify them in CSS is to separate them by a colon.
 
 
 
There are three types of CSS:
  1.  Inline CSS.
  2.  Internal CSS.
  3.  External CSS.

Inline CSS

 
For Inline CSS every style content is in HTML elements. It is used for a limited section. Whenever our requirements are very small we can use inline CSS.
 
It will affect only single elements. In HTML we require that various HTML tag's views are different so then we use inline Cascading Style Sheets.
There is a disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is a lot of time consumed by that and it is not the best practice for a good programmer and the code will be quite large and very complex.
 
Inline CSS examples are given below:
 
 
 
 
 

Internal CSS

 
In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body. For that, we can use the style in the head tag.
 
This style performs an action in the entire HTML body.
 
 
 
 

External CSS

 
In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally, external Cascading Style Sheets are used whenever we have many HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file. There are two ways to create a CSS file. The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the style sheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.
 
How to create and use an External CSS.
  1. Right-click on your application name in Visual Studio 2012.
  2. Add a style sheet.
  3. Write your CSS code and save it.
  4. Open your HTML page and drag down the style sheet.
  5. Save and RUN.
 
 

Conclusion

 
In this article, we learned about types of CSS (Cascading Style Sheets) used in web development.