-2

I'm quite a beginner to CSS and HTML as I'm trying to learn while making a webpage on Weebly

Anyways, I see a container div class after almost every div id. I was looking through the CSS and only saw a margin and width property for the div class by itself, but saw the container class as a child element after all id selectors. I was wondering what the container class actually does and why it is needed.

Example: 

.container {
    margin: 0 auto;
    width: 960px;   
}

#nav-wrap {
    background: url(nav-bg.jpg);
    box-shadow:0 1px 2px 1px rgba(0,0,0,0.25);
    position:relative;
    z-index:3;
}

#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
    width: 960px;
    box-shadow:none;
}

In the example above, which area does #nav-wrap indicate and which area does #nav.wrap .container indicate?

Thanks!

Edward Park
  • 1
  • 1
  • 3

2 Answers2

0

#nav-wrap will correspond to an html tag id as nav-wrap. nav-wrap container will be a compound styling; it will be an area where both the nav-wrap and container styles apply. Read the source code. If is your to tinker with, you might find drawing boxes with outline or changing div background colors instructive.

gladiola
  • 133
  • 5
0

At first in this code:

.container {
    margin: 0 auto;
    width: 960px;   
}

the margin: 0 auto means the object with class .container aligned center horizontally and the rest is history ...

And after that the difference between #nav-wrap and #nav-wrap .container:

Suppose we have an html code like that:

<div id="nav-wrap">
    ...
    <div class="container">
        ...
    </div>
    ...
</div>

In this code and with the style you wrote, the #nav-wrap .container selector applies styles to inner div tag only but the #nav-wrap applies it's styles to whole of the code. In other words the inner div inherits nav-wrap styles but not vice versa. I hope you understood ...

AmirHussein
  • 96
  • 1
  • 9