CSS Inclusion

There are three ways to add CSS to an HTML page: inline, internal and external.

---

1. Inline CSS

Write the CSS in the style attribute of one element. It affects only that element.

<p style="color: blue; font-size: 20px;">Blue text.</p>

---

2. Internal CSS

Write the CSS inside a <style> tag in the head. It affects the whole page.

<head>
  <style>
    p { color: blue; }
    h1 { text-align: center; }
  </style>
</head>

---

3. External CSS

Write the CSS in a separate file with the .css extension, and link it with the <link> tag. One file can style many pages.

<head>
  <link rel="stylesheet" href="style.css">
</head>

Inside style.css you write only CSS, with no HTML tags.

p { color: blue; }
h1 { text-align: center; }

---

Which one should you use?

Type	Use it for
Inline	Quick tests, or one special change. Hard to maintain
Internal	A single page with its own style
External	Real websites. Best choice

Which one wins?

If the same property is set in more than one place with the same strength, the rule that comes last wins, and inline style is stronger than the others. See CSS Specificity.

---

Summary

• Inline = style attribute, internal = <style> tag, external = <link> to a .css file.
• Use external CSS for websites.
• Next: CSS Syntax.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.