CSS Inclusion
CSS Inclusion is the process of adding CSS code in HTML file or linking external CSS file in HTML Web Page. You can learn where to write CSS code, how to attach CSS external file in HTML page in this tutorial.
CSS Code Place OR Types of CSS File
Basically, CSS code can be write at three places:
- Inline CSS (Write CSS codes with HTML element).
- In-Page CSS (Write the CSS code in Head section of the HTML page).
- External CSS File (Write the CSS code in a separate CSS file and link this external file in HTML page by the help of link).
NOTE: As a web developer, it becomes important to know, which category is most useful for project development. There is no doubt that all these three types of CSS have their own importance, there are different conditions where we can use specific types among them BUT in a large project, we prefer external CSS, because changing and mentioning of external CSS is easier than any other kinds of CSS. At the end of this tutorial, we will understand why we prefer external CSS over other types.
Inline CSS Inclusion
This is the easiest way of write the CSS code in the HTML document. In inline CSS just write the CSS code along with HTML element which we want to affect via CSS. We write all CSS property in format of STYLY for example: style="property_1:value_1; property_2:value_2".
Simple HTML Code
<p>This is a Simple Paragraph.</p>
HTML Code with Inline CSS Inclusion
<p style="color:orange;font-size:19px">Hello! This is a Paragraph "p" element.</p>
Result Look Like
Hello! This is a Paragraph "p" element.
In-Page CSS Inclusion
In this technique you can write CSS code in the head section of the HTML page. It is compulsory to use CSS selector in this situation FOR EXAMPLE like element selector, id selector, class selectors, etc, Write all CSS Code within the head section of a web page with the CSS selector.
Use CSS selector to identify the HTML element which is being style for more understanding see below syntax:
In this example, Using element CSS selector for In-Page CSS Inclusion
In-Page CSS Inclusion with Element Selector
In-Page CSS Inclusion with Class Selector
In-Page CSS Inclusion example with using Class Selector:
In-Page CSS Inclusion with ID Selector
In-Page CSS Inclusion example with using ID Selector:
External CSS Inclusion
External CSS Inclusion technique most popular to write CSS code in a separate CSS file and then attach that CSS file in HTML web page, and just combinde both HTML and CSS external code file with extension .css.
Important Steps to Create External CSS
For more understanding just follow the below-listed steps, How to create an external CSS Inclusion?
- 1st: create a project, then in your project root directory create a folder and give the name of this directory CSS OR whatever you want
- 2nd: Open the notepad, take a new file, while saving this file in creating a directory, and give the File Name as 'mystyle.css'
- 3rd: .css Extension is must for a CSS external file.
- 4th: This "mystyle.css" must be linked to the HTML web page, just link this CSS external file in between <head> </head> tag by using <link href="file path here">. It is the process to link CSS external file.
- 5th: Now just write CSS code in this external CSS file, BUT most important in CSS external code must need to use CSS selector including Element, Class, Id, etc.
Example of External CSS Inclusion
In this example you can see, how to link and how to write CSS code using external CSS inclusion technique:
mystyle.css File Code
p {
color: #637221;
font-size: 18px;
}
You can use class OR id selector insted of element selector, for example:
mystyle.css File Code
p {
color: #637221;
font-size: 18px;
}
#myp {
color: #fff;
font-size: 25px;
background-color: pink;
}
NOTE: As a developer we recommends you to use external CSS inclusion because it having great advantages, read below mentioned article:
Code Reusability
Code reusability is the biggest advantage of external CSS inclusion because we can easily attach same CSS file in multiple HTML web page, and we can easily define the required style for common HTML elements for the entire project in a single external CSS file and link it all HTML pages.
Easy to Edit and Maintain
Suppose if you have 1000+ web page in your project and you have written In-Page OR Inline CSS for p element just for example. Just ignore is and use CSS external file, easy to modify CSS code for all p element in the entire project then no need to modify in all 1000+ pages. So think about how it is difficult to manage? But using external CSS file very easy to edit at a single place.