How to customize color of words in ribbon in Sharepoint (2013)?

Question

How do I customize the colors for the words "BROWSE" and "PAGE" only? These words are in the ribbon at the top left corner of the SharePoint site.

I tried using the method of editing a Palette(number).spcolor file in SharePoint Designer 2013, which can be found under the path "../../_catalogs/theme/15", but I realized that editing the words "BROWSE" and "PAGE" from there, will cause all the fonts in my entire site to be affected. I only need those 2 words to have a different color.

Answer 1

You can use the following CSS code to change it:

<style>
#Ribbon\.Read-title > .ms-cui-tt-a > .ms-cui-tt-span {
    color: red!important;
}

#Ribbon\.WikiPageTab-title >.ms-cui-tt-a > .ms-cui-tt-span {
    color: red!important;
}
</style>

If you want to change that on the entire site, you can add the code into the master page of the site.