Types Of Style sheets
Inline style:
If we apply the styles within the <html> tag with the help of Style attribute, comes under inline styles, inline styles we cannot access From another html element.
Example
<html>
<body>
<p style= “color:red;font-style:bold”> Hello World!</p>
</body>
</html>Internal style sheet:
If we declare Styles within the Style tag with the help of selectors comes under Internal styling.
Internal Styles We can apply on any element within the webpage. Selector is a group of style properties. diff Types of selectors are available like class selector, id selector etc.
Example
<!DOCTYPE html>
<html>
<head>
<title> This is Title </title>
<style>
.heading
{
color: red;
font-size: 1.4rem;
text-decoration: underline;
}
#para
{
color: blue;
fontsize: 16px;
text-align: center;
}
</style>
</head>
<body>
<h1 class = "heading">My First Heading</h1>
<p id = "para">My first paragraph.</p>
</body>
</html>External style sheet:
If we declare styles in external webpage comes under these concept. External styles we can call from any webpage. By using <link> tag we can call the external styles from html pages. <link> tag contains Some properties.
1 rel :
By using this properly we can specify the relationship between the html page & external style sheets.
2 href :
By using this properly, we can specify the path of external style sheets
Example
.html file
<!DOCTYPE html>
<html>
<head>
<title> This is Title </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class = "heading">My First Heading</h1>
<p id = "para">My first paragraph.</p>
</body>
</html>
.css file
.heading
{
color: red;
font-size: 1.4rem;
text-decoration: underline;
}
#para
{
color: blue;
fontsize: 16px;
text-align: center;
}