I’m not usually one for super bold statements, but I’m gonna go all out and say that text is the most important part of a blog design. Have you ever visited a site with text that blends into the background so much that you have to tilt the screen of your laptop to read it? Not good. Having clean, readable text is key for the success of any blog. It’s also important to know how to fancy up your text a bit even if it’s just by making it bold or underlining it. This will help create a hierarchy, distinguishing your blog elements from one another (post titles, sidebar headings, etc).
Here are 12 CSS attributes (with examples) that will help you style the text of your blog:
1. font-size – size of text {font-size: 12px;}
2. font-family – typeface of text {font-family: helvetica, sans-serif;}
3. font-weight – heaviness of a font {font-weight: 500;}
4. font-style – style of a font {font-style: normal;}
5. text-align – alignment of text {text-align: center;}
6. text-indent – indentation of text {text-indent: 25px;}
7. text-transform – capitalization of text {text-transform: uppercase;}
8. text-decoration – decoration of text {text-decoration: underline;}
9. letter-spacing – spacing of letters {letter-spacing: 1px;}
10. line-height – line height in a paragraph {line-height: 1.5;}
11. color – change color of text {color: #000;}
12. background – change background color of text {background: #fff;}
Now that we have all of these definitions and codes, let’s see some examples of CSS in action. Suppose I want to change the body text of my blog. I would first find the class of the text (use the Inspect Element tool to find it easily) and then plug in whatever codes I wanted to style the text.
Example #1 – Styling the Body Font of a Blog
.entry-content {
font-family: Helvetica;
color: #303030;
font-size: 14px;
font-weight: 300;
letter-spacing: 1px; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam vitae libero in egestas. Sed lorem odio, luctus at luctus a, tincidunt ut elit. Morbi vitae aliquet mi, non rutrum felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ut odio lobortis, elementum magna at, molestie ipsum. Sed rhoncus sollicitudin urna a fermentum. Vestibulum ex nisi, efficitur at enim sit amet, faucibus hendrerit magna. Duis pharetra dui ac massa sodales viverra. Donec non massa eget nulla hendrerit fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac dignissim leo.
Example #2 – Styling Sidebar Headings of a Blog
.widget-title {
font-family: Futura;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
background: #393939;
font-family: 16px;
letter-spacing: 2px;
width: 200px;
padding: 5px; }
sample sidebar heading
Styling your text with CSS doesn’t mean you have to go crazy with bright colors or hover effects (although they are fun). But it’s still a great way to bring your blog design together in a way that looks intentional and professional.
As always, share any questions in the comments below and I’ll get back to you ASAP!
Carissa says
Thanks so much for this article! Extremely helpful!
Jennifer says
So happy to hear it was helpful! :)
Website Design company in Minneapolis MN says
Helpful information.Thank you so much for sharing helpful information.