Introduction to CSS - Inline, Internal & External Styles

Written by Mukesh Saini | 25 Dec, 2025 11:30:00 AM

Style your HTML with CSS using different methods to control colors, fonts, layouts, and more.

What Is CSS?

CSS (Cascading Style Sheets) separates content (HTML) from presentation (styles).

Control color, font, spacing, layout, and responsiveness
Apply styles globally or to specific elements

Inline CSS

Applied directly to the HTML elementdirectly to the HTML element using the style attribute

This is a blue paragraph.

Internal CSS

Added inside the <head> using the <style> tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS Example</title>
  <style>
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This paragraph is styled with internal CSS.</p>
</body>
</html>

Good for single-page projects
Not reusable across multiple pages

External CSS

Stored in a separate .css file and linked with <link>

styles.css

p { color: red; font-size: 20px; }

index.html

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This paragraph is styled with external CSS.</p>
</body>

Best practice for larger websites
Makes maintenance easier and reusable across multiple pages

Comparison Table

Method	Syntax Location	Pros	Cons
Inline	Inside HTML element	Quick, overrides other styles	Hard to maintain, not reusable
Internal	<style> in <head>	Good for single-page styling	Not reusable across pages
External	Separate .css file	Reusable, maintainable	Extra HTTP request

View full post