0
0
CSSmarkup~5 mins

Inline, internal, and external CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

CSS styles make web pages look nice and organized. You can add CSS in three ways to control how your page looks.

When you want to quickly change the style of one element only.
When you want to style a single HTML page with some custom styles.
When you want to keep styles separate from HTML for easier management.
When you want to reuse the same styles across many pages.
When you want to test style changes without editing external files.
Syntax
CSS
/* Inline CSS */
<tag style="property: value;">Content</tag>

/* Internal CSS */
<style>
  selector {
    property: value;
  }
</style>

/* External CSS */
<link rel="stylesheet" href="styles.css">

Inline CSS goes inside an HTML tag using the style attribute.

Internal CSS is placed inside a <style> tag in the HTML <head>.

External CSS is in a separate file linked to the HTML.

Examples
Inline CSS changes the color of just this paragraph.
CSS
<p style="color: blue;">This text is blue.</p>
Internal CSS styles all <h1> headings on this page green.
CSS
<style>
  h1 {
    color: green;
  }
</style>
<h1>Green heading</h1>
External CSS styles all <h2> headings red and bigger, reusable on many pages.
CSS
<link rel="stylesheet" href="styles.css">

/* In styles.css file */
h2 {
  font-size: 2rem;
  color: red;
}
Sample Program

This page uses all three CSS types: internal CSS styles the body and h1, inline CSS colors one paragraph purple, and external CSS (in styles.css) styles the h2 heading.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Types Example</title>
  <style>
    /* Internal CSS */
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: darkblue;
    }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Internal CSS Heading</h1>
  <p style="color: purple;">This paragraph uses inline CSS to be purple.</p>
  <h2>External CSS Heading</h2>
</body>
</html>
OutputSuccess
Important Notes

Inline CSS is quick but not good for many elements because it mixes style with content.

Internal CSS is good for single pages but can get messy if styles grow large.

External CSS keeps styles in one place, making it easy to update many pages at once.

Summary

Inline CSS styles one element directly inside the tag.

Internal CSS goes inside a <style> tag in the HTML head for that page.

External CSS is in a separate file linked to HTML, best for reuse and organization.