In this article, you will learn about HTML style sheets (CSS), how to link style sheet to html document and also learn about different types of style sheets in html (i.e., Inline style sheet, Internal style style or Embedded style sheet and External style sheet) with the help of examples.
HTML Style Sheets
HTML style sheet or CSS is used to format the layout of a webpage or html document. CSS stands for Cascading Style Sheets and these style sheets describe how an HTML document or web page is to be rendered or displayed on the browser. CSS can also be very useful when you want to control the layout of multiple web pages at once. CSS saves a lot of work and time.
CSS helps us to specify the various attributes of HTML tags easily and correctly. Using CSS, you can specify the number of style properties in a given HTML element. In CSS, each name and value are separated by a colon(:), and each properties declaration are separated by a semicolon(;). CSS provides various style properties such as control the color, font, size of text, spacing between elements, background color and much more...
Example:
Now let's discuss about HTML Style Sheet (CSS) with the simple example given below. In this example, we'll use the <font> tag and related attributes to specify the text color and font size in two ways that will have the exact same output.
<!DOCTYPE html><html>
<head>
<title>HTML Style Sheets Example</title>
</head>
<body>
<p style="color:blue; font-size:20px;">This is a Paragraph</p>
</body>
</html>
You can rewrite the above example with the help of html style sheet which is as follows;
<!DOCTYPE html><html>
<head>
<title>HTML Style Sheets Example</title>
</head>
<body>
<p><font color="blue" size="5">This is a Paragraph</font></p>
</body>
</html>
Output
Different types of Style Sheets in HTML
There are 3 types of Style Sheets in html which are given below:
Inline Style Sheet
The html Inline style sheets or inline CSS are used specifically to apply a unique style to a single HTML element. In inline style sheets, the style attribute is used for styling and this attribute is written inside the opening HTML tag. Html inline Style Sheet allows us to use multiple properties but each property should be separated by a semicolon (;).
Now let's understand html inline Style Sheet or Inline CSS with the help of following example;
<!DOCTYPE html><html>
<head>
<title>HTML Inline style sheet example</title>
</head>
<body>
<p style="color:red;">This is first paragraph.</p>
<p style="font-size:20px;">This is second paragraph.</p>
<p style="color:blue;">This is third paragraph.</p>
<p style="color:green; font-size:20px;">This is fourth paragraph.</p>
</body>
</html>
Output
Internal Style Sheet
The html Internal Style Sheet or Internal CSS is used to apply a style for a single HTML page. It is also known as html embedded style sheet. In Internal Style Sheet, we use <style> element for styling which is used inside <head> element and inside this <style> element we use class and id attribute to style different HTML elements together on a single html page.
Now let's illustrate html internal style sheet or embedded style sheet with the help of following example;
<!DOCTYPE html><html>
<head>
<title>HTML Internal style sheet example</title>
<style type = "text/css">
.one {
color: red;
}
.two {
font-size:20px;
}
.three {
color:blue;
}
</style>
</head>
<body>
<p class="one">This is first paragraph.</p>
<p class="two">This is second paragraph.</p>
<p class="three">This is third paragraph.</p>
<p class="two three">This is fourth paragraph.</p>
</body>
</html>
Output
External Style Sheet
The html external style sheet or external CSS is used to apply style for many HTML pages. It is a separate CSS file containing only the style code (class, id and tag name) and to apply this external style sheet, a <link> tag has to be added inside to the <head> element of each HTML page. Mostly external style sheets are used when the webpage or application uses similar CSS properties. These external style sheets can be written in any text editor.
Note: The external style sheet file should not contain any HTML code and should be saved with a .css extension otherwise this external CSS file will not work on your HTML document.
Now let's illustrate external Style Sheet with html help of following example;
<!DOCTYPE html><html>
<head>
<title>HTML External style sheet example</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="one">This is first paragraph.</p>
<p class="two">This is second paragraph.</p>
<p class="three">This is third paragraph.</p>
<p class="two three">This is fourth paragraph.</p>
</body>
</html>
.one {color: red;
}
.two {
font-size:20px;
}
.three {
color:blue;
}
Output
How to link Style Sheet to HTML document
By following the three steps, you can link external style sheet with html document:
1. Create a valid html file using any text editor and save it with .html extension.
2. After that, with the help of the same text editor, create a separate CSS file and save that file with the .css extension.
Note: This CSS file should only contain valid styling code and should not contain any HTML code.
3. Link the CSS file to your HTML file by using the <link> tag inside the <head> element of the HTML document.
Conclusion
Above we have discussed learn about HTML style sheets (CSS), how to link style sheet to html document and also learn about different types of style sheets in html (i.e., Inline style sheet, Internal style style or Embedded style sheet and External style sheet) with the help of examples. HTML style sheet or CSS is used to format the layout of a webpage or html document. There are 3 types of Style Sheets in html.