I was wondering if you can help me with the following…

(1) How can I change the font size/color for all the different headers (for individual h1, h2, etc)?
(2) Where can I find the original full detailed css and php files so I can modify based on that? Or more generally, can you please let me know how I can best modify different elements (any best practices)?

Ps. I’m currently using the child theme.

Thank you very much!

Thanks for writing in!

For #1
You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

// Headings
// =============================================================================

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 1.25em 0 0.2em;
  font-family: $headingsFontFamily;
  font-weight: $headingsFontWeight;
  letter-spacing: -1px;
  text-rendering: optimizelegibility;  
  color: $headingsColor;

  small {
    font-weight: normal;
    line-height: 1;
    color: $grayLight;
  }

  a {
    color: $headingsColor;

    &:hover {
      color: $accentColor;
    }
  }
}

h1,
.h1 {
  margin-top: 1em;
  font-size: 400%;
  line-height: 1.1;
}

h2,
.h2 {
  font-size: 285.7%;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: 228.5%;
  line-height: 1.3;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

h4,
.h4 {
  font-size: 171.4%;
}

h5,
.h5 {
  font-size: 150%;
}

h6,
.h6 {
  font-size: 100%;
  text-transform: uppercase;
}

Note: the global heading colors can be edited in the customizer. Appearance > Customize > Typography > Headings > Headings Font Color >> Set to “On”, then select your color.

For individual, you can add the CSS rule color:#ffffff (change color value) to each “H” level from h1-h6.

For #2

It would be best that you try not to edit the original files. You can override them via style.css file in the child theme,
Checking the original file won’t help much as it is minified for performance.

So it would be best to modify the above code and paste it into your style.css file (child theme).

Hope this helps – thanks!

Let us know if you need anything else.

Thanks. Have a great day! 🙂

Thanks for updating the thread!

To change your heading size, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

h1,
.h1 {
  font-size: 40px;
}

h2,
.h2 {
  font-size: 34px;
}

h3,
.h3 {
  font-size: 30px;
}

h4,
.h4 {
  font-size: 26px;
}

h5,
.h5 {
  font-size: 22px;
}

h6,
.h6 {
  font-size: 20px;
}

Feel free to adjust the number of pixels for your preferred sizes.
Hope this helps. Kindly let us know.

Would you mind providing us with your website URL so we can take a closer look?

Thanks.