When we are learning CSS, we are usually writing CSS in the head of the HTML document. However, there are three different places where CSS can be written within an HTML document. So in this chapter, it has been explained with examples.
Here "CSS types" means writing the CSS style in the HTML document; where should it be placed on the document? And what are the different ways to use CSS styles?
What Are the Types of Stylesheets?
- Inline Style
- Embedded Style Sheet
- External Style Sheet
Let us now learn about each of them in details:
Inline Style
Styles sheets that are of type inline refer to information related to the style being functional to the existing HTML element. Using an inline approach, rather than defining your style once, you have to write the style in every HTML element you use to design your web page. It can be more precisely called an inline style rather than the inline style sheet. It uses the style attribute within that HTML element.
Syntax:
<HTML ELEMENT style="properties: value"> .... </HTML ELEMENT>
Example:
<p style="color: blue">The text gets the effect of inline style.</p>
Drawbacks of Inline Styles
- Using inline styles is not as powerful as other types of style sheets available in CSS. If you define your styles for many HTML tags, which are in use to design a web page, then you will not be able to use most of the power associated with CSS.
- For example, you have to repeatedly define the style whenever used, instead of defining it only once.
- Furthermore, if you want to change a specific style, you have to change it in many places in your documents instead of changing it to one place.
Embedded Style Sheets
Embedded Style Sheets is a style sheet where designers can embed information of the style sheet in an HTML document by making use of the <style>
element. This embedding of style sheet info within <style>
.... </style>
tags are done within head section of HTML.
The syntax for embedded style sheets has no such exception. Simply you have to place the style sheet code between the <head>
.....</head>
tags where <style>
.... </style>
is nested within head element:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Embedded Style Sheets Example</title>
<style>
h1 {
border-bottom: 1px solid #DDDDDD;
color: #069;
font-family: Helvetica, Arial;
font-size: 25px;
font-weight: normal;
line-height: 34px;
margin-bottom: 10px;
outline: 0 none;
padding-bottom: 3px;
padding-top: 0;
text-decoration: none;
}
hr {
background-color: #069;
border: 0 none;
clear: both;
color: #D4D4D4;
height: 1px;
}
.sublines {
background-color: #DAF4FE;
padding: 5px;
border: 1px solid #09C;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.infotext {
font-size: 10pt;
background-color: #F2F2F2;
padding: 5px;
}
</style>
</head>
<body>
<h1><span class="headlines">Welcome to w3schools.in</span></h1>
<div class="sublines"> This is an example page using CSS. <br> The example is really simple, <br> and doesn't even look good, <br> but it shows the technique. </div>
<table border="0" cellpadding="3" cellspacing="1">
<tr>
<td class="sublines"> As you can see: </td>
<td class="sublines">The styles even work on tables.</td>
</tr>
</table>
<hr>
<div class="infotext">CSS Example from w3schools.in</div>
<hr>
</body>
</html>
External Style Sheets
This type of style sheet gets a separate file in which designers can state every CSS styles that seem relevant for your web site. Then this has to be linked with the external style sheet from your HTML page. You have to follow some specific steps to make this conceptual style sheet implementable.
Steps to create External Style Sheets:
- Build the Style Sheet by typing the CSS code in a plain text file (using text editor, usually), and then save the with as a .css extension.
- You have to link the Style Sheet with the HTML document by using an HTML link element.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
</html>