This content originally appeared on DEV Community and was authored by bblackwind
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 👇
This content originally appeared on DEV Community and was authored by bblackwind
bblackwind | Sciencx (2025-10-30T14:55:07+00:00) Day 8 – CSS Basics Explained: Styling Your First Webpage. Retrieved from https://www.scien.cx/2025/10/30/day-8-css-basics-explained-styling-your-first-webpage/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.