Styling Bold and Italic Fonts Using CSS | AJM Learn
Give the font styles on your website more variation with these CSS tricks for bold and italic text. With these tricks, you can basically turn bold and italic font styles into new completely custom font styles. Let me show you!
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CODE:
CUSTOMIZING BOLD FONT STYLE
// Change color of bold text site-wide//
b, strong {
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}
// Change color of bold text in one block //
#BLOCK-ID {b, strong {
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}}
// Change color of bold text in one section //
SECTION-ID {b, strong {
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}}
CUSTOMIZING ITALIC FONT STYLE
// Change color of italic text site-wide //
em{
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}
// Change color of italic text in one block //
#BLOCK-ID {em{
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}}
// Change color of italic text in one section //
SECTION-ID {em{
color: #7cccbd;
letter-spacing: .1em;
text-transform: uppercase;
}}
You can remove the italic styling by adding this inside the brackets:
font-style: normal !important;
KEEP CUSTOMIZING!
I’ve shown how to change a few styles above, but there’s so much more you can do. Here’s a few other things you can alter:
font-family
font-weight
font-size
text-decoration
Lastly, one of my favorite ways to use this is by placing the font in a container:
// For italics //
em {
font-size: 12px;
padding: 5px 16px !important;
color: #ffffff;
border-radius: 20px;
background: #319aab;
font-style: normal !important;
}
// For bolds //
b, strong {
font-size: 12px;
padding: 5px 16px !important;
color: #ffffff;
border-radius: 20px;
background: #319aab;
font-style: normal !important;
}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.