How to Add CSS to HTML

How to Add CSS to HTML – Inline, Internal, and External

CSS can be utilized in HTML through three methods: Inline, Internal, and External. Every approach has its applications, benefits, and constraints.

Inline CSS

CSS is utilized directly on an HTML element through the style attribute.

Syntax:

<p style="color: blue; font-size: 16px;">This is a paragraph in blue.</p>

Benefits:

Fast for narrow, particular designs.
A separate file is unnecessary.

Drawbacks:

Difficult to sustain for extensive projects.
Supersedes alternative styles because of elevated specificity.
Not applicable for various elements.

Internal CSS

CSS is included inside a <style> tag located in the <head> section of an HTML file.

Syntax:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Greetings</h1>
</body>
</html>

Benefits:

Consolidates styles in one file for minor projects.
Simpler to handle than inline CSS.

Drawbacks:

Not suitable for extensive websites with numerous pages.
Boosts the size of HTML files.

External CSS

CSS is contained in a distinct .css file and connected to HTML via the <link> tag.

Syntax:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is a formatted paragraph.</p>
</body>
</html>

styles.css

p {
  color: navy;
  font-size: 14pt;
}

Benefits:

Ideal for sustainability and growth.
Applicable in various HTML documents.
Enhances loading time by utilizing browser caching.

Drawbacks:

Needs an extra HTTP request.
Requires correct file path handling.

Comments in CSS

Comments in CSS are used to add notes, explanations, or temporarily disable code. They are ignored by the browser and do not affect the design.

Documentation: Clarify the intent of styles for future use.
Structure: Arrange similar styles or sections together.
Debugging: Temporarily deactivate code by commenting it.
Cooperation: Convey purpose to fellow developers.

Single-Line Comment in CSS

You can use comments to describe one line of code.

Example:

/* This makes all paragraphs red */
p {
  color: red;
}

Multi-Line Comment in CSS

If you need to explain multiple lines of code or write longer notes, you can spread the comment across multiple lines.

Example:

/*
This section styles the headings.
All h1 tags will be blue, centered,
and use a larger font size.
*/
h1 {
  color: blue;
  text-align: center;
  font-size: 32px;
}

Case Sensitivity in CSS

CSS property names and values are case-insensitive.

Example: COLOR: red; and color: red; both work.
But class names, IDs, and file names are case-sensitive.

Example:

.myClass {
  color: blue;
}

<p class="myclass">Hello</p> <!-- Won’t work (case mismatch) -->
<p class="myClass">Hello</p> <!-- Will work -->

Debugging Errors in CSS

Even a small mistake can break your CSS. Here are common errors and how to debug them:

Missing Semicolon

Add semicolons after every property.

p {
  color: red  /* Missing semicolon */
  font-size: 16px;
}

Wrong Selector

If you style #title but your HTML uses class="title", it won’t work.

# → for IDs

. → for classes

File Not Linked Properly (External CSS)

Make sure the path in <link> is correct.

Example:

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

Overriding Styles (Specificity Issue)

If two rules target the same element, the one with higher specificity or latest declaration wins.

Use Browser Developer Tools

Press F12 in Chrome/Firefox → Inspect element → Check CSS applied.

CSS Handbook

CSS Handbook