Concepts of CSS: adding CSS (Inline, Internal, External)

📖 Theory

The form that scared people off

You built the FestConnect registration page in plain HTML. It works, but it looks like a 1998 office form: black Times text on white, a squished blue title, buttons the size of postage stamps. Students open it and close it.

The structure is fine. What is missing is style: colours, spacing, fonts. In web design, style lives in a separate language, CSS (Cascading Style Sheets), and your first decision is simply where to put it. There are exactly three places.

📖 Theory

Sticky note, page rules, house rulebook

Think of styling a school notice:

• Inline is a sticky note stuck on one line: it changes only that line.
• Internal is a rule written at the top of that one notice: it governs the whole notice.
• External is the school's printed rulebook that every notice follows.

Same three choices for CSS: on one tag, at the top of one page, or in a shared file the whole site obeys.

📖 Theory

The three ways, formally

• Inline CSS: a style attribute on a single element. Styles only that one tag.
• Internal (embedded) CSS: a <style> block inside the page's <head>. Styles that whole page.
• External CSS: rules in a separate .css file, pulled in with a <link> tag in the <head>. Styles every page that links it.

All three write the same rule shape: a selector then { property: value; }, for example h1 { color: crimson; }.

⌨️ Practical

The same heading, styled three ways

<!-- 1. INLINE: style attribute on the tag itself -->
<h1 style="color: crimson; text-align: center;">FestConnect</h1>

<!-- 2. INTERNAL: a <style> block in the head -->
<head>
  <style>
    h1 { color: crimson; text-align: center; }
  </style>
</head>

<!-- 3. EXTERNAL: link a separate file, put the rule in styles.css -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<!-- styles.css contains:  h1 { color: crimson; text-align: center; } -->

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📊 At a glance

Which one, and when

💭 Think first

Predict the colour

styles.css says h1 { color: blue; }. The same page's <head> also has an internal rule h1 { color: green; } written after the link. And the tag itself is <h1 style="color: crimson;">. What colour is the heading? Decide before tapping.

🧩 Quiz

You want one set of colours and fonts to apply across all 6 pages of FestConnect, and to change them in one place later. Which method?

1. External CSS: one .css file linked into every page
2. Inline CSS on every element so each is explicit
3. Internal CSS, copied into the <head> of all 6 pages
4. It does not matter, all three behave identically

⚠️ Watch out

The precedence trap

Exams ask: "which rule wins when they conflict?" The order is inline > internal/external by specificity, then last-loaded wins on a tie. A very common wrong answer is 'external always overrides internal'. Not true: it depends on load order and specificity, not on the method name.

Second trap: the <link> and <style> tags belong in <head>, not in the <body>. Putting styles in the body still often works in browsers but is marked wrong in exams.

📖 Theory

Bootstrap is just external CSS

In the next unit you will add Bootstrap by pasting one <link> to a .css file. That is external CSS, the exact pattern above, just written by someone else. Every framework you meet later (Bootstrap, then bigger ones) is fundamentally a big external stylesheet you link and then override with your own.

✅ Summary

Key takeaways

• CSS attaches three ways: inline (style attribute, one tag), internal (<style> in head, one page), external (<link> to a .css file, many pages).
• All three use the same rule shape: selector { property: value; }.
• Precedence: inline beats internal/external by specificity; equal rules resolve by last-loaded-wins (the cascade).
• External is the professional default: reusable across pages and cached by the browser.
• <style> and <link> live in <head>, not <body>.
• Memory hook: sticky note, page rules, house rulebook.