Suggest an edit

Improve this article

Refine the answer for “What are the ways to connect CSS to HTML?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts214 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.