Web Analytics
☕ Coffee 𝕏 Follow
0%

Adding CSS to HTML

Beginner ~7 min read

Three Ways to Add CSS

There are three methods to apply CSS to HTML documents. Each has its use case, but some are better than others for most situations.

1. Inline CSS

Inline CSS uses the style attribute directly on HTML elements. This method has the highest specificity but is generally not recommended.

HTML
CSS
JS
Not Recommended: Inline CSS mixes content with presentation and is hard to maintain.

2. Internal CSS

Internal CSS uses a <style> tag in the <head> section. Good for single-page styling or quick prototypes.

HTML
CSS
JS

3. External CSS (Recommended)

External CSS uses a separate .css file linked with the <link> tag. This is the best practice for most websites. 


<head>
  <link rel="stylesheet" href="styles.css">
</head>
/* In styles.css */
h1 {
  color: #2563eb;
  font-size: 32px;
}

p {
  color: #475569;
  line-height: 1.6;
}

Why External CSS is Best

  • Reusability - One stylesheet for multiple pages
  • Maintainability - Update styles in one place
  • Caching - Browser caches the CSS file for faster loads
  • Separation - Clean separation of content and presentation
  • Organization - Easier to manage large projects

Quick Quiz

Which method is recommended for adding CSS to most websites?

A
Inline CSS
B
Internal CSS
C
External CSS
D
All are equally good
Previous Introduction
Next Selectors Basics