What are the ways to connect CSS to HTML?
CSS can be connected to HTML in three main ways:
1. External file (recommended way)
The styles live in a separate .css file, which is linked in the <head> using the <link> tag.
HTML:
html
<link rel="stylesheet" href="style.css">style.css:
css
p {
color: blue;
}Pros: keeps the code organized, easy to maintain, many pages can use the same file. Cons: requires a separate file.
2. Internal styles (inside <style> in the <head>)
html
<head>
<style>
p {
color: green;
}
</style>
</head>Pros: convenient for small pages or quick testing. Cons: if there are many styles, the code becomes bulky.
3. Inline (inline styles) - via the style attribute on the tag itself
html
<p style="color: red;">Text</p>Pros: quick to change a single element. Cons: poor readability, cannot be reused, not suitable for large projects.
Summary
| Method | Where styles are written | When to use |
|---|---|---|
| External CSS | separate .css file | normal development |
Internal <style> | in <head> | small projects, tests |
Inline style="" | directly in the tag | targeted changes |
If needed, I can go further into: style priority, cascading, and the order in which they are applied.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.