When I started to style my CSS, I began to wonder why I couldn't get things to align the way I wanted. That's when I remembered, "Ah! div classes!"
First, let's talk about what DIVs are and what they do. DIV is short for division. DIVs are like containers that store other elements inside of them.
I think of these internal elements as a unit working together, you know because they're called the DIVISION!
We can create DIVs in HTML and Javascript, not in CSS. You use CSS to style the DIVs. If you have an empty DIV nothing will be displayed.
DIVs seem complicated in the begging, keep in mind that they are simply containers. I'll do my best to explain to you DIV classes, and how they work with CSS.
When you create a DIV you want to type the following
div class = "divName"
The class ="divName" gives a name to the DIV.
It can be anything you want, ensure you use camel case. So, the DIV itself is a box and the class is the label on that individual box.
This name does not appear in the browser, it is used for selecting the DIV.
Let practice together
Copy this code into a .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV Practice</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>DIV Practice</h1>
</header>
<main>
</main>
<footer>
</footer>
<script src="main.js"></script>
</body>
</html>
Lets add the div class below between main
<div class ="toyBox">
<p>Awesome Toy Box</p>
</div>
If we bring up the webpage in the browser we should see this.
and let us add
<div class ="bookcase">
<p>Books</p>
</div>
under the toyBox div
Remember DIV classes are containers or boxes. So we can think of this as stacking boxes on top of each other and they will appear how they are stacked.
Let's add some toys and books to our bookshelf using p. Add as many as you like, here's an example.
<div class ="bookcase">
<p>Books</p>
<p>Harry Potter and the Chamber of Secrets</p>
<p>The Old Man And The Sea</p>
<p>The Firm</p>
</div>
After adding our toys and books, our page looks pretty stale, to say the least. This is where the true power of using DIVs shows. In the CSS styling.
Let us go to our styles.css file and add
.toyBox {
color: blue;
}
This changes all the text elements in the div class toyBox to blue.
Move the div class bookcase so it's inside our toy box.
paste your bookcase after the last p in your toy box.
example
<p>Last Toy</p>
<div class ="bookcase">
<p>Books</p>
<p>your books<p>
</div>
</div>
</main>
ALL THE TEXT IS BLUE! That's because what we just did was "nest" a DIV inside of another DIV.
The rule is the parent's properties will affect the child. What happens to the one on the outside affects every single one on the inside.
Now that div class bookcase nest inside the div class toybox, it is effect by whatever is done to the toybox in CSS.
Add the code below to styles.css
main {
display: flex;
justify-content: center;
}
This moves all of the elements inside main to the center of the screen. The toyBox nest inside of the main causing it to be affected by the CSS styling. Remember the bookcase nest inside of the toyBox so its affected too.
add to the CSS
.bookcase p {
color: rgb(23, 103, 54);
}
Now the books are green. How? Everything in the toyBox should be blue.
By selecting with .bookcase p (the p being ALL of the p elements inside of the div class bookcase)
Selecting allows you to use CSS to edit specific elements inside of DIVs.
I hope my first blog post helped you gain a better understaning of DIVs and how they work with CSS.
Thanks for reading and coding along!
Top comments (0)