HTML gives a page its structure. CSS makes it look good. But before CSS can do anything, the browser needs to know about it. There are three ways to connect styles.
Way 1: Inline styles (the style attribute)
Styles are written directly inside the tag using the style attribute.
<h1 style="color: #2563eb; font-size: 2rem;">My DevBlog</h1>
<p style="color: #6b7280; margin-top: 8px;">Notes from a Python developer</p>
Pros: works instantly, no extra files needed.
Cons: repeated on every tag, not reusable, hard to maintain. With 50 blog posts โ a nightmare.
When to use: almost never. Only for quick tests or dynamic styles from JavaScript.
Way 2: The <style> tag inside HTML
Styles are written inside a <style> tag placed in <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DevBlog</title>
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
}
h1 {
color: #2563eb;
}
p {
color: #6b7280;
}
</style>
</head>
<body>
<h1>My DevBlog</h1>
<p>Notes from a Python developer</p>
</body>
</html>
Pros: styles are in one place, no duplication within the page.
Cons: styles are tied to a single HTML file. For multiple pages you have to copy <style> into each one.
When to use: single-page demos, HTML email.
Way 3: External file (the <link> tag) โ recommended
Styles live in a separate .css file and are connected via <link>.
Project structure:
devblog/
โโโ index.html
โโโ article.html
โโโ static/
โโโ style.css
static/style.css:
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 0 16px;
}
h1 {
color: #2563eb;
}
p {
color: #374151;
line-height: 1.6;
}
Both index.html and article.html reference the same file:
<head>
<meta charset="UTF-8">
<title>DevBlog โ Home</title>
<link rel="stylesheet" href="static/style.css">
</head>
Pros:
- One stylesheet for all pages
- Browser caches CSS โ subsequent pages load faster
- Clean separation of HTML (structure) and CSS (appearance)
Cons: none. This is the right approach.
Where to place <link>
Always inside <head>, before the closing </head>. If you put it in <body>, the browser renders the page without styles first and then suddenly applies CSS โ a visible flash of unstyled content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevBlog</title>
<!-- CSS goes here -->
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<!-- content here -->
</body>
</html>
Multiple CSS files
You can link several files โ the browser applies them in order:
<link rel="stylesheet" href="static/reset.css">
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="static/article.css">
For the DevBlog at the start, a single style.css is enough.
Summary
| Method | Where it lives | Best for |
|---|---|---|
style="" |
Inside the tag | Quick test |
<style> |
In <head> |
Single page |
<link> |
In <head> |
Any real project |
In the DevBlog we will use an external static/style.css connected via <link>.
๐ฌ Comments (0)
No comments yet
Be the first to share your opinion about this article!