Quest 1 • Lesson 7

🎨 CSS Basics

CSS (Cascading Style Sheets) controls the look and feel of your web pages: colors, fonts, spacing, layout. There are three ways to add CSS to HTML.

"HTML is the structure; CSS is the paint and decoration. Together they make beautiful websites."

inline.html

<h1 style="color: #60a5fa; font-size: 2rem;">Hello</h1>

Uses the style attribute inside an HTML tag. Affects only that element. Good for quick tests, but not recommended for large projects.

🔵 This text is styled with inline CSS (blue, bold).

internal.html

Uses a <style> tag inside <head>. Applies to the whole page. Good for single‑page designs.

external.html

CSS in a separate .css file linked via <link>. Best for multi‑page websites – one file controls all pages.

color – text colour

background-color – background colour

font-size – text size (px, rem, em)

font-family – typeface

margin – space outside element

padding – space inside element

border – border around element

text-align – left, center, right

This paragraph uses inline CSS: yellow text, dark background, padding, rounded corners.

Write internal CSS to create a card with:

This course is 100% free. If it helps you, consider buying me a coffee.

☕ Buy Me a Coffee

Next lesson: CSS Box Model – margin, padding, border.

(Coming soon – check back or buy Pro Pack for instant access)