When I first started out with web development, I thought my biggest challenge would be JavaScript (not saying JS isn't still a handful) but then came so many bad reps and horror stories about CSS.
Despite all these, I took a deep dive into Frontend development, and boy, did CSS do a number on me. Nothing ever worked out well, and do not even get me started on centering a div. It was a nightmare.
But, then, here’s what I realized, CSS wasn’t the Problem, the problem was that I didn’t understand the basics, and once I got the hang of them, styling kind of became easier and surprisingly fun.
In this article, I would walk you through three fundamental concepts that will set the stage for mastering CSS:
- CSS Selectors
- Box Model
- Positioning and Layout
- CSS Selectors: CSS Selectors are tools that let you target certain HTML elements that need styling.
Let’s explore some of the commonly used selectors:
A. Universal Selectors: This is used to target every element on a page. It is represented by the asterisk symbol(*) and is usually used for global resets or to apply base styles.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
B. Class Selectors: This is used to select HTML elements with a specific class attribute value. To select elements with a specific class, write a period(.) followed by the value of the class attribute.
<div class="box"></div>
.box{
background-color: teal;
padding: 30px;
border-radius: 10px;
border: 2px solid;
text-align: center;
}
C. Type Selectors: This is used to target all elements of a specific type. It is also called the element selector.
p{
text-align: center;
font-size: 1.2rem
}
Use case: This applies a uniform style to all <p>tags.
D. Attribute Selectors: This selector targets HTML elements based on their attributes and values.
input[type = "text"] {
background-color: cyan;
color: gray;
}
E. Pseudo-classes: These select elements for styling based on their state.
a:hover{
color: blue;
transition: ease-in 0.5s;
}
There are other useful CSS Selectors but these would do for now.
- The Box Model
The Box Model is essentially a box that wraps around HTML elements, basically every element in HTML is just one big (or small) rectangular box. What the box model does is to help control how much space each box occupies and how they interact with other elements.
Each box has four main parts:
1. Content: This is what is inside the box – texts, images and other elements.
2. Padding: This is the space between the content and the edge of the box.
3. Border: This is the edge of the box.
4. Margin: This is the space outside the border which separates this box from other boxes.
Here’s an illustration explaining the Box Model
Note: The dashed line is the border of the box.
The Box Model is essential for anything you want to do in CSS, from positioning elements to managing spacing. For instance, i drew the Box Model illustration using just HTML and CSS to show how the different layers work together.
Here's the code that helped me bring the illustration to life:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualizing the CSS box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="margin">
<p>The Margin</p>
<div class="border">
<p>The Border</p>
<div class="padding">
<p>The Padding</p>
<div class="content">
<p>The Content of the box</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: bisque;
color: white;
display: grid;
place-content: center;
height: 100vh;
}
.other-box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 15px;
}
.border {
border: 2px dashed black;
padding: 20px;
border-radius: 10px;
background-color: rgb(255, 255, 255);
color: black;
text-align: center;
}
.margin {
background-color: teal;
margin: 50px;
border: 1px solid goldenrod;
border-radius: 10px;
padding: 30px;
text-align: center;
color: black;
}
.padding {
background-color: teal;
padding: 30px;
border-radius: 10px;
border: 2px solid;
text-align: center;
}
.content {
background-color: rgb(255, 255, 255);
padding: 20px;
color: black;
text-align: center;
border: 2px solid;
border-radius: 10px;
}
p {
font-size: 20px;
margin-bottom: 10px;
}
WRAPPING UP(it's about time)
CSS may seem like a lot at first, but once you grab the basics you are ready to conquer the world(your world, at least).
Here's the key takeaway from this article: CSS is not hard, you just need to focus more on the fundamentals.
Keep learning and most importantly keep practicing, and soon, you'll be styling web pages like a pro.
What's Next?
Now that you have learned the basics of CSS Selectors and the Box Model, you are one step closer to mastering CSS, But there's more to explore.
In the Next article, we'll dive into CSS positioning and Layout Techniques like Flexbox and Grid.
Happy coding!!!!
Top comments (11)
First of all, I read this entire article, it was engaging, it held my attention till the very end, so alley your fears you are a great writer! Secondly, you have convinced me that actually, CSS is actually not that hard! Lastly, I look forward to more articles from you, this was a great read!
Thank you so much, i would not disappoint.
This is a really nice article.
I'm actively waiting on your next article on CSS flexbox and Grid.
Top work all the same dev🚀✅️
Thank you, I'm glad you liked it.
I love the title of this article, MJ. 🤩😂
CSS is NOT Hard!
Great write up. Even more interesting that it’s just the part 1! We await part 2!
Well done, MJ. 👏
Thank you, Stanley.
When I started with CSS, I thought centering a div was some sort of dark magic. But you're so right once the basics click, everything starts making sense and even becomes fun!
Great write up, I like the tone you use, it felt like talking to you in person, now I know I need to go back to the basic of css to truly master it
Thank you
This is a great write up MJ. I'm actually having issue with CSS but I will take it one step at a time and I know it will be conquer 😁 it gat nothing on me
Thank you. Yeah, Taking one step at a time usually does the trick. All the best!!!