CSS - Types of Style Sheet
CSS is used to Style HTML elements which contain various style properties like background, font, height, width, color etc. To apply these properties you can use CSS Style Sheet in 3 ways also known as types of style sheet.
Types of Style Sheet are:
Inline Style Sheet
An inline style is written directly within the HTML tag using the style attribute. Inline style can be used if a unique style is to be applied on one single occurrence of an HTML element.
Example 1: Inline Style Sheet
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<p style="color:green; font-size:24px;">Spend more time on a text-book instead of touch screen.</p>
<p>Another paragraph without styling</p>
</body>
</html>
Internal or Embedded Style Sheet
If you want to apply Style Sheet in whole, single document, then you can define all those rules in header section of the HTML document using <style> tag.
Example 2: Internal Style sheet
<html>
<head>
<style>
.heading {
color: red;
font-size: 25px;
font-weight: normal;
}
.paragraph {
font-size: 20px;
color: green;
}
.m-50{
margin-top: 50px;
}
</style>
</head>
<body>
<h1 class="heading">Heading with Class heading</h1>
<p class="paragraph">Paragraph with class paragraph. I am green color with font size 20px.</p>
<p class="paragraph">Paragraph with same above class paragraph. I also am green color with font size 20px.</p>
<h1 class="heading m-50">Heading with Class heading and margin</h1>
<p class="paragraph">Again paragraph with class paragraph. I am green color with font size 20px.</p>
<p>I am default paragraph with no class.</p>
</body>
</html>
External Style Sheet
If you want to use your style sheet in various pages, then it is always recommended to define a common style sheet in a separate file with the extension ".css", and include external CSS files in your HTML files, head section using <link> tag.
Syntax: External Style Sheet
<link href="mystyle.css" rel="stylesheet">
Example 3: Re-write the above example using External CSS.
File: mystyle.css
.heading {
color: red;
font-size: 25px;
font-weight: normal;
}
.paragraph {
font-size: 20px;
color: green;
}
.m-50{
margin-top: 50px;
}
File: index.html
<html>
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>
<h1 class="heading">Heading with Class heading</h1>
<p class="paragraph">Paragraph with class paragraph. I am green color with font size 20px.</p>
<p class="paragraph">Paragraph with same above class paragraph. I also am green color with font size 20px.</p>
<h1 class="heading m-50">Heading with Class heading and margin</h1>
<p class="paragraph">Again paragraph with class paragraph. I am green color with font size 20px.</p>
<p>I am default paragraph with no class.</p>
</body>
</html>
Import Style Sheet
An import Style Sheet is a sheet that can be imported to combined with another style sheet. This allows creating one main sheet containing declarations that apply to the whole site. It also allows partial sheets containing declaration that apply to specific elements or document. By importing partial sheets to one main sheet, multiple style sheets can be combined into one.
File: Style1.css
h1{
font-family: calibri;
color: blue;
}
p{
background-color: yellow;
}
File: Style2.css
h2 { color:red; }
File: Main.css (Combining Style1.css and Style2.css)
@import 'style1.css'; @import 'style2.css';
File: Example.html (File using the main.css style )
<html>
<head>
<link href="main.css" rel="stylesheet>
</head>
<body>
document text
</body>
</html>
Consider one more situation, where a document requires style information from main.css and one more stylesheet, say, style3.css. The document that additionally requires the style3.css information can be written in the following way:
<html>
<head>
<link href="main.css" rel="stylesheet">
<style>
@import 'style3.css';
</style>
</head>
<body>
document text
</body>
</html>
Style Sheet order
A Stylesheet is applied to an element in the following order:
- Container element
- HTML tag selector
- Class selector
- ID selector
- Inline selector
In the above list, if any style properties are common, the later will override the format. Hence, the HTML tag selector will override the container element, the class selector will override the HTML tag selector, the ID selector will override the class selector, and the inline style will override the ID selector.
