Maria D. Campbell

Removing caps from css headers

I was wrapping up my React Workflows without Create React App presentation using reveal.js for the ReactNYC meetup this Thursday, September 28, 2017, and was not pleased with the way some of my slide titles came out. Many of them were made up of code, and they looked awfully funny all in caps! I had never thought about changing the styling of css headers before. I just passively accepted that headers were in caps. But working on this presentation got me thinking, “There just has to be a better way!”. So after a bit of googling, I came across the first part of my answer:

lowercase makes all of the letters in the selected text lowercase.

uppercase makes all of the letters in the selected text uppercase.

capitalize capitalizes the first letter of each word in the selected text.

none leaves the text's case and capitalization exactly as it was entered.

inherit gives the text the case and capitalization of its parent.

However, just adding text-transform: none to your css headers is not enough. Nothing changed. So I looked a bit further, and this is what I came up with:

h3 {
    text-transform: none !important;

And it worked!

Funny how you can un-earth the most precious gems from the most unlikely places! So this is what I added to my reveal.js custom.css:

h6 {
    text-transform: none !important;

Now my code related headers look like what they are!

And btw, if you are giving a presentation any time soon, you should strongly consider using reveal.js. It’s so awesome!

Happy coding!

Categorized under:web-design
Discuss On Twitter