What are the different types of Cascading Style Sheets?
2021-11-15 15:44 · 7 min read
Style Sheet
Style Sheet is a collection of rules that we can easily apply on the HTML Web Page. Style Sheet is used to make a better, good-looking, attractive, and responsive website. In this tutorial, we will learn how can we use Internal, Inline, and External Style Sheets.
</Different Types of Style Sheets?>
CSS comes with three types of Style Sheets (i.e. Inline Style-Sheet, Internal Style-Sheet, and External Style-Sheet). We can use These Cascading Style-Sheets as per their requirements during designing the Web Page.
Inline StyleSheet
An inline StyleSheet is used to apply CSS properties on a specific element(Tag Name). Inline Style overrides any CSS property in a <style> tag or any external style sheet connected to it. We can create different stylesheets for different Tags.
Example
Here is a simple example of a button tag.
By using some CSS properties we can easily create a button.
<button type="submit" style="color:white;
background-color:rgb(0, 102, 255);padding:10px 35px;
border:none;border-radius:5px">
Press Me
</button>Here color, background-color, padding, border-radius, etc. are the CSS properties with their values, by using which we are designing a button.
Note: If your website contains multiple pages with the same CSS properties then always use External StyleSheet. It is very time-consuming to write CSS code by using the Inline Style Sheet.
<!DOCTYPE html>
<html>
<!--HTML Head-->
<head>
<title>Button</title>
</head>
<!--HTML Body-->
<body>
<button type="submit"
style="color:white;background-color:rgb(0, 102, 255);
padding:10px 35px;border:none;border-radius:5px">
Press
</button>
</body>
</html>
Internal Style Sheet
We write the CSS code in <style></style> tag within an HTML Document. If we are working on different UI designs on our website then we can use the Internal Style Sheet.
Example
Here is a simple example of an Internal Style Sheet.
<style>
.css-class-name{
property: value;
property: value;
property: value;
}
</style>We have an HTML Button tag with a class "tdb-school" for applying CSS Rules by an Internal Style Sheet.
Note:<style></style> tags must be inside the <head> element for HTML validation. Use Internal Style Sheet only when your web page's design is different from all other web pages.
<!DOCTYPE html>
<html>
<head>
<style>
.tdb-school{color: white;
background-color: rgb(0, 102, 255);
padding: 10px 35px;
border: none;
border-radius: 5px}
</style>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school">
Press
</button>
</body>
</html>
External Style Sheet
An External Style Sheet is used for applying similar CSS properties on multiple web pages by linking an External CSS file with your web pages. For connecting CSS file we use <link> element in each HTML document.
Example
Here we can see a simple example of an External Style Sheet.
<head>
<link rel="stylesheet" href="style.css"/>
</head>Here we are using a link tag for connecting external style sheets to our web pages. When it is connected successfully then you can write CSS code on style.css file and you can see the effect on your web page.
It's a good practice to use an external stylesheet while working on similar types of web page designs. Always use <link> tag in the HTML Document's <head> tag.
<!DOCTYPE html>
<html>
<!--Head-->
<head>
<!--We can link multiple external style-sheets
to our html web page-->
<link rel="stylesheet" href="style.css"/>
</head>
<!--Body-->
<body>
<button type="submit" class="tdb-school">Press</button>
</body>
</html>
