How to Add CSS
CSS can be added to an HTML page in three different ways: inline, internal, and external. Each method has its own use case and level of priority. Understanding when to use each method is important for writing well-organized web pages.
1. Inline CSS
Inline CSS is written directly inside an HTML element using the style attribute. The styles apply only to that single element.
Syntax
<tagname style="property: value;">Content</tagname>Example
<p style="color: red; font-size: 18px;">This paragraph is red and 18px.</p>When to Use
Inline CSS is useful for quick, one-off changes to a single element. However, it is not recommended for large projects because it mixes structure (HTML) with design (CSS), making the code harder to maintain.
Pros and Cons
- Easy and fast to write for a single element.
- Has the highest priority — overrides internal and external CSS.
- Not reusable — same styles must be repeated on every element.
- Makes HTML code cluttered and hard to read.
2. Internal CSS
Internal CSS is written inside a <style> tag placed within the <head> section of an HTML document. It applies styles only to that specific HTML page.
Syntax
<head>
<style>
selector {
property: value;
}
</style>
</head>Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightyellow;
}
h1 {
color: darkblue;
}
p {
font-size: 16px;
color: gray;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a styled paragraph.</p>
</body>
</html>When to Use
Internal CSS is suitable for single-page websites or when a page requires unique styles that are not shared with other pages.
Pros and Cons
- All styles are in one place within the page — easier to manage than inline.
- No extra file needed.
- Cannot be reused across multiple pages — each page needs its own
<style>block.
3. External CSS
External CSS is written in a completely separate file with a .css extension. This file is then linked to the HTML page using a <link> tag inside the <head> section.
CSS File (styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: darkgreen;
font-size: 28px;
}
p {
color: #333;
line-height: 1.8;
}HTML File
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Website</h1>
<p>This page is styled using an external CSS file.</p>
</body>
</html>The <link> tag connects the HTML page to the CSS file. The rel="stylesheet" tells the browser the linked file is a stylesheet, and href is the path to the CSS file.
When to Use
External CSS is the best and most professional method. It is ideal for multi-page websites because one CSS file controls the design of all pages. Updating a single CSS file instantly updates every linked page.
Pros and Cons
- Best for large websites — one change updates all pages.
- Keeps HTML clean and focused on structure only.
- CSS file can be cached by the browser, making pages load faster.
- Requires an extra file and a correct file path in the link tag.
Priority Order (Cascading Order)
When all three methods are used together on the same element, the browser follows a specific priority order to decide which style wins:
- Inline CSS – Highest priority (overrides everything)
- Internal CSS – Applied if no inline style exists
- External CSS – Applied if no inline or internal style exists
- Browser default styles – Lowest priority
Example Showing Priority
<!-- External CSS sets h1 color to green -->
<!-- Internal CSS sets h1 color to blue -->
<h1 style="color: red;">What color am I?</h1>The heading will be red because inline CSS has the highest priority.
Summary
| Method | Location | Best Use |
|---|---|---|
| Inline | Inside the HTML tag | Quick single-element styling |
| Internal | Inside <style> in <head> | Single-page unique styles |
| External | Separate .css file | Multi-page websites (recommended) |