CSS Tutorial
CSS How To
There are three ways to add CSS to an HTML page: inline, internal and external. Each has its place, but external stylesheets are the recommended choice for real projects.
Three ways to add CSS
You can attach CSS to a page in three ways. Knowing all three helps you read other people's code and choose the right method for your own.
- Inline CSS: a style attribute directly on an element.
- Internal CSS: a <style> block inside the page's <head>.
- External CSS: a separate .css file linked to the page.
1. Inline CSS
Inline CSS uses the style attribute on a single HTML element. It only affects that one element. It is quick for small tests but hard to maintain, because styles are scattered through the markup.
<!DOCTYPE html>
<html>
<body>
<h1 style="color: white; background-color: crimson; padding: 12px;">Inline CSS</h1>
<p style="color: gray;">Only this paragraph is gray.</p>
</body>
</html>2. Internal CSS
Internal CSS lives inside a <style> element in the <head> of the page. It can style the whole page and keeps CSS out of the markup. It is useful for a single-page site or a quick demo.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eef7ff;
}
h1 {
color: #0b66c3;
text-align: center;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>All styling is in the head section.</p>
</body>
</html>3. External CSS
External CSS is the professional standard. You write your styles in a separate file, for example styles.css, and link it from the HTML page. One file can style an entire website, and updating it updates every page at once.
body {
background-color: #f7f7f7;
}
h1 {
color: #333;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External CSS</h1>
<p>Styles come from a linked .css file.</p>
</body>
</html>The linked external example above will not visibly change in the editor because styles.css does not exist here. On a real website, the browser would load that file. Use the internal example above to see live results.
Comparing the three methods
| Method | Where it lives | Best for |
|---|---|---|
| Inline | style attribute on an element | Quick one-off tweaks |
| Internal | <style> in the <head> | Single pages and demos |
| External | Separate .css file | Real, multi-page websites |
For real projects, use external CSS. It keeps your HTML clean and lets you update the whole site's look from one file.
Key points
- Inline CSS uses the style attribute on one element.
- Internal CSS uses a <style> block in the <head>.
- External CSS uses a linked .css file.
- External CSS is the recommended approach.
- Link external CSS with <link rel="stylesheet" href="...">.