CSS Introduction- Description of all CSS Types

CSS

CSS And Types of CSS

CSS  Introduction:-Hi readers, I am going to explain you about What is CSS and Types of CSS.Basically, there are 3 types of CSS.These are  Inline, Internal & External CSS.

What is CSS

  • CSS Stands for Cascading Style Sheets.
  • CSS is a language it is basically used for styling the HTML elements
  • CSS describes how HTML elements are to be displayed on the screen, paper, or in other media.

Basically, there are the types of CSS:-

>1.Inline         CSS

>2.Internal     CSS

>3.External    CSS

 INLINE CSS

  • Inline CSS is placed just inline to any HTML tags.
  • Giving you real freedom to specify each web page element.
  • It can be placed anywhere in the middle of the HTML document.

SOURCE CODE

<html>
<head><title>Inline css first example</title>
</head>
<body>
<p style = “color:blue; font-weight:bold”>This is the first page</p>
</body>
</html>

SNAPSHOT

CSS

EXTERNAL CSS

  • External  CSS is placed in a separate file
  • The webpage includes External CSS file its looks and feel are controlled by this CSS file
  • It gives you a freedom  to change the whole webpage  at once

First of all, you have to create a file with a name with CSS file type extension.suppose I have created a CSS file with name mystyle.css and given extension .css. Please be careful about the path of CSS file which you will mention in an HTML page. In CSS file, I have written following code.

CSS Code

#blue

{

color:blue;

 font-weight:bold

}

HTML Code

<html>
<head><title>external css first example</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p id = "blue">This is the first page</p>
</body>
</html>

SNAPSHOT

INTERNAL CSS

  • Internal CSS are placed at the top of each web page document before any of the content is listed.
  • If you want to make changes in CSS file you can easily make the changes from the same you needn’t go and find where the CSS file is located because it is located on the same webpage.

SOURCE  CODE

<html>
<head><title>Internal css first example</title>
<style type = "text/css">
#blue
{
color:blue;
font-weight:bold;
background-color:red;
}

</style>
</head>
<body>
<p id ="blue">This is the first page</p>
</body>
</html>

SNAPSHOT

CSS

There is also forth type of CSS.Which is also called default HTML CSS. HTML tag element like <h1>,<b>,etc use default css.

Suppose i have used <h1> tag of html element and you will see font size automatically increase in browser output due to its default HTML CSS.

<h1>CSS and Types Of CSS</h1>

CSS and Types Of CSS.

You can know more about CSS on going through this website

Leave a Comment