How to Add CSS

There are three ways to add CSS to an HTML page: an external stylesheet, an internal <style> block and inline style attributes. Real projects mostly use external stylesheets, but knowing all three helps you read any code.

External CSS

Write your CSS in a separate file such as styles.css and link it from the head with a <link> element. One file can style every page of a site, and the browser caches it.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
body { font-family: system-ui, sans-serif; }

Internal CSS

Put CSS inside a <style> element in the head. It only affects that one page. All the examples in this tutorial use internal CSS so everything fits in one file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { background: #ecfeff; }
h1 { color: #0e7490; }
</style>
</head>
<body>
<h1>Styled with internal CSS</h1>
</body>
</html>

Inline CSS

The style attribute applies CSS to a single element. It is quick for testing, but it mixes style into content, cannot be reused and is hard to override, so avoid it in real projects.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
p { color: gray; }
</style>
</head>
<body>
<p>Normal paragraph.</p>
<p style="color: red; font-weight: bold;">Inline style wins over the internal rule.</p>
</body>
</html>

The Cascade Order

• Inline styles override internal and external rules of lower specificity
• Between internal and external CSS, whichever comes later in the document wins on a tie
• Browser default styles are always the lowest priority

Frequently asked questions

Which is the best way to add CSS?

External stylesheets are best for real sites because one file styles all pages, it is cached and it keeps HTML clean.

Why is my external CSS file not working?

Usually the href path is wrong or rel="stylesheet" is missing. Open DevTools, check the Network tab for a 404, and confirm the file name and folder.

Can I use multiple CSS files on one page?

Yes. Add one <link> per file. Later files override earlier ones when selectors have equal specificity.