CODING CLUBHOUSE – Lesson 2: CSS Without Crying – Understanding How Styles Work

CODING CLUBHOUSE – CSS #001

Welcome to Lesson 2, where we finally get our hands dirty with CSS. If Lesson 1 was about setting up our tools, then this one is about understanding why CSS feels like a blessing and a curse at the same time.

NICKOLAI BRENNAN

nsbrennan1991@gmail.com

CSS is deceptively simple—until you try to center something. But fear not, by the end of this lesson, you’ll know how to link stylesheets, structure your CSS properly, debug issues like a pro, and make your tables look less like something out of 1998.

1. Introduction – Welcome to the Painful Beauty of CSS

CSS is often dismissed as “just making things pretty.” That’s a lie. CSS is what makes a website usable, responsive, and structured. Without it, everything would look like a drunken developer vomited HTML onto a page. A website without CSS is like a bar without booze—technically functional, but utterly lifeless.

You ever try to design a website for the first time? It starts simple—maybe a <div> here, a <p> tag there. Then, suddenly, you’re knee-deep in misplaced margins, rogue floating elements, and an entire layout that falls apart when resized. CSS can feel like it’s actively fighting you. That’s because it kind of is.

The reality is that CSS is not intuitive—it’s a language of positioning, inheritance, and specificity, and if you don’t understand those rules, you’ll end up screaming at your screen. But the good news? Everyone struggles with CSS at first. Even seasoned developers still run into the occasional “why the hell is this happening?” moment.

In this lesson, we’ll break down CSS into digestible pieces. We’ll go through how to link stylesheets, how the Box Model works, and how to stop CSS from ruining your day. By the end, you’ll have a basic table that doesn’t look like a high school PowerPoint project.

What You Need Before Starting:

✔ VS Code installed from Lesson 1.
✔ Live Server running (so you don’t have to refresh the page manually).
✔ A basic HTML file to experiment with.

Most importantly—patience. And maybe a drink. Because CSS is about to test your sanity.

2. Linking Your First CSS File – The “Handshake” Between HTML & CSS

Creating a CSS File

Open VS Code and create a new file called style.css. Place it inside a css/ folder for good practice.

How to Link a CSS File to HTML

Inside your HTML file (index.html), add the following in the <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Without Crying</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Welcome to CSS</h1>
</body>
</html>

🔴 Common Mistakes:

Forgetting to save the file (yes, really).
The path is incorrect (use DevTools > Console to check for errors).
You accidentally named your file styles.css but linked style.css.

Inline, Internal, and External CSS (Which One Should You Use?)

Inline CSS: Adding styles directly to an element using the style attribute. <p style="color: red;">This is red text.</p> 🔴 Why it sucks: Hard to maintain, breaks best practices.
Internal CSS: Defining styles inside the <style> tag in your HTML file. <style> p { color: red; } </style> 🔴 Why it still sucks: Styles are mixed with structure—bad for scalability.
External CSS: Keeping styles in a separate .css file and linking it (like we did above). ✅ Best practice! Keeps things organized and reusable.

3. The Fundamentals – Selectors, Properties, and Values

CSS works by selecting elements and applying rules to them.

Basic Structure:

selector {
    property: value;
}

Examples:

body {
    background-color: black;
    color: white;
}

h1 {
    font-size: 24px;
    text-align: center;
}

Common Selectors:

Selector	What It Targets
`p`	All `<p>` elements
`.classname`	Any element with that class
`#idname`	A specific element with that ID
`div > p`	`<p>` elements inside a `<div>`

4. Debugging Your First CSS Disaster

Using DevTools to Inspect Elements

Right-click on a page element.
Select Inspect (or press F12).
Navigate to the Styles tab.
Modify properties live to see the effects.

CSS Specificity & The Cascade

CSS follows a priority system for conflicting rules:

Inline styles (style="") – highest priority.
IDs (#idname) – stronger than classes.
Classes (.classname) – weaker than IDs.
Elements (p, div, h1) – lowest priority.

🔵 Tip: Use fewer IDs and more classes for flexible design.

5. CSS Box Model – Why Spacing Will Drive You to Drink

The Box Model determines how elements take up space. Every element is a box consisting of:

Content – The text or image inside.
Padding – Space between content and border.
Border – The actual outline.
Margin – Space between the element and others.

Example:

div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

🔵 Use box-sizing: border-box; to prevent weird spacing issues.

6. Making Your Page Look Less Like a 90s Website

Fixing Ugly Defaults

Reset margins/padding: * { margin: 0; padding: 0; box-sizing: border-box; }
Set a nice font: body { font-family: Arial, sans-serif; }

7. The First Real Project – Styling a Basic Table

Creating the Table

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

Adding CSS

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    border: 1px solid white;
    padding: 10px;
    text-align: left;
}

8. Wrapping It Up – What’s Next?

✅ You linked your first CSS file
✅ You styled text, colors, spacing
✅ You created a basic styled table

📌 Next Lesson: Lesson 3: Tables That Don’t Look Like Absolute Trash 🍻