Applying CSS to WordPress Text - A Small Guide to Improving Your Blog's Design

In this post, I'm going to share with you How to apply body text CSS in WordPressWe'd like to talk about the current state of the Waffle Communitywhere the The Complete Guide to Customizing Your WordPress Title (Updated 24 years ago) From your post, I learned about decorating the h2-4 tags in the body.

I've been wondering about it for a while now after seeing other people decorate their headings with highlighter in the regular body text instead of the title, so I thought I'd give it a try and post about it when I had some time over the weekend.

Applying text CSS overview

As you know, design is very important when it comes to running a blog. It's not easy for a regular guy like me to make a blog look like a prolific designer, but there are some things that you can just follow and apply and you'll be happy you did.

If you don't overdo it, it will make a good impression on your blog's visitors and drive more frequent traffic, which in turn will lead to better visibility in search engines like Google (everyone does it nowadays, so it would be weird not to).

In this post, we'll look at how you can apply CSS to the body text of your posts in WordPress to improve the look of your blog, even if it's just a little bit. To learn how to apply CSS, check out Isaac's post linked above.

Before writing this post, I was wondering something. For things like the h2~h4 tags, I've been writing my CSS code by specifying them on a tag-by-tag basis, so that when I visually select a heading from h2~h4 in the body of a post, it will automatically give it the look I want. But, My question was how do you match the source code with the body text for text in the body that is not tagged separately? If you're like me and want to apply this CSS, that's probably the first thing you're wondering, and we'll answer that question in the following article.

3 body text effects

1. highlighter effect text

/* Highlighter-style body text decoration*/.
u1 {text-decoration-line:none; padding: 2px 5px; background: linear-gradient(to top, #c9e1f1 30%, transparent 40%);}

Add the above source code to the Customize > Additional CSS and paste it in. What do we do next? Well, we're going to use a little-used Code editor mode(note that the shortcut is Ctrl + Shift + Alt + M ).

In this mode, we're faced with an alien language. Pretend you don't know it and type and before and after the text you want to apply, and that's it. It's easier said than done, so take a look at the picture below and you'll understand.

텍스트 CSS 적용 -형광펜 효과
[ Body text highlighter effect ].

As I was writing this post, a comment from the Waffle community made me realize that there is another way to do it. Rather than taking the risky (?) step of touching the source code directly like above, you can use the Bold text gives the text a highlighter effect, for exampleThe contents of the Hereto check it out.

2. wavy underline

/* decorate wavy underline body text*/
u {text-decoration-style: wavy; text-decoration-color:#c9e1f1; text-decoration-thickness:0.08em; }

This code applies a wavy blue underline to the text inside the ... tag. The way to apply it is the same as above. When applied, you should see the following effect

텍스트 CSS 적용 - 물결 모양 밑줄 효과
[ Body Text Wavy Underline Effect ].

3. highlighting effects when selecting text

::-moz-selection {
  color: #000;
  background-color: #ccffff;
}

::selection {
  color: #000;
  background-color: #ccffff;
}

This code will change the background color to a light fluorescent lime green and the text color to black when text in the body is dragged to select it. It will look like the image below.

본문 텍스트 드래그 효과
[ Body Text Drag Effect ].

Organize

As shown above, you can use CSS to add a variety of visual effects to the text on your WordPress blog. Whether it's a highlighter, wavy underline, or emphasis on selected text, these effects can improve the look of your blog and make a great impression on your visitors. Try these codes to make your posts a little prettier.

As a side note, color is inseparable from design, and if you're interested in gaining a little knowledge on the subject, check out the The art of "finding the right color" - from extracting colors from images to harmonious color matching Check out the post.

Today we'd like to congratulate you on reaching WordPress & CSS Knowledge Level +1.

All content on 'secondlife.lol' is protected by copyright law. Unauthorized reprinting, copying, distribution, etc. is prohibited.

Similar Posts