Formatting HTML <div> Element with CSS

Introduction

In this tutorial, you will learn how to style the HTML Content Division element, namely <div> element, with CSS.
The <div> element can be used to structure the layout of a page and divide the web page into sections that can be styled individually.

In this training you will:

• Create and style <div> elements
• Learning to add other elements into <div> and style them

These skills will prepare you to use the <div> element as a layout tool when recreating your promotional website later in the series.

Discovering the <div> Element in Practice

Let's make a little application and try out how the <div> element works.
If there is any code left over from previous lessons in your styles.css file, delete all of it.
Then add this CSS rule for the <div> tag:

div {
 background-color: green; 
 height: 100px;
 width: 100px;
}

Save your styles.css file.
Then go back to your index.html file. Delete everything in it (leaving only this first line:
<link rel="stylesheet" href="css/styles.css">).

Then add the following codes:

<div></div>

Note that the <div> element has opening and closing tags, but the content is not required.
Save your index.html file and reopen it in your browser.

When your page loads, you will see a green box that is 100 pixels wide and 100 pixels tall as specified in the CSS rule.

You now have a style rule for your <div> element, and every <div> you add to your page will look the same.
But when you're making a real website, you don't really want all the <div> tags to look uniform. That's why developers use class to format different <div> elements differently.

To try this, delete the CSS rule you just wrote and add these three new CSS rules to your styles.css file:

.div-1 {
  background-color: blue; 
  height: 50px;
  width: 50px;
}
   
.div-2 {
  background-color: red; 
  height: 100px;
  width: 100px;
}
   
.div-3 {
  background-color: yellow; 
  height: 200px;
  width: 200px;
}

In this snippet, you created style rules for three different classes: div-1, div-2 and div-3.
Be careful, when defining class selectors in CSS, you need to prefix ..

Now save your styles.css file and go back to your index.html file.
Delete the <div> element you just created and replace it with three <div>.
Apply each of them by giving them the class names you defined in styles.css:

<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>

Here you can see that we added a class to each <div> tag.
In doing so, you added the attribute class and the corresponding class name to the opening <div> tag.

Save your file and reopen it in your browser.
You will see a screen similar to the following:

You will see three different <div> on your website.
Each one will appear in different colors and sizes according to the CSS rules assigned to it.

Also notice, each <div> starts on its own line. This is because <div> tags are block-level elements and this is their default behavior.

<div> Adding and Formatting Text

To put text inside an <div> box, you can add text between the opening and closing <div> tags.
Try adding some text inside each <div> element in your index.html file:

<div class="div-1">Mavi</div>
<div class="div-2">Kırmızı</div>
<div class="div-3">Sarı</div>

Save your file and reopen it in your browser.
You'll notice that text now appears inside each <div> box.

<div class="div-1"><h2>Mavi</h2></div>
<div class="div-2"><h3>Kırmızı</h3></div>
<div class="div-3"><h4>Sarı</h4></div>

Save your file and reopen it in your browser.
Text inside <div> boxes will now be formatted according to the default properties of the <h1> and <h4> tags.

You may have noticed that the <div> elements have changed their positions slightly.
This shift is due to the default margin values ​​of the <h2> and <h4> tags.
You will learn about margins in more detail in the CSS Box Model lesson, just ignore them for now.

If you want to format the text inside the <div> boxes, you can add text properties to the relevant class rules.
To do this, try adding properties such as the following to the rules in your styles.css file:

---

Result

In this lesson, you learned how to format the color and size of an <div> element.
You also saw how to add text inside <div> and how you can style that text with CSS rules.

When you start making a real website, you'll often use the <div> element to control the page layout.