Types of CSS Style Sheets with Example
In this tutorial, we will understand different types of CSS style sheets with the help of examples. A style sheet in CSS is composed of one or more style instructions called rules or rulesets.
It describes how an element or group of elements should be displayed on the HTML document. Each rule selects one or more HTML elements and tells the browsers how those elements should look.
Different Types of CSS in HTML
There are mainly three types of style sheets supported by CSS (Cascading style sheets) that we can apply to HTML elements in the document. They are as follows:
- Inline CSS
- Internal / Embedded CSS
- External CSS
Each type serves different purposes and is suitable for different scenarios in web development. Let’s understand all three types of CSS: inline, internal, and external one by one with the help of examples.
Inline Level CSS
We can apply inline CSS directly within an HTML element using the style attribute. With inline CSS, we apply the style rules directly within the opening tag of an HTML element such as a heading or paragraph using the style attribute. The below figure shows an example of an inline style.
As you see in the above figure, we have applied an inline CSS style using style attribute within the starting h1 tag. The inline style defines the font-color of the “Scientech Easy” text as navy blue. The style rule will only apply to this h1 element. It will not affect other h1 tags in the HTML document.
The inline CSS style changes the content marked up a special pair of tags, but does not affect other content in the HTML document. Let’s take an example of it.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red; text-align: center;">This is a Heading</h1>
<p style="font-size: 18px; color: green;">This is an inline-styled paragraph.</p>
</body>
</html>
In this example, the inline CSS applied within <h1> element sets the text color to red and aligns the text to the center. We have done it using the style attribute directly within the opening <h1> tag. Similarly, the inline CSS applied within <p> tag sets the font size to 18 pixels and the text color to green.
As you can see, the inline style is only applied to the starting tag of an HTML element where the style attribute is set. Moreover, within style attributes, the ending semi-colon is optional. However, it is a good practice to include it because it makes it easier to add additional rules if you need them.
Example 2:
<!--Without ending semi-colon-->
<p style="font-size: 16px; color: green">This is a paragraph without ending semi-colon.</p>
Example 3:
<!--With ending semi-colon-->
<p style="font-size: 16px; color: green;">This is a paragraph with ending semi-colon.</p>
Both examples will work correctly in the browser, but the second example with semi-colon is easier to extend if you need to add more styles later. Also, adding semi-colon in the end improves clarity and prevents errors.
Internal CSS (or Internal Style Sheet)
This is the second way to apply CSS rules to an element or group of elements in the document or webpage. In this method, we add the CSS rules directly within the opening <head> and closing </head> tags of an HTML document using the <style> tag. This is called internal CSS or internal style sheet.
The internal style sheet is also called an embedded style sheet. The general syntax to embed a style sheet or internal CSS using the <style> tag within the head section of an HTML file is as:
<head>
<style>
/* CSS rules go here */
</style>
</head>
In the below figure, you can see an example of an embedded style sheet.
As you see in the above figure, we have placed the style rules between the opening <style> and closing </style> tags inside the head section. The style rule sets the background color for the body section to green for the current webpage only.
Hence, you should use an internal style sheet when you want to create styles for a single webpage that is different from the rest of the website. Let’s take an example based on it.
Example 4:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
</body>
</html>
In this example, we have styled the body element with a light grey background color. Moreover, we have styled the <h1> element with green color and center alignment. Note that an internal style sheet takes precedence over an external style sheet.
Using internal CSS style can be time-consuming for multiple web pages because you will require placing the style sheet on each web page. Moreover, you will have to edit every single page when you want to make a change in the appearance of the site.
External CSS (or External Style Sheet)
External CSS is a type of CSS file that contains all of the style rules we want to apply to more than one page in the website. This style sheet is called an external style sheet or linked style sheet. An external style sheet is a separate, text file that contains a number of style rules. It must be named with the .css file extension.
We can apply an external style sheet by linking or attaching it using a <link> tag in the head section of the HTML document. The general syntax to link an external style sheet to HTML documents is as:
<link rel="stylesheet" href="URL" type="text/css" media="media-type">
In the above syntax,
- <link> Tag: This tag defines a relationship between the current HTML document and an external style sheet.
- rel=”stylesheet”: The rel attribute specifies the relationship between the current HTML document and the linked resource. To link an external style sheet, we assign the value “stylesheet”.
- href=”URL”: The href attribute specifies the URL of the external resource. This URL can be a relative path or an absolute URL.
- type=”text/css”: The type attribute specifies the MIME type of the linked resource. For CSS files, the value is “text/css”. However, this attribute is optional in HTML5 because “text/css” is the default type for stylesheets.
- media=”media-type”: The media attribute specifies the type of media for which the styles are defined. We can use it to apply style rules only to target a specific media, such as a screen, print, or handheld devices.
With an external style sheet, all the HTML documents or webpages in the website share the same style sheet. This is the most powerful and and preferred method to attach style sheets to more than one page in the website. Note that an external style sheet does not contain any HTML tags.
Example 5:
External CSS File (styles.css):
/* styles.css */
body {
background-color: lightgrey;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
color: black;
}
HTML Document (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External CSS Style Sheet Example</title>
<!--Linking external style sheet-->
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
<body>
<h1>This is a heading styled with an external style sheet.</h1>
<p>This is a paragraph styled with an external style sheet.</p>
</body>
</html>
In this example, we have linked an external style sheet using <link> tag to the HTML document. This external style sheet contains CSS rules that define the styles for the body, h1, and p elements. In the HTML document,
- rel=”stylesheet” indicates that the linked file is a stylesheet.
- href=”styles.css” specifies the path to the external CSS style sheet.
- type=”text/css” specifies the type of content in the linked file. This is no longer required in HTML5.
- media=”screen” specifies that the styles should be applied when the HTML document is viewed on a screen.
Understanding the different types of CSS style sheets such as inline, internal, and external is fundamental concepts for beginners that want to learn CSS. It is important to understand to you when to use inline, internal, and external CSS in the HTML documents. We have explained all types of CSS with syntax and examples in this tutorial of which you must practice them.