FNB App Academy Week 2: CSS Styling Guide for Beginners

Welcome to Week 2 of the FNB App Academy!
This week you move beyond structure and into styling — learning how to make your website look good using CSS.

If Week 1 felt like assembling the skeleton of a web page, this week is about giving it life, colour, and layout. But let’s be real — Week 2 is often where students hit their first real frustration.

Not because CSS is impossible — but because tiny mistakes can break everything, and it’s not always clear what went wrong.

We’re here to help make it make sense. Here’s everything you need to know.

🧩 What You’re Learning in Week 2

You’ll be introduced to:

What CSS is and why it matters
Internal vs external vs inline styling
Linking a CSS file to your HTML
Basic styling properties (colour, font, spacing)
The box model: margin, border, padding, content
Semantic HTML5 structure (<header>, <main>, etc.)
Responsive design with media queries

📚 Dive Deeper: Week 2 Lesson Recaps

If you missed either of the live sessions this week — or just want to revisit the key points — we’ve broken them down for you in full detail:

👉 Lesson 3 – GitHub, Version Control & Team Coding
Learn how to use GitHub like a pro. From creating repositories and branches to collaborating with pull requests, this guide teaches you how to manage your code like a real developer.

👉 Lesson 4 – Planning, Designing & Testing Your App
This lesson takes you through the software development life cycle — from concept to launch. Ideal for anyone building their first real-world app.

⚠️ Common Week 2 Frustrations (and How to Solve Them)

😩 Problem	✅ Fix
My styles aren’t showing at all	Check if your CSS file is linked correctly (see next section).
Nothing changes when I save	Try refreshing your browser or clearing the cache.
Colour or font changes don’t apply	Check the selector – did you target the right class or element?
I used `style.CSS` but it’s not working	File extensions are case-sensitive. Rename it `style.css` (lowercase).
I saved the CSS file, but it won’t link	Is your folder structure correct? See example folder below.

📁 Correct Folder Structure (Example)

Here’s how your files should be organised:

markdownCopyEditMyFirstWebsite/
├── index.html
└── css/
    └── style.css

To link your CSS properly in HTML:

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

Make sure the href matches the path exactly.
Avoid typos like styles.css, Style.css, or missing /css/.

🖼️ Visual: Linking Your CSS in VS Code

htmlCopyEdit<head>
  <title>My Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>

In style.css:

cssCopyEditbody {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

🛠️ Troubleshooting: Why Your CSS Might Not Work

If your styles aren’t showing:

🔍 Check 1: Is the CSS file saved in the right folder?

Your index.html might be in a different directory than you think. Recheck the folder structure.

🔍 Check 2: Are you linking it with the right path?

Relative paths are tricky! css/style.css means:

“Go into the css folder, then load style.css.”

If you just wrote style.css but it’s in a folder, it won’t work.

🔍 Check 3: Is your browser caching the old version?

Try:

Pressing Ctrl+Shift+R (hard refresh)
Right-click → Inspect → Network tab → Check if style.css loaded

💡 Class vs ID: Quick Explainer

Selector Type	Example Syntax	When to Use
Class	`.menu`	For styling multiple elements
ID	`#logo`	For styling one unique element
Tag selector	`h1`, `p`	For applying styles to all of that tag type

✅ Example:

htmlCopyEdit<p class="intro">Welcome!</p>

cssCopyEdit.intro {
  font-size: 18px;
  color: #333;
}

🧠 Semantic HTML Tags Introduced This Week

You’ll be using HTML5 layout tags to better structure your website:

Tag	Use for…
`<header>`	Page or section heading
`<nav>`	Navigation menus
`<main>`	Main content area
`<section>`	Logical content grouping
`<footer>`	Bottom section, copyright etc

These improve accessibility and help Google understand your site structure.

📱 Intro to Media Queries (Responsive Design)

Media queries help you change how your site looks on different screen sizes.

Example:

cssCopyEdit@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

That changes the background only if the screen is 600px wide or less (mobile).
Don’t stress too much about mastering this now — just understand the concept and try it out.

👇 What You Can Do Right Now

Link your CSS properly
Use external CSS (not inline, unless you’re testing)
Start experimenting with fonts, colours, and layout
Don’t worry about being perfect — just practice and play

❤️ You’re Not Alone

If your screen turns pink when it shouldn’t — or doesn’t turn pink when it should — welcome to learning CSS.

Everyone messes up paths, brackets, and selectors at first.
What matters is that you’re showing up and figuring it out. Each bug is progress.

📦 Bonus: Starter Template You Can Use

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <main>
    <p>This is where I learn to style with CSS!</p>
  </main>
  <footer>
    <p>&copy; 2025 FNB App Academy</p>
  </footer>
</body>
</html>