How to Add CSS to HTML

Learn different methods to apply CSS styles to your HTML documents

Methods for Adding CSS

CSS can be added to HTML documents in 3 ways:

  • Inline CSS - by using the style attribute inside HTML elements
  • Internal CSS - by using a <style> element in the <head> section
  • External CSS - by using a <link> element to link to an external CSS file

Inline CSS

How It Works

Inline CSS is applied directly to HTML elements using the style attribute. This method has the highest specificity.

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

Note: Inline CSS is not recommended for large projects as it mixes content with presentation and is difficult to maintain.

Example

This is a heading

This is a paragraph.

When to Use:

  • Quick testing or prototyping
  • When you need to override other styles
  • For single-use styles that won't be reused

Internal CSS

How It Works

Internal CSS is defined within the <style> element, inside the <head> section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Example

This is a heading

This is a paragraph.

When to Use:

  • Single-page websites
  • When styles are specific to one page
  • Small projects with minimal styling

Note: Internal CSS is better than inline but still mixes content with presentation for multi-page websites.

External CSS

How It Works

With external CSS, you link to an external .css file. This is the most common and recommended method.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
/* styles.css file */
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }

Example

This is a heading

This is a paragraph.

Advantages:

  • Separation of concerns (content vs presentation)
  • Easier maintenance and updates
  • Faster page loading after initial cache
  • Consistent styling across multiple pages

When to Use:

  • Multi-page websites
  • Large projects
  • Professional web development
  • When you need consistent styling across pages

CSS @import Rule

How It Works

The @import rule allows you to import one CSS file into another CSS file.

/* main.css file */
@import url("navigation.css");
@import url("content.css");
@import url("footer.css");

body { font-family: Arial, sans-serif; }

Note: The @import rule must be at the top of the document, before any other rules.

Example Usage

You can also use @import within a <style> tag:

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body { font-family: 'Roboto', sans-serif; }
</style>

Best Practices:

  • Use for organizing large CSS codebases
  • Import Google Fonts or other external resources
  • Limit the number of @import calls to avoid performance issues

CSS Precedence Order

Which style applies when multiple styles conflict?

PriorityMethodDescription
1 (Highest)Inline CSSStyles applied directly to HTML elements
2Internal CSSStyles defined in the <style> tag
3External CSSStyles from external .css files
4 (Lowest)Browser DefaultsDefault styles applied by the web browser

Example of Precedence:

/* External CSS (styles.css) */
p { color: blue; }

<!-- Internal CSS -->
<style> p { color: green; } </style>

<!-- Inline CSS -->
<p style="color: red;">What color will this text be?</p>

The text will be RED because inline CSS has the highest priority.

Best Practices

Do's

  • Use external CSS for multi-page websites
  • Organize your CSS with comments and sections
  • Use consistent naming conventions (like BEM)
  • Minify CSS for production to improve loading times
  • Use CSS variables for consistent theming
  • Follow a mobile-first approach for responsiveness

Don'ts

  • Avoid inline styles except for quick testing
  • Don't use too many !important declarations
  • Avoid overly specific selectors when possible
  • Don't mix different methods without a clear strategy
  • Avoid using internal CSS for large projects
  • Don't forget to test across different browsers

Performance Considerations

  • External CSS files are cached by browsers, improving load times for subsequent pages
  • Too many @import statements can slow down page loading
  • CSS should be placed in the <head> to prevent FOUC (Flash of Unstyled Content)
  • Consider critical CSS for above-the-fold content to improve perceived performance
< PreviousNext >