How to Include CSS in HTML- Types of CSS Inline External Internal

CSS (Cascading Style Sheets) is a fundamental component of web design that enhances the visual appeal and aesthetics of websites.

There are various types of CSS that developers can utilize to style their web pages. Each type has its own syntax, usage, and advantages.

In this article, we will explore the three primary types of CSS: Inline CSS, Internal CSS, and External CSS.

By understanding the differences and applications of these styles, you can effectively enhance the presentation of your web pages.

Your CSS code can be included with your HTML document, there are four different ways. These are namely:

  • Internal CSS
  • Inline CSS
  • External CSS and
  • Imported CSS

To understand and make a choice about which kind of inclusion you should go with, we will now learn more about each one of these types:

Internal (Embedded) CSS in hTML

As the name suggests, Embedded CSS is when you include the CSS style code by adding it to your HTML document.
The <style> element in HTML is employed for this purpose. The <style> tag has to be put within the <head></head> tag.

Whatever rules you define within this, will be applied to the respective fields in the document.
Thus, Embedded CSS is useful when you are designing a webpage with separate styling constructs but you also want the design to be reusable within the page.

Embedded CSS Example

Inline CSS in HTML

This is another way of adding the CSS code within the HTML document. However, Inline CSS is more element specific than Embedded.
Here, instead of a separate <style> tag, we add the CSS code to the style attribute in the different HTML elements.

Therefore, if you’re looking for styling your different webpage elements in different ways, Inline CSS is the way forward.

Inline CSS Example

External CSS in HTML

The next two inclusion techniques are about using the CSS code in a separate file rather than the HTML document itself.
This enables the programmer to use the same CSS codes on multiple web pages.

Talking about External CSS specifically, the CSS code here is included by mentioning the CSS file name in a <link> tag. For example, below is a sample code for including a CSS file styleit.css into the HTML document

The CSS code file is saved under the .css extension.

External CSS Example in HTML

Imported CSS in HTML

The basic idea is similar to the Externa CSS. Here, instead of the tag, we use @import. So the CSS file is written with the @import annotation to include it in the HTML code.

Imported CSS Example

Difference between inline internal and external CSS

The key difference between inline internal and external CSS are
1. Location: inline and internal CSS are specified in the same HTML file as external CSS are stored in separate files and called in HTML.
2. Scope: scope of inline CSS is to the particular element. The scope of internal CSS is only up to a page and the scope of external CSS is global.
3. Maintainability: code maintenance is hard in internal and inline CSS but this is very easy in external CSS.

What is External CSS

A CSS file defined outside the HTML file is called external CSS. The CSS is stored in a separate .css file. While creating a project is better to use External CSS. External CSS is linked in an HTML file using <link>.

Name three types of CSS

Three types of CSS are
1. Inline CSS
2. Internal CSS
3. External CSS

External style sheets should be stored with the extension

external files are stored with the extension .css

Read More

Full form of CSS | Details of CSS