With pure CSS, we can modify the style of page elements rendered in a browser.
However, for ribbon which has script behind, there would be dynamic effects when being clicked, which would influence the look of other parts of the page.
For example, I modify the suite bar and ribbon to make it look as below:
When click the “Page” tab, it becomes:
We can see that the ribbon now combines with the suite bar, however, the whole page looks not so comfortable, you will still need to keep on adjusting the style to make it look
harmony with other parts of the page.