🧠 Day 8 – Stepping into CSS: Styling the Web!
👉 Currently an ABAP developer switching lanes into MERN full-stack 🚀. Writing blogs to document my journey, share learnings, and stay consistent. Chai lover ☕, gamer 🎮, streamer 🎥 & YouTuber 🎬.
Hey everyone 👋,
Today marks Day 8 of my web development journey, and trust me, things are getting more colorful (literally). I officially started learning CSS — Cascading Style Sheets.
🎨 What is CSS?
CSS stands for Cascading Style Sheets, and it’s the magic that brings life to our dull HTML pages. If HTML is the body, CSS is the outfit — it gives your webpage color, shape, and style.
I also learned why CSS is important — it helps separate content from design, making websites cleaner, more efficient, and way easier to maintain.
🔗 Connecting CSS with HTML
Before writing any CSS, I learned how to link my CSS file with an HTML file using the <link> tag in the <head> section.
I even took a screenshot of it — because that small line of code finally made my webpage look alive.
<link rel="stylesheet" href="style.css">
⚙️ My First CSS Boilerplate
Here’s the simple boilerplate code I started with — it basically resets all the default browser styling and sets up a clean base for every project:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
width: 100%;
background-color: azure;
}
I know it’s simple, but for a beginner, this felt like unlocking the first door to web design!
✍️ Text Properties in CSS
Next, I explored text properties — and this is where things really got creative.
Here’s what I practiced:
font-size– controls how big or small text appears (measured in px for pixels).font-family– changes the style of the text (like choosing between Arial or Poppins).font-weight– defines the thickness of the text.font-style– for making text italic or normal.color– well, self-explanatory 🎨text-align– aligns the text (left, right, center).text-transform– used to change case (uppercase, lowercase, capitalize).
🆔 IDs vs Classes
This concept really clicked for me once I related it to real life 👇
ID is like a student roll number — unique to each person.
Class is like a college name — many students can belong to the same class.
In CSS, IDs are called using # and Classes using .
Example:
#student{
color: blue;
}
.college{
color: green;
}
I even made a screenshot for this part — because that’s where I finally understood the logic.
🔤 Custom Fonts with @font-face
Finally, I learned how to use custom fonts downloaded from websites like Google Fonts or DaFont.
Using the @font-face rule, I can now bring any typography I like into my project — no more boring default fonts! 😎
Example:
@font-face {
font-family: 'MyFont';
src: url('myfont.ttf');
}
💬 Final Thoughts
Day 8 was truly fun — I realized CSS isn’t just about colors and fonts; it’s about expressing creativity through code.
Next up, I’m planning to dive deeper into selectors, colors, and layout techniques — so stay tuned for more!
If you’re learning CSS too, drop a comment and share your favorite CSS property 💬
