Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brad Lacke
7,438 PointsBest way to style specific characters separately?
Noticed in some of the examples Guil has different styling applied to certain characters or words in his paragraphs, which got me wondering what the best, most semantic way is to do that. I know about first-line and first-letter, but I'm referring more to words/characters that can't be styled by either of those and that you don't necessarily want to bold or emphasize in your html. I know <span> can be used for such things, but I'm wondering if there's a best practices or better way?
2 Answers
Todd Russell
6,007 PointsPlacing what you want styled in a span tag and giving it a specific class can let you style any portion, be it a character, word etc, throughout your page. Use of the class will allow you to repeatedly and consistently create that look through CSS.
<p>
You can easily select <span class="different-font">anything</span> throughout the page.
</p>
Select the text with the appropriate CSS
.different-font { ... }
A bit more target specific
span.different-font { ... }
Even more specifically targeted (maybe a bit of overkill)
p span.different-font { ... }
Hope this helps a bit more.
Robert Araujo
Courses Plus Student 2,222 PointsClasses are always a good option.