Difference between div class and div?


#1

I am not able to understand the main use of div for wrapping. I am not able to see the difference on webpage with and without wrap with just div or with div class

please somebody explain

regards
rohit


#2

I'm not to sure of the question, but I'll try to answer it based on how I understand it.

A div is a container, meant to hold other things. When you use CSS, and/or Jquery or something similar, to select a div without a class or id you affect all divs. Adding a class, or id, to a div allows you to select a specific div, or divs, to add things to. With just html, a div with a class and a div without a class look the same visually. Wrapping things in a div makes it easier to add things to specific parts on a page.


#3

so you are saying the use and difference between just div and div class will be cleared as I learn and use css coding . so should I wait till I start css and see the difference?

regards


#4

Yes, if a course is telling you to add a class to a div, then you will likely do some CSS related stuff to that specific div later in the lesson. I believe the Make a Website course does have you do things with CSS and classes, so the wait shouldn't be too long.


#5

Well, the problem is that if you have a bunch of div's:

<div></div>
<div></div>
<div></div>

and we want different styling for each div, how are we going to approach this? We can use classes:

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

now, we can use css:

.one {color: red}
.two {color: purple}
.three {color:green}

as you can see, class names start with a dot. I highly recommend the html + css course, before the make a website course, to get a better understanding of html and css


#6

Hi.

In addition to above question (which now was answered, thanks):

What is the sense of having several unspecified

s wrapped in each other as in Codeacademys example of the AirBnb page. Why not just one
if a standalone >div> cannot be distinguished from another?

I deliberately put a dot in each

to not make the coding appear as its browser text here

<.div class="learn-more">
<.div>
<.div>
<.div>
<.h3>Travel
<./div>

Thanks


#7

Codecademy decided to build the html structure first, you will add classes later to this divs, you are going to use them to build a grid system, little spoiler:

<div class="learn-more">
  <div class="row">
    <div class="col-md-4">
     <h3>heading</h3>
    </div>
    <div class="col-md-4">
     <h3>heading</h3>
    </div>
    <div class="col-md-4">
     <h3>heading</h3>
    </div>
  </div>
</div>

#8

Thank you steim94! :slightly_smiling: