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.