Before diving into advanced topics , I first needed to get my basics right. Today, I explored the fundamentals of CSS—from selectors to colors, fonts, and the box model. And, of course, I ran into struggles! Here’s what I learned, the problems I faced, and how I solved them, all while building some mini-projects.

1️⃣ What I Learned Today

How to link CSS to an HTML file.
Different types of CSS selectors.
Changing text styles with fonts, colors, and sizes.
Understanding the box model—margin, padding, border, and content.
How display properties affect element behavior.

2️⃣ My Mini-Projects & Challenges

Project 1: A Simple Card 📇

I wanted to create a basic card with my name and a short bio. This helped me practice selectors and text styling.

❌ Problem 1: My CSS wasn’t applying to my HTML! I linked my CSS file using <link> in the <head>, but nothing changed on my page.

✅ Solution: I had written href="style.csss" instead of href="style.css". A tiny typo cost me 10 minutes of debugging!

Project 2: A Heading with Fancy Fonts ✍️

I tried changing the font and color of my headings to make them stand out.

❌ Problem 2: My custom font wasn’t working! Even after setting font-family: 'Poppins', sans-serif;, the text still looked plain.

✅ Solution: I forgot to import the font from Google Fonts! Adding this line in <head> fixed it:

Project 3: A Button That Actually Looks Like a Button 🔘

I designed a button with padding, margin, and borders to make it clickable and visually appealing.

❌ Problem 3: My button was squished! The text inside my button was sticking to the edges, making it look weird.

✅ Solution: The padding property fixed it:

button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
}

Project 4: Understanding the Box Model

I created a colored box with some text inside to play around with margins and padding.

❌ Problem 4: My box wasn’t centered! I tried margin: auto; , but it didn’t work.

✅ Solution: I realized I needed to set a width first. This worked perfectly:

.box {
width: 300px;
margin: auto;
padding: 20px;
border: 2px solid black;
}

3️⃣ Resources I Used

MDN Docs on CSS Basics
Google Fonts for typography
Lots of trial and error!

That’s it for today! More learning ahead.

Getting Started with CSS: My Journey into Styling the Web!

Subscribe to my newsletter

Yuvraj Bhanot

Yuvraj Bhanot