Hello Dev Community! 👋
It is Day 4 of my journey toward mastering the MERN stack. For the past three days, I was busy building skeletons with HTML. Today, I finally started bringing those dry structures to life using CSS (Cascading Style Sheets)!
It felt amazing to move away from black text on a plain white screen and actually control how things look.
🧠 Key Learnings From Day 4
1. The Three Ways to Add CSS
I learned that there are three methods to attach styles to HTML, but one is clearly the professional standard:
- Inline CSS: Writing styles directly inside the HTML tag (makes code messy).
-
Internal CSS: Writing styles inside the
<style>tag in the HTML head. -
External CSS (The Winner): Creating a separate
.cssfile and linking it via<link rel="stylesheet">. I chose this method because it keeps my HTML clean and modular.
2. CSS Syntax & Basic Selectors
I mastered the basic anatomy of a CSS rule: Selector { Property: Value; }. I experimented with three primary selectors today:
-
Element Selector: Targeting tags directly (e.g.,
body,h1). -
Class Selector (
.): The most reusable way to style elements (e.g.,.btn-primary). -
ID Selector (
#): For styling a single, unique element (e.g.,#main-header).
🛠️ What I Actually Built / Styled
I took the semantic "About Me" page and navigation bar that I refactored yesterday and created an external style.css file for it.
Today, I didn't worry about complex layouts. Instead, I focused on the basics:
- Changed the background color of the body to a clean, modern off-white.
- Styled my headings with different font families and dark gray tones.
- Turned my navigation list items (
<li>) into an inline layout so they sit horizontally like a real navbar, instead of a vertical bulleted list.
🎯 My Goal for Tomorrow (Day 5)
Tomorrow, I'm diving into the absolute core of CSS layouts:
- Understanding the CSS Box Model (Margin, Border, Padding, Content).
- Learning how space works between elements so my layout stops overlapping.
💬 Let's Connect!
To the senior engineers: What is your favorite CSS font stack for clean, readable code? To fellow beginners: Did you start with Inline CSS or go straight to External files?
My styled code and repository are up to date on GitHub!
[Links in the Comments]
Keep coding! 🚀