CSS Inclusion

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.

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

We can import one stylesheet into another stylesheet using @import rule.

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.

Imported CSS Example inside HTML Head

We can include CSS file inside style tag using @import rule. However, this is not very useful.

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.

Best method to Include CSS into HTML?

Different websites use different CSS inclusion methods depending on their requirements.

  • If you have CSS that is common for multiple pages, you can put it into the external CSS file.
  • You can use Internet CSS if your CSS applies to multiple HTML elements but on one or two pages.
  • If you need to overwrite or add CSS to any particular HTML element, you can go for Inline CSS.

Congratulations! Chapter Finished. Do you want to practice more?
Exercises & Assignments
  • No Content Found.
  • Interview FAQs
  • No Content Found.