How to target the "site name" within a css file How does one target the site name (the one that appears immediately below the site logo) within a css file? I would like to both change the color of the site name text in addition to centering the site name (for some reason it's by default confined to about a third of the header space on the left). Essentially, how can I style the space above the menu region if it is not part of the header region?

Any help would be much appreciated. If you find what I've written to be vague I can certainly try to clarify.
It depends on the theme that you're using.

As Patrick Ryan said " You should look into using firebug in firefox or inspect in chrome or developer tools in IE. These will all easily show you what css class you need to target to make these and any other changes."

I personally use Chrome so in order to do that, just right click on the site name. Here's a preview in chrome.



you can use #site-name or #name-and-slogan in this theme. But this will change per theme. The same process can be done if you want to align the text or make it wider.

The great thing about using these development tools is that they allow you to add CSS right on the browser. you'll see that on the right side. Just double click.



If you're using a subtheme of Zen, for example, check the templates in the zen folder to see the page.tpl.php file for the template of the page.

I touch on using templates in Zen subthemes in my slides here (slide 44 onwards): http://www.slideshare.net/japodomingo/theming-with-zen

If you know how to use templates, you can manipulate the display any way you want. :) Here's a brief overview of the templates. https://drupal.org/node/190815

I hope this helps.