Zen sub-theme CSS class confusion <div class="region region-sidebar-first column sidebar">

I created a Zen sub-theme called mytheme and copied the contents of /sites/all/themes/zen/STARTERKIT/css to /sites/all/themes/mytheme/css/, and assigned the Navigation block to the First sidebar region.

I want to know which CSS file controls the styling of the Navigation menu, so I loaded the site in my web browser (Google Chrome 7.0.517.44).

The Navigation block is contained in a div with class="region region-sidebar-first column sidebar". I highlighted this code using Firebug, which tells me that the class is defined in: http://www.mysite.dev/sites/all/themes/mytheme/css/layout-fixed.css.

There isn't a CSS class called region region-sidebar-first column sidebar in layout-fixed.css, but there is a class called .region-sidebar-first, which I assume are relates to 'region region-sidebar-first column sidebar'.

What characters are valid in CSS class names? SO topic says "name must start with an underscore (_), a dash (-), or a letter(a–z), followed immediately 1 by a letter or undersco开发者_JAVA百科re, and then any number of dashes, underscores, letters, or numbers", which makes sense.

But how does .region-sidebar-first end up as 'class="region region-sidebar-first column sidebar"' in the HTML source code? This is confusing for beginners like myself, and if anyone can explain the logic behind this naming convention, that would be great.

---

Those are multiple classes applied to the same element. You separate multiple classes with a space. So, technically, there are four classes applied there.

---

You can give an element several classes, seperated with spaces. Your element has four classes in total: region, region-sidebar-first, column and sidebar.