Types of CSS (cascading style sheet)

 The cascading style sheet is used to style the webpages of any website which contain different properties to style the webpage e.g control font style, font size, font color,  background color,and much more.

There are three types of CSS

  • Inline CSS

  • Internal CSS

  • External CSS


Inline CSS


The CSS write under the body section, in the HTML tags with style attributes is called inline CSS. Following is the example of inline CSS


Example:


<!DOCTYPE html>

<html>

<head>

<title>Inline CSS</title>

</head>

<body>


<p style ="color: red; font-size: 40px; font-family: initial; text-align: center;">

Programgrab

</p>

</body>

</html>





Internal CSS


The CSS write in the head section of an HTML page with the style attribute is called internal CSS.Following is the example of internal CSS

Example:


<!DOCTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style type="text/css">

.main{

text-decoration-color: grey;


}

.programgrab{

color:red;

font-size: 40px;

font-weight: bold;

font-family: initial;

}

.paragraph{

font-style: bold;

font-size: 50px;

font-family: serif;

}

</style>

</head>

<body>


<div class= "main">

<div class="programgrab">Programgrab</div>

<div class ="paragraph">A computer language website </div>

</body>

</html>





External CSS


The style sheet prepare separately with all styling of html page and save with .css extension. This file connects with the HTML page by link tag in the head section page.In this way ,only once set and applied across the webpage.

Example:


CSS file save as programgrab.css:

.main{

text-decoration-color: grey;


}

.programgrab{

color:red;

font-size: 40px;

font-weight: bold;

font-family: initial;

}

.paragraph{

font-style: bold;

font-size: 50px;

font-family: serif;

}

Following is the Html file which linked with the above CSS file of programgrab.css:


<!DOCTYPE html>

<html>

<head>

<title>External CSS</title>

<link rel="stylesheet" type="text/css" href="programgrab.css"/>

</head>

<body>


<div class= "main">

<div class="programgrab">Programgrab</div>

<div class ="paragraph">A computer language website </div>

</body>

</html>





If you have any queries about the above topic of CSS comment below your query without hesitation.


Comments

Hire a programmer

Hire a programmer

Popular posts from this blog

CSS selector

C Program to convert binary to decimal number

C program to convert decimal to binary number