CSS inclusion
CSS inclusion tells us about the ways that we can use/insert CSS code in an HTML file so let's understand the ways of CSS inclusion.
There are three ways of CSS inclusion, listed below
- In-line CSS inclusion
- In-page CSS inclusion
- External CSS inclusion
Let's suppose there is a paragraph "<p></p>" tag and we want to set its color red and font size 20px. We can do this by using all three ways and there is no restriction about it, it all depends on our conventions.
1. In-Line CSS Inclusion
In-line CSS inclusion is used when it is required to apply style on a particular element (tag), we use the "style" keyword to insert CSS code to the element, let's see in the example
<p style="font-size:20px; color:red">Hello This is the paragraph</p>
Note:-
1. We use the semicolon (;) to separate two value
2. The last value does not need (;), but it is optional you can use it.
2. In-Page CSS Inclusion
This method is useful in condition that requires the same style for multiple tags in a single HTML page.
In this method, we write CSS code within <style></style> tags and this tag can be placed either within<head></head> or within <body></body>
CSS selectors (tag selector, class selector, id selector, etc. ) are used to target the tags to apply the style.
Example:-
<html >
<head>
<title></title>
<style>
p {
font-size:20px;
color:green;
}
.my_heading {
font-size:25px;
}
</style>
</head>
<body>
<h1 class="my_heading">This is Heading</h1>
<p>This is example</p>
<p>This is full paragraph, it will start from here...</p>
</body>
</html>
3. External CSS inclusion
In this method, we write CSS code in an external CSS file and then link it to all HTML pages in which this style is needed. This is the best way of writing CSS, the codes are reusable and extremely easy to edit and maintain.
Example
Step 1: Take an HTML page.
Step 2: Take a CSS Page
Step 3: Link CSS page in HTML Page
hello.html Page:
<html>
<head>
<title>Page 1</title>
<link href="mystyle.css" rel="stylesheet" />
</head>
<body>
<h1 class="my_heading">This is Heading</h1>
<p>This is example</p>
<p>This is full paragraph, it will start from here...</p>
</body>
</html>
mystyle.css Page:
p {
font-size: 20px;
color: green;
}
.my_heading {
font-size: 25px;
}
Advanced Point:-
1. There is no restriction for writing CSS code either inline, in-page, or external, all that matters is the priority.
2. Suppose you are writing all three types of CSS for a single element then periority will go with inline, then in-page, and last external.