How To Insert CSS into an HTML document?


There are three ways to insert CSS into an HTML document. They are:

  1. External CSS
  2. Internal CSS
  3. Inline CSS


External CSS

In external CSS you have to create a separate css file, for example, style.css and then link this file to html document using <link> tag inside <head> section of an HTML document. The code is

<link rel="stylesheet" href="style.css">

syntax:
/*
<link rel="stylesheet" href="filename.css">
*/



Internal CSS

In internal CSS, CSS code is written inside the <style> tage inside <head> section of an HTML document. For example:

<head>
   <style>
         body{
       background-color: red;
      font-family: arial;
   </style>
</head>

Syntax
/*
<head>
    <style>
   -------------------------
   -------CSS Code-------
  --------------------------
    </style>
</head>
*/



Inline CSS

In Inline CSS, CSS code is written in the 'style' attribute of any single element. It is used to provide a unique style to an element or tag.
For example:

<p style="color:red;">This is paragraph</p>

Syntax:
/*
<tagname style="----css code----"> Content</tagname>
*/



Note:

Inline style has the highest priority over External and Internal CSS.



Trending Posts

What Are The Use of Function Keys F1 to F12 on The Keyboard?

The Rise of Agentic AI: How Autonomous Coding Agents Are Replacing Junior Devs

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

How To Create A Parallelogram Using HTML and CSS?

10 AI Coding Tools That Actually Made Me a Worse Programmer (2025 Edition)

The Secret Formula to Grow as a Programmer

AI vs. Human Hackers: Who Wins the Cybersecurity Arms Race in 2025?

Ethical Hacking with AI: Automating Penetration Testing Using Claude and Gemini

Why Should You Create Programming Notebooks?

How to Create a Digital Clock with Date using HTML, CSS & JavaScript