Ways to Create CSS

There are three main ways to apply CSS to your HTML documents. Understanding their differences and use cases is very important.

1. External CSS

This is the most recommended and most commonly used method. You write all your CSS rules in a separate .css file and then include it in the <head> section of your HTML document using the <link> tag.

mystyle.css file:

css

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

index.html file:

html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Advantages:

Separation of Concerns: Separates HTML (structure) from CSS (presentation), making the code clearer and easier to maintain.
Reusability: The same .css file can be referenced by multiple HTML pages, achieving global consistency in style.
Caching: Browsers can cache .css files, so when users visit other pages of the website, they don't need to download it again, thereby speeding up page loading.

2. Internal CSS

You can also write CSS rules directly in the <head> section of your HTML document, wrapped in <style> tags. This method is suitable for cases where a single page needs unique styles that won't be used on other pages.

index.html file:

html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
    }
  </style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Advantages:

Convenient: For simple styles on a single page, there's no need to create an extra file.
Fewer Requests: All styles are in the HTML file, reducing one HTTP request.

Disadvantages:

Poor Maintainability: When styles become complex, the HTML file becomes bloated.
Not Reusable: Styles only apply to the current page.

3. Inline CSS

Inline CSS involves writing CSS rules directly in the style attribute of an HTML element. This method should be avoided as much as possible because it breaks the principle of separating structure from presentation.

index.html file:

html

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue; text-align:center;">This is a centered blue heading</h1>
<p style="color:red;">This is a red paragraph.</p>

</body>
</html>

Advantages:

Highest Specificity: Inline styles have very high specificity and can override styles defined anywhere else (except !important).

Disadvantages:

Maintenance Nightmare: Scattering styles throughout the HTML makes them extremely hard to manage and modify.
Code Redundancy: Styles cannot be reused, leading to a lot of code duplication.
Performance Issues: Cannot leverage browser caching.

Use Cases: Used only in very specific situations, such as:

Dynamically modifying the style of an element via JavaScript.
In some HTML email templates where external or internal style sheets cannot be used.

Summary

Method	Advantages	Disadvantages	Recommendation
External CSS	Separation of concerns, reusable, cacheable	Requires extra file and request	★★★★★ (Highest)
Internal CSS	Convenient, fewer requests	Not reusable, poor maintainability	★★★☆☆ (Specific scenarios)
Inline CSS	High specificity	Extremely poor maintainability, code redundancy	★☆☆☆☆ (Avoid if possible)

Ways to Create CSS ​

1. External CSS ​

2. Internal CSS ​

3. Inline CSS ​

Summary ​

Ways to Create CSS

1. External CSS

2. Internal CSS

3. Inline CSS

Summary