Inline, internal, external CSS | CSS Basics Tutorial

CSS Basics: Inline, Internal, & External CSS

CSS (Cascading Style Sheets) is used to style HTML elements. It controls the layout, colors, fonts, and other visual aspects of a webpage. There are three main ways to apply CSS to an HTML document: inline, internal, and external.

1. Inline CSS

How it works: Styles are applied directly within the HTML element using the style attribute.
Syntax: <element style="property: value;">Content</element>

Example:

<h1 style="color: blue; text-align: center;">This is a heading</h1>
<p style="font-size: 16px;">This is a paragraph.</p>

Pros:
- Quick and easy for small, isolated styling changes.
Cons:
- Difficult to maintain – styles are scattered throughout the HTML.
- Not reusable – each element needs its own style attribute.
- Overrides other CSS methods, making it hard to manage styles consistently.
- Violates the separation of concerns principle (mixing content and presentation).
Use Cases: Generally discouraged except for very specific, one-off styling needs during testing or for dynamic styling applied by JavaScript.

2. Internal CSS (Embedded CSS)

How it works: Styles are defined within a <style> tag placed inside the <head> section of the HTML document.

Syntax:

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    h1 {
      color: green;
      text-align: center;
    }
    p {
      font-size: 18px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Pros:
- Centralized styles for a single HTML page.
- Easier to maintain than inline styles.
Cons:
- Not reusable across multiple pages.
- Can make the HTML file larger and harder to read if the styles are extensive.
Use Cases: Suitable for styling a single HTML page, especially when you don't need to reuse the styles elsewhere.

3. External CSS

How it works: Styles are defined in a separate .css file and linked to the HTML document using the <link> tag in the <head> section.

Syntax:

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

style.css (example):

h1 {
  color: red;
  text-align: center;
}

p {
  font-size: 20px;
  color: #333;
}

Pros:
- Reusability: Styles can be applied to multiple HTML pages.
- Maintainability: Changes to the CSS file affect all linked pages.
- Organization: Separates content (HTML) from presentation (CSS), improving code readability and maintainability.
- Caching: Browsers can cache external CSS files, leading to faster page load times.
Cons:
- Requires an extra HTTP request to load the CSS file. (Though caching mitigates this)
Use Cases: The preferred method for styling most websites, especially larger projects, due to its reusability, maintainability, and organization benefits.

Summary Table:

Feature	Inline CSS	Internal CSS	External CSS
Location	Within HTML tag	`<style>` tag	Separate .css file
Reusability	No	Single page	Multiple pages
Maintainability	Low	Medium	High
Organization	Poor	Moderate	Excellent
Best Use	Quick fixes, testing	Single page styling	Most websites