title: How to understand this CSS inheritance (or override, selection)
body: <p><img src="https://i.stack.imgur.com/ecGnc.png" alt="From Chrome DevTool"></p>
  
  <p>I'm creating a Jekyll web page forked from <a href="https://github.com/johnotander/pixyll" rel="nofollow noreferrer">Pixyll</a>. First, I'm really new to CSS and anything related to HTML.</p>
  
  <p>Please refer to the screen capture. The bigger picture is <a href="https://i.stack.imgur.com/ecGnc.png" rel="nofollow noreferrer">here</a>, and the HTML/CSS parts are in the below. Everything is just as is, except for the red boxed content.</p>
  
  <p><img src="https://i.stack.imgur.com/Ldea6.png" alt="enter image description here"></p>
  
  <p>The original theme has the same styles for the title "Awesome title" and "About | Contact". <strong>I want to modify the weight and font face of the site tile only.</strong> </p>
  
  <p>The original HTML has <code>site-title</code> class for "Awesome title", but the CSS doesn't have specialized one for <code>site-title</code> class.</p>
  
  <p>I added <code>.site-title</code> 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 <code>.site_header</code>. From my programming background, "Awesome title" has the nearest <code>site-title</code> CSS while <code>.site_header</code> is at the outer scope.</p>
  
  <p>Questions:</p>
  
  <ol>
  <li>Why the outer <code>site-header</code> shadows the inner definitions of <code>site-title</code>?</li>
  <li>What would be the most elegant way to define its own font color etc to the site title?</li>
  </ol>