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
Post a Comment