Home » Learn » CSS Tutorial » CSS Inclusion

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 on 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 the ‘style’ attribute of the HTML element. Inline style rules are 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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p style="color:red; text-align:center;">
    You are Learning CSS Inclusion at Tutorials Class. This is an Inline CSS Example. 
</p>

</body>
</html>

In the 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 is an Internal CSS Example. You are Learning CSS Inclusion at Tutorials Class.

Internal CSS Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

p {
    color: yellow;
    font-size: 25px;
}
</style>
</head>
<body>

<p> This is a Internal CSS Example. You are Learning CSS Inclusion at Tutorials Class. </p>

</body>
</html>

In the above example, Internal CSS is defined in head tags. Given CSS will be applied body and all paragraph tags on this web page.

External CSS

In External CSS, we use <link> element to include an external style sheet file in the HTML document.

First of all, we write style rules in a separate file with a .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 the same CSS file on every page.

External CSS Example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<p> This is a External CSS Example. Welcome to Tutorials Class. </p>

</body>
</html>

In the 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 a style tag using @import rule. However, this is not very useful.

<!DOCTYPE html>
<html>
<head>
    <style>
	@import url('styles.css');
    </style>
</head>
<body>

<p> This is a Imported CSS Example. You are Learning CSS Inclusion at Tutorials Class. </p>

</body>
</html>

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.

@import url('/css/stylesheet-1.css');
@import url('/css/stylesheet-2.css');
@import url('/css/colors.css');

p { color: blue; font-size: 14px; }
h1 { font-weight:bold; color:black; }

In the above example, the main CSS file includes multiple CSS files.

The 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.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.