In this post, we will learn different ways of applying the style to the HTML pages by including CSS files/code. There are three ways to include CSS style in your HTML page as below
- Inline CSS
- Internal/Embedded CSS
- External CSS
Inline CSS
With inline CSS, you use the “style” attribute in the element start tag in order to add the style. For Example:
If I want to add style to <h1> using the Inline CSS, the code will be as follows:
<h1 style="color:red;">This is heading 1</h1>As you can see in the code above, the style attribute is added to the start tag of the <h1> element. The style attribute is followed by a property name that you want to set followed by a colon and the value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:red;">This is heading 1</h1>
</body>
</html>Output:
Internal/Embedded CSS:
Internal CSS means adding the CSS code inside the same file as the HTML code. To add style to the HTML page using Internal CSS, <style> element is used.
<style>
h1{
color:red;
background-color:yellow;
}
</style><style> is the tag inside which we have to mention the element name to which we want to apply a style, which is followed by a pair of curly braces, inside which we mention the property and the value. In the example above we have applied two styles to the <h1> element, one is the color and the second is the background-color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS</title>
<style>
h1 {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Output :
**Note:
It is always a good practice to add the <style> tag inside the <head> tag. Because while rendering the elements, the browser would apply the style first before displaying them and not the reverse. Otherwise, it will be a bad user experience.
External CSS:
External CSS means creating a separate CSS file and adding the link of that CSS file in our HTML file. This is the best practice as it separates the HTML and CSS code, giving clarity to the reader of the code. Secondly, it allows the developer to reuse the CSS file/code in multiple HTML files
CSS file is created with the following code inside and then it is saved with .css extension.
h1 {
color: red;
background-color: yellow;
}HTML file to which we want to link this CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Output:
As you can see in the above code, we have used the <link> tag inside the <head> to link the CSS file to the HTML file. Without this tag, you will not be able to link the external CSS to the HTML.
“rel” attribute inside the link tag stands for relationship. It tells the browser the relationship the file has with the HTML file. If you do not mention the rel attribute then also the CSS file will not be linked to the HTML file.
“type” attribute tells the type of content present in the file.
“href” attribute stands for hypertext reference. It tells the browser where to look for the CSS file. If the file is located in the same folder as the HTML file then you have to just give the name of the CSS file otherwise you have to mention the relative or absolute path to the file’s location.
**Note:
It is always a good practice to add the <link> tag inside the <head> tag and get the CSS file loaded before the HTML elements are displayed because while rendering/displaying the elements, the browser would apply the style first before displaying them and not the reverse. Otherwise, it will be a bad user experience.