CSS – Inclusion
Welcome to all our readers on our website at www.tutorialpath.com. As you all know that here on our website we will provide you lots of information related to the latest and newly introduced technology which help you to get updated with the latest tech. Here you will get all the useful information which is required in this tech world. As you know technology is one of the trending part in this world. So, here again we came up with a latest and new tech information which is related to the process of CSS Inclusion. With the help of this article you will get to know the complete process of how to create CSS Inclusion in a step by step manner. So, simply have a look to this article and grab all the useful information which is going to be very helpful for you.
CSS plays an important role in the presentation of Web pages. It defines the visual styles such as layout, colors, positioning, and fonts of HTML elements. In this tutorial, we will cover different ways to include styles sheet in a web page.
Different methods of CSS Inclusion into HTML:
There are four methods to include CSS in your HTML Document.
- Inline CSS
- Embedded/Internal CSS
- External CSS
- Imported CSS
We mostly use inline CSS & External CSS methods.
Inline CSS:
We can define Inline CSS rules using ‘style’ attribute of the HTML element. Inline style rules is applied to only HTML element where it is defined.
We can specify multiple CSS rules separated by semicolons. These rules are placed using the ‘style’ attribute having property name and value.
Inline CSS Example
In above example, we have applied Inline CSS to paragraph element. We have applied two style rules: 1) text color has been specified to red and 2) text alignment has been specified as a center.
Advantages and Disadvantages of External CSS
The following are the advantages of using the external style sheets.
- Allows you to control the look and feel of several documents in one go and do not need to define a specific style for every element.
- Allows you to easily group your styles in a more efficient way
External style sheets have the following disadvantages.
- Increases the download time as the entire CSS file has to be downloaded to apply the style to the HTML document. When the styles are less in number, applying external style sheet can make the document complicated.
- Displays the Web page only after the entire style sheets is loaded.
Internal CSS (Embedded CSS)
The Internal CSS is written in the HEAD element using <style> tag. This style is applied only to the HTML document in which it is embedded.
Internal CSS Example
In above example, Internal CSS is defined in head tags. Given CSS will be applied body and all paragraph tags in this web page.
External CSS
In External CSS, we use <link> element to include an external style sheet file in HTML document.
First of all, we write style rules in a separate file with .css extension. Then we include this CSS file inside the head element of HTML Document.
This is the most common method CSS Inclusion method to the HTML document. Using this method, we can write CSS for multiple web pages into the single file and include same CSS file in every page.
External CSS Example
In above example, External CSS is included in head tags. External CSS rules will be applied to HTML elements of this web page as well as other web pages where external CSS will be included.
Imported CSS – Inside html head
We can use it in two ways. One way is to use within the header of your HTML document and another way is to include in CSS file.
@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
Imported CSS Example inside CSS file
The best use of @import is to include some stylesheet from within another stylesheet.
This not only helps us to manage large CSS code but also loads faster using browser caching.
@imports must be defined before all other content in your CSS file.
In above example, main CSS file includes multiple CSS files.
Advantages and Disadvantages of Embedded CSS
The following are the advantages of using the internal style sheets.
- Affects only the page in which they are placed. If you are working on a large site and need to test styles before loading them on the site as a whole, internal style sheets can be a great tool as they allow you to test the styles on a single page.
- Allows you to change the style of the same HTML file in which you are working.
Internal style sheets have the following disadvantages.
- Affects only the page to which they are applied. If you want to use same styles in several documents, you need to repeat them for every page.
- Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.