Inline CSS is used to add custom properties to specific elements. The added style will only reflect on that particular element only.
To use inline CSS, Insert the "style" attribute within the HTML element's opening tag.
<h2 style="color:antiquewhite; background-color: brown;"> About Me </h2>In the below About ME heading we can see this css applied style.
My Short Note: In Above <h2> tag we are using "Inline CSS" but this is not so considered as a good practice. Why? because inline is not recommandable to use for big projects. This technique is very time consuming process because whenever you want to add some changes in your project you have to change all the inline css in every individual attributes or tags.
Note: The downside of using inline CSS is, that once the project complexity increases, it will become difficult to manage the styles of each and individual elements.
Internal CSS is used to apply custom style to the multiple elements on the same page. The style can be used throughout the HTML page.
Internal CSS is defined in a style block, which will be inside the head section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#internal h1 {
color: skyblue;
background-color: darkcyan;
}
</style>
</head>
<body>
<header></header>
<main></main>
<footer><footer>
</body>
</html>
In the below About ME heading we can see this css applied style.
My Short Note: In Above <h1> tag we are using "Internal CSS" basically it is used in html pages under the <head> section. Why? because internal CSS is a style, and in html, styles and important scripts are only used in <head> section. This technique is very usefult for save time because whenever you want to add some changes in your project you have to changes only in specific styles in css instead of changing all the css styles in Inline CSS.
External CSS works similarly to internal CSS but with a twist. Instead of adding the styles within the HTML file, we create a separate file with .css extension. This file will hold all the styling details. Then, we link this file to the HTML page, giving it the instructions on how to look.
There is a new <link> tag in the head section, and this <link> tag has rel and href properties.
The following points will explain each keyword's meaning:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<header></header>
<main></main>
<footer><footer>
</body>
</html>
#external h1 {
color: red;
background-color: blue;
}
This above css code are from serpertad file which is called style.css.
In the below About ME heading we can see this css applied style.
This approach enables to use of the same CSS to multiple HTML files, wherever the same custom style is required.
This is helpful when we have to maintain consistency on our web pages and want to use the same CSS styles across multiple pages.
My Short Note: In Above <h1> tag we are using "External CSS" basically it is used in multiple html pages with only one style.css and we can use multiple stylesheets for multiple html pages, under the <head> tag with the help of <link> tag. Why? because external CSS is a style, and in html, styles and important scripts are only used in <head> section. This technique is very usefult for save time and want to changes in bulk because whenever you want to add some changes in your project you have to changes only in specific styles in css instead of changing all the css styles in Inline CSS.