Types of Cascading Style Sheets (CSS)

Introduction

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

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 is 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 the following 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 are disadvantage of inline Cascading Style Sheets. It must be specified on every HTML tag. There is very much 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 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 of 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.
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all