Basic CSS: Understanding 960gs base grid

Question

So, I thought I knew my basic CSS, but my brain is twisting right now. I want to implement the 960 grid system to my website, but before I do, I want to fully understand the principle of the code.

I've got two questions. Firstly, the css regulating the width of the columns. We have the parent class ".container" to the left, and two classes to the right, where the "column" class is a descendant selector of the "one" respectively "two" classes. Is this saying that the class "column" is 40px wide if it is contained within "one" AND "container"? Simply put: I don't really understand the relationship between these three elements.

.container .one.column          { width: 40px;  }
.container .two.columns         { width: 100px; }

Second question: When calling the classes in the HTML code, it seems that is done with the code

<div class=one column>Content</div>

right? But there is no class labeled "one column", only the descendant selector "column" to "one". What I am not getting here? Thanks a lot in advance.

BoltClock · Accepted Answer · 2012-10-28T18:29:25.340

1

In HTML, you can apply multiple classes to a single element. However the above syntax is incorrect; the value has to be encased in quotes:

<div class="one column">Content</div>

Without the quotes you end up with two attributes: class=one and column, which is different (and invalid HTML).

HTML doesn't have a notion of selectors, so the space between them is not a descendant selector, nor is the attribute value itself a selector. Instead, the space is merely a separator used to distinguish them as two separate classes.

Consequently, to answer both questions, the selector .one.column applies to an element that has both of these classes.

edited Oct 28 '12 at 18:29

answered Oct 28 '12 at 18:12

BoltClock

700,868
160
1,392
1,356

OK, but the exact same thing could have been accomplished by using only one selector, say .onecolumn, and then in the HTML:
Content
? – Oct 28 '12 at 19:07
Correct; however, the disadvantage is that you can't reuse the same class for styling different elements that share at leas one of the classes (although in the context of 960.gs, I suppose that wouldn't be of much use). There's also the topic of [specificity](http://www.w3.org/TR/selectors/#specificity), but that's a rather more complex issue. – BoltClock Oct 28 '12 at 19:19

score 0 · Answer 2 · answered Oct 28 '12 at 18:12

class attributes don't have any sort of CSS processing, like descendant selectors. The value of a class attribute is a space-delimited list of classes to apply to the element. So this div:

<div class="one column"></div>

has both the classes one and column.

Then, the CSS selector .one.column applies to elements who have both the classes one and column.

Basic CSS: Understanding 960gs base grid

2 Answers2