Skip to content
Learning

CSS Styling Methods

CSS can be implemented in several ways, each with its own use cases and advantages. Here are the methods:

1. Inline CSS

CSS is applied directly within an HTML element using the style attribute.

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

Advantages:

  • Quick and easy for small, unique styles.
  • No need for external or internal style sheets.

Disadvantages:

  • Not reusable.
  • Can clutter HTML and reduce readability.

2. Internal CSS

CSS is placed within a <style> tag inside the <head> section of the HTML document.

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is an internally styled paragraph.</p>
</body>

Advantages:

  • Keeps CSS in the same file as HTML.
  • Useful for single-page documents or quick prototypes.

Disadvantages:

  • Not reusable across multiple pages.
  • Can make the HTML document longer and harder to manage.

3. External CSS

CSS is written in a separate .css file and linked to the HTML document using the <link> tag.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <p>This is an externally styled paragraph.</p>
</body>
styles.css
p {
  color: green;
  font-size: 18px;
}

Advantages:

  • Reusable across multiple HTML documents.
  • Keeps HTML clean and separates content from presentation.

Disadvantages:

  • Requires an additional HTTP request to load the CSS file.
  • Less convenient for small, quick changes.