CODEWITHSUNDEEP
htmlcssweb
Mark S
Mark S

Reputation: 347

Beginner in html/css: Why do web pages have so many levels of divs?Why not define all properties in one class?

In every web page there is a div inside a div inside a div inside a div...never ending pool of divs. and they all have their ids or classes. Why is it done like this. Why not define all properties in one place? What is the significance of this technique?

    <div id="body-top">
      <div id="body-bot">
        <div id="about-box">
          <h2><b>About</b> our music</h2>
          <img src="images/pic_1.jpg" width="112" height="92" alt="Pic 1" class="left" />
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
            <li>Cras semper erat ut mi. </li>
            <li>Proin lobortis ipsum ac erat. </li>
            <li>Morbi nec enim vitae est posuere luctus.</li>
          </ul>
        </div>
        <div id="express-box">
          <h2><b>Express</b> Learning</h2>
          <img src="images/pic_2.jpg" width="112" height="92" alt="Pic 2" class="left" />
          <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="narrow-text">
            <p><a href="#">It is a long</a> established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
            <p><a href="#">The point of using</a> Lorem Ipsum is that it has a more-or-less normal distribution of letters...</p>
          </div>
          <p class="more"><a href="#"><img src="images/more.gif" width="68" height="14" alt="More" /></a></p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div id="foot">
    <div id="foot-top">
      <div id="foot-bot">
        <div id="what-box">
          <h2><b>What</b> we offer</h2>
          <img src="images/pic_3.jpg" width="86" height="77" alt="Pic 3" class="left" />
          <ul>
            <li><a href="#">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Cras semper erat ut mi. </li>
            <li>Proin lobortis ipsum ac erat. </li>
            <li>Morbi nec enim vitae est posuere luctus.</li>
          </ul>
        </div>
        <div id="news-box">
          <h2><b>News</b> &amp; events</h2>
          <img src="images/pic_4.jpg" width="86" height="77" alt="Pic 4" class="left" />
          <ul>
            <li><a href="#">Nullam</a> scelerisque consequat libero. </li>
            <li><a href="#">Vivamus</a> mattis augue ut augue.</li>
          </ul>
          <p class="more clear"><a href="#"><img src="images/more.gif" width="68" height="14" alt="More" /></a></p>
        </div>
        <div class="clear"></div>
      </div>
    </div>

Upvotes: 1

Views: 221

Answers (3)

stackErr
stackErr

Reputation: 4170

Let's use an analogy.

Lets say you are designing the layout of a house.

You divide the total area of the house into smaller sections (first level of divs). These sections are your different rooms (classes/ids you give to divs).

<body>
    <div class="bedroom room"></div>
    <div class="bedroom room"></div>
    <div class="kitchen room">
    </div>
    <div class="washroom room"></div>
</body>

Then lets say the kitchen will need a several items in it that get their own section/space in the kitchen (second level of divs). Items such as the fridge, sink, stovetop, etc (classes/ids). 

        <div class="kitchen room">
            <div class="kitchenItem" id="fridge"></div>
            <div class="kitchenItem" id="stove"></div>
            <div class="kitchenItem" id="sink"></div>
        </div>

You can go as detailed as you like in your breakdown of the elements in each section of the house, similarly thats how a webpage is designed with divs and those divs are then given classes and ids.

Now lets say all your rooms have the same type of color, so with CSS, you can apply this common styling using:

.room{
    //your common styles here
    background-color: white;
}

But lets say now a design change comes around and you want your bedrooms to be painted blue instead of white. So you use the second class bedroom to change the CSS for all the bedrooms:

.room.bedroom{
    background-color: blue;
}

EDIT:

People use divs since they are one of the most general elements in HTML. They essentially give no context of what they contain. Just like in the house, they just signify space in the house. While other elements like p, h1, h2, etc give a context that it will contain some text.

Upvotes: 5

Janis Jansen
Janis Jansen

Reputation: 1025

Basically it's because maybe you want to have 2 Divs like

<div class="A">
 <div class="B">
  <p> content
 </div>
</div>

But now DIV B should have other properties than DIV A, for example the width, or background color. If you use this structure for all HTML Documents, and if you always code like this style, with this insets, it's easy to see wich DIV is where on your Page, and what its for. That's not that clear with only a few DIVs.

Upvotes: 1

Seabizkit
Seabizkit

Reputation: 2415

Html and therefore divs are for styling/visual look.

Each look can look as simple or as complex as one can imagine...

Therefore to create this it requires different techniques to archive these looks.

Nesting devs is to archive a look and nothing to do with holding properties.

Hope that makes sense... but that is the simplest way to explain it.

Upvotes: -1

Related Questions