Day 8 – CSS Basics Explained: Styling Your First Webpage

Hey everyone
Welcome back to my #100DaysOfCode journey!

Today’s milestone — Day 8 — was all about exploring CSS (Cascading Style Sheets) and learning how to make boring HTML pages look awesome.
If HTML is the skeleton, CSS is the skin, clothes, and confidence

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements appear on screen.
It defines colors, fonts, spacing, and layout, giving every website its visual identity.

Why CSS matters:

It separates design from structure, keeping code clean

Helps apply consistent styling across pages

Makes websites easier to maintain and scale

Linking CSS to HTML

Before adding styles, you must connect your CSS file to HTML using the tag in the

section:

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

That one line transformed my dull page into something alive
It felt like flipping the design switch ON 🎚️

⚙️ My First CSS Boilerplate

To start clean, I built a small boilerplate to reset browser defaults.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: azure;
}

It may look simple, but this sets up a perfect foundation for all styling work ahead.

Exploring Text Properties

This is where things got fun — experimenting with how text behaves and looks.

font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-style: italic;
color: blue;
text-align: center;
text-transform: uppercase;

Each property gives creative control — typography is where design meets personality.

Understanding IDs vs Classes

This was one of the “Aha!” moments for me.

ID → unique, used once per element (#idname)

Class → reusable for multiple elements (.classname)

Example:

#student {
  color: blue;
}

.college {
  color: green;
}

Think of IDs as roll numbers, and Classes as groups — simple but powerful.

Using Custom Fonts (@font-face)

One of my favorite CSS tricks is using custom fonts.
I downloaded a font and connected it like this:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf');
}

Now I can style my page with fonts that truly match the theme or mood of the project 🖋️

💬 Final Thoughts

Day 8 taught me that CSS is not just about colors or spacing — it’s an art form.
It lets you shape how users feel when they visit your website.

Next up → Selectors, Colors, and Layout Magic.
Can’t wait to take my designs to the next level!

💭 Question for you:
What’s your go-to CSS property when you start styling a new project? Drop it below 👇

Tags:

webdev #css #frontend #beginners #100daysofcode #learning #codingjourney