Introduction to Divs: CSS/HTML Crash Course (Free Tutorial)

Divs are an important part of every HTML page. A div is a container that can hold other HTML elements inside of it. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Divs are used to divide HTML into different sections. The sections can then be styled using CSS. You can change different things, including font style and background color. To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file. Feel free to rename the title “Divs!” by replacing JS Bin with Divs!

As shown in the following code, to create a div, use opening and closing div tags within the body tag.

  <div>

  </div>

You can put a variety of items in a div. For this example, let’s put a header, paragraph, and link into the div.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>

h1 is the biggest header size. The p tag creates a paragraph. The a tag creates a link. Regarding the link, the web address to which you want the list item to link goes in the quotation marks. For our example, # is a placeholder.

Furthermore, we will make two more divs.

  <div>
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div>
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div>
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Before we style the divs, we need a way to identify them. When we select a div in CSS, we need to know which div we’re targeting. If you call div like in the following CSS code, it will target every div on the page.

div {

}

For instance, to make the text color of every div yellow, code:

div {
color: yellow;
}

We usually want to be more specific than that. Therefore we can use classes to distinguish between divs. Classes are used in HTML, and then you can call the classes in CSS. They are a way of identifying specific elements on a page. Let’s assign our three divs the classes div-1, div-2, and div-3.

  <div class="div-1">
    <h1>Hi there!</h1>
    <p>I'm a paragraph!</p>
    <a href="#">Test link 1</a>
  </div>
  <div class="div-2">
    <h3>I'm an H3</h3>
    <p>I belong to div #2</p>
  </div>
  <div class="div-3">
    <h5>I am H5!!!</h5>
    <p>I'm in div 3!</p>
  </div>

Note that on an actual website with many divs, you want to name their classes more descriptively. Let’s say we want to modify only div-1. Open the CSS tab. To select the class in CSS, use the following format:

.div-1 {

}

Now we can style that div, such as add a border and change the text color and alignment.

.div-1 {
border: 1px solid black;
color: grey;
text-align: center;
}

To select and modify an item within div-1, type:

.div-1 a {
text-decoration: none;
color: lightblue;
<code}

The preceding code modifies only the a tag within div-1. Now that we’ve modified div-1, why don’t we modify div-2?

.div-2 {
font-style: italic;
border: 2px dashed black;
width: 50%;
}

In the preceding code, we changed the div’s font style to italic and border to 2px dashed black. We also set the width to be 50% of the size of the window. This is useful for responsive web design because the div width will resize as the window resizes.

For div-3, we can experiment with changing the background color and width.

.div-3 {
background-color: grey;
width: 25%
}

That was an introduction to divs in CSS and HTML. A large part of learning to code is experimentation, so play around with creating and modifying more divs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Display Property: CSS/HTML Crash Course (Free Tutorial)

The topic of today’s article is the display property in CSS. It lets you customize your website to look exactly how you want it to. If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

In HTML, each element is treated like its own box. For example, if you create a div and put some paragraphs or lists in it, that container and every item in the container is its own box.

This is important to know because, when styling your page, you will want to know what the boxes are and move them around. For instance, you will want to be able to say things like “put this beside this” and “put this on a new line”. These are important properties of HTML that CSS manipulates with the display property. This is known as the CSS Box Model.

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

In the body tag, we will make three separate divs and then do some styling for the display property of those divs. A div is an empty container into which you can put items.  Let’s put one list into each div. First create a list of dogs:

  <div class="dogs">
    <ul>
      <li>Golden Retriever</li>
      <li>Labradoodle</li>
      <li>Beagle</li>
    </ul>
</div>

You don’t have to have a class, but since we are manipulating different divs, classes allow us to stylize each list separately. <ul> makes the list unordered. Below that list, create one for cats:

  <div class="cats">
    <ul>
      <li>Domestic Shorthair</li>
      <li>Calico</li>
      <li>Tabby</li>
    </ul>
</div>

Finally, let’s make a list for a navigation bar. Use a tags to insert links into the menu.

  <div class="links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About me</a></li>
    </ul>
</div>

The web address to which you want the list item to link goes in the quotation marks. Do not forget to close your tags.

Now open the CSS tab so that you can modify the display properties. First we will target the dogs div. Because we gave it the class name “dogs”, we can target the class name to apply styling to the items within the class. To select the dogs div, code the following in CSS:

.dogs {

}

To make each element in the three lists a block box, use the display property by coding the following:

.dogs {
display: block;
}
.cats {
 display: block;
 }
 .links {
 display: block;
 }

Within the parent container, the body, each list will sit on its own line. In the Output, you won’t notice a difference because display: block is the default behavior of the types of lists we created.

However, you don’t always want to use this type of display. For instance, you may want to have the dogs and cats lists on the same line. To achieve this, use the inline-block property, which is shown in the following box of code.

.dogs {
display: inline-block;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

Now the dogs and cats lists will be side by side in the Output, as long as there is enough room in the Output tab. This intelligent behavior is good for responsive web design because nowadays, a lot of traffic to sites is from mobile browsers.

There are other displays. One example is none, which makes a class disappear from the page:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

This comes in handy if, for instance, you use JavaScript to create a button and you want a list to appear only once a button is pressed.

Furthermore, the display inline makes elements sit on the same line as other elements without formatting them like a block:

.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

To apply inline on all three divs, use the format shown in the following code.

div * {
display:inline;
}
.dogs {
display: none;
}
.cats {
display: inline-block;
}
.links {
display: block;
}

You can use display on any CSS selector element, such as an image. A large part of learning to code is experimentation, so play around with creating more classes and IDs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes