Hey Aidan.
Before you modify style.css – make a backup of it! Select all and copy into a text editor at the very least. That way you can copy it back and save it if you mess something up.
Option 1
In style.css do a search for .post-title and change the text-transform option to none instead of uppercase. This will reset it back to normal, when you add a new post you need to make sure you type the title in the desired case though.
Option 2
Another option is to set the text-transform to lowercase and then add an extra pseudo element to change the first letter only to uppercase.
So first modify the .post-title style to lowercase. You can see it in the first example below.
.post-title {
font-family: 'Abril Fatface', serif;
font-size: 3em;
text-transform: lowercase;
letter-spacing: 1px;
text-align: center;
}
Then add this directly below the .post-title code.
.post-title::first-letter {
text-transform: uppercase;
}
That should do what you need. The ::first-letter element will work for you because it’s being used on a block level element (the h2 tag) but it won’t work on an inline element, like an anchor tag.
Let me know how you go.
Good luck 🙂
Hi dodgyJim73,
Thank you so much for your quick response to my query. I went with option 1 as it seemed the simplest for me – I don’t mind changing the case manually, as well. Worked a treat.
Thanks again and all the best.
Cheers,
Aidan.
