Colors & CSS Basics

HTML Colors

<p style="color: red;">Named color</p>
<p style="color: #C41230;">Hex color</p>
<p style="color: rgb(196, 18, 48);">RGB color</p>
<p style="color: rgba(196, 18, 48, 0.5);">RGB with transparency</p>

• Named colors — ~140 keywords like red, skyblue. Easy to read, limited choice.
• Hex (#RRGGBB) — the most common in real projects; each pair (00–FF) sets Red, Green, Blue
• RGB / RGBA — same idea in 0–255 numbers; rgba() adds transparency (0 to 1)

This site itself uses hex colors as CSS variables — brand red #C41230, gold #F5A623, dark navy #1A1A2E — defined once and reused everywhere.

Introducing CSS

HTML defines structure; CSS defines how it looks. There are three ways to add CSS to HTML:

Inline — directly on one element (quick, but hard to maintain):

<p style="color: red; font-size: 18px;">Styled text</p>

Internal — inside a <style> block in <head> (fine for a single page):

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

External — a separate .css file, linked in <head> (best practice for real sites — reusable across every page):

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

This is exactly what real projects do — one shared style.css file, linked once, styling every page on the site consistently.