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

From Chrome DevTool

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.

enter image description here

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:

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

Solution

I believe html tags take precedence over css classes. So a css definition will trump a .site-title css class definition.
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.