How to understand this CSS inheritance (or override, selection)

Question

I'm creating a Jekyll web page forked from Pixyll. First, I'm really new to CSS and anything related to HTML.

Please refer to the screen capture. The bigger picture is here, and the HTML/CSS parts are in the below. Everything is just as is, except for the red boxed content.

The original theme has the same styles for the title "Awesome title" and "About | Contact". I want to modify the weight and font face of the site tile only.

The original HTML has site-title class for "Awesome title", but the CSS doesn't have specialized one for site-title class.

I added .site-title as shown in the red box. I was able to override font-family, font-size, and spacing, but the color and weight were inherited from .site_header. From my programming background, "Awesome title" has the nearest site-title CSS while .site_header is at the outer scope.

Questions:

1. Why the outer site-header shadows the inner definitions of site-title?
2. What would be the most elegant way to define its own font color etc to the site title?

Answer 1

1. I believe html tags take precedence over css classes. So a css definition will trump a .site-title css class definition.

2. You can try being a little fancier and combining the two..

   header .site-title {
     color: ;
     font-weight: ;
   }
   

this is just saying that whenever there is a site-title in a header, do this css.

Answer 2

The reason is that in the more specific definition .site-header a both a class and and element are involved, whereas in .site-title only a class is involved.

Use a.site-title instead and it should work as long as your definition comes after the one your want to override in the CSS source order.

This illustrates how it is calculated by the browser:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html