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 div inside div inside div inside div...never ending pool of divs. , have ids or classes. why done this. why not define properties in 1 place? significance of 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 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 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 long</a> established fact reader distracted readable content of page when looking @ layout.</p> <p><a href="#">the point of using</a> lorem ipsum has 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> 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> & 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>
let's use analogy.
lets designing layout of house.
you divide total area of house smaller sections (first level of divs). these sections different rooms (classes/ids give 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 kitchen need several items in own section/space in kitchen (second level of divs). items such 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 detailed in breakdown of elements in each section of house, thats how webpage designed divs , divs given classes , ids.
now lets rooms have same type of color, css, can apply common styling using:
.room{ //your common styles here background-color: white; } but lets design change comes around , want bedrooms painted blue instead of white. use second class bedroom change css bedrooms:
.room.bedroom{ background-color: blue; } edit:
people use divs since 1 of general elements in html. give no context of contain. in house, signify space in house. while other elements p, h1, h2, etc give context contain text.
Comments
Post a Comment