Blogging and Writing

Customizing Your Blog with CSS

List of ways you might customize your blog with CSS

I’ve had the WP business plan since last summer, and one of the features that comes along with it is customization using CSS. For a long time I didn’t use it because I didn’t know how to. To be honest, it looked scary and too much like coding. I’ve only very recently discovered that it’s less scary than I thought, and actually very useful.

To start from the beginning, though, what the heck is CSS? It’s short for Cascading Style Sheets, and it’s a way of telling your web browser that when it’s loading items of type [X] on your site, it should display them like [Y].

For plans, it’s only available on the Premium plan and higher, so this may have very little relevance to you. It’s also available for people who are self-hosted. For people who do have CSS capabilities, in you’ll find it in the customizer under additional CSS.

I first sort of looked into CSS when I upgraded my plan, but it seemed too overwhelming to learn, so I gave up. When I switched to the block editor recently (because my beloved WordPress editor was retired), one of the many things that annoyed me about the new editor was that it was difficult to make things look the way I wanted. That provided the motivation to learn about CSS. I’ve flailed and stumbled and tripped along the way, but I’ve also learned more than I thought I could

If you want all your headings to look a certain way, the block editor makes that particularly tedious. But CSS gives you a one-stop-shop to make those kinds of changes that will apply to every instance of the specified element across your whole site.

CSS basics

The basic syntax is:

selector {
     property1: value;
     property2: value;

The selector is the name of whatever it is you want to apply your style rules. Headings are called h1, h2, h3, etc. Properties are the things that you can change with CSS, including colour, font-related parameters, margins, borders, etc. You can look up what these properties are and the kind of values that you can use with them. If you’re entering something into the customizer and it’s not showing up, it may be that some other style rule is overriding it, so you can add !important before the semicolon to make your rule take precedence over whatever your theme might be trying to do by default.

Below, I’ve specified the hex codes for the colours that I want my h2 and h3 headings to be. If you use Canva, that’s an easy way to get the hex codes you’re looking for. I’ve also specified how bold I want those headings to be (font-weight is the property for boldness) and what font they should be.

CSS screenshot

At the bottom of the above screen shot, I’ve changed what I want the text in block quotes to look like. It took some flailing to figure this bit out. If you’re trying to figure out what something is called, in Google Chrome you can got to the view menu > developer > inspect elements. It will show you code and it’s not simple, but it’s an option.

CSS classes in the block editor

screenshot of block editor

The screenshot above is taken of my home page in the block editor (it’s changed since I first wrote this, but this is still a good example. These are features blocks, and I was trying to figure out how to get them neatly spaced out. I was having no luck in the block editor.

I saw that in the advanced section of the block settings, you can enter additional CSS classes, but I had no idea what that meant. After a fair bit of hunting, I figured out that this is where you give a name to something that you want to apply a CSS rule to. In this case, I added the CSS class features-right (the actual name used is arbitrary) to both the social justice block and the what is… block. That lets me apply the same CSS rule to both of them.

Getting fancier with style rules

css screenshot

This screenshot is also looking at my homepage, but from within the customizer, which shows how the actual webpage would look. To the blocks on the right, I assigned the CSS class features-right, and the blocks on the left were features-left. I can then apply rules to .feature-right and .features-left

I’ve added padding around each of the blocks. Px (pixels) is a unit of size, and I played around with the numbers until it looked the way I wanted. I’ve also added a dotted outline and specified its width and colour. I also created a class for the icons used in each block, and made them all a certain colour.

It’s kind of hard to see from the way the screenshots are cropped, but the image in this section is what people will actually see when they load my site (apart from the CSS code on the left), which is a whole lot prettier than what’s visible in the block editor (which is what’s shown in the previous section). And rather than the pain in the butt of having to change settings in each block individually, you can assign them to the same CSS class and do all the changes in one go.

The learning curve

While it was a pretty steep learning curve, a lot of that was because I was having a lot of layout shift when my page was loading, and I was trying to force it to stop doing things I didn’t want it doing in the first place. But doing CSS to format things like headings is easy peasy lemon squeezy.

I’m not a coder by any stretch of the imagination. But CSS has simple syntax, there’s only a certain number of properties that you can modify, and they’re easy to look up. The site I’ve found most useful is W3Schools. You can just copy and post from their examples, and then fiddle around with the values.

Have you used CSS at all on your blog? Did you find it difficult to learn?

Blogging Toolbox

The Blogging Toolbox has tips and tools that are relevant and useful for the average blogger.

38 thoughts on “Customizing Your Blog with CSS”

    1. My knowledge of HTML is pretty limited, but I would say that CSS is simpler because it’s all about style so there are only so many things it does.

      1. Sounds fun to do it. Using the new editor now is not that difficult but it is not convenient and the result is never how I had it in mind. ๐Ÿ™„

        1. I don’t know why they make simple things so difficult in the block editor. Making headings all a certain color is such a pain in the butt in the block editor, but really fast and easy with CSS.

  1. No. Waaay back in the day I set up my own teeny website to display some writing and I coded it myself with html. (I also had an ftp server.) it was such a colossal pain! Iโ€™ve decided to take the easy road and just use the simplest tools available on WP, even though I did buy a plan. That was mainly to get rid of gross inflamed bowel ads ๐Ÿคฎ

  2. Kudos to you! One would think with my penchant for itsy bitsy attention to detail I would enjoy coding and programming – Nope, never did. I can do a lot with html but anything else, nope (so tedious…)

  3. Lol, I’ve seen all those abbreviations like CSS and HTML, could well be Russian to me lol. Maybe one day! But I must, loving the way your blog look Ashley. It’s changed and improved since I started blogging in September. Looks great ๐Ÿ™‚

  4. I will have to throw caution to the wind and try it out. WordPress keeps me baffled on the regular at times because I most often use the app on my phone not my laptop. Thanks for this push to try it!

  5. wonderful! will keep in mind if I upgrade. I love wp dot com too. I tried going to self hosted at one point & was such a disaster that I went back. for sure didnโ€™t like that non wp dot com means no more wp reader & no more reblog button. recently took an online class on blogging thur the library โ€” they made the great point that we should all do our best to build an independent email list, in the event that we fall out of love with wp or it goes out of biz, etc. are you familiar at all with doing something along those lines?

    1. I’ve heard the recommendation to have an email list, and I’ve chosen not to go that route because a) I don’t want to bother with writing an email newsletter when everything I have to say is already on my blog, and b) my own preference is that I have no desire to sign up for other people’s email lists, so it doesn’t feel quite right asking other people to do something I wouldn’t do.

  6. I taught myself css! But the WordPress forums are great if you’re stuck. Often I can just ask “I’m running X theme, and I want Y, how can I do that?” for the site I’m doing for a friend, and someone will figure out the css for me.

  7. I am still a completely useless when it comes to computers and still now struggle on the daily with how to do certain things on my website, I know for sure Iโ€™m not using it to itโ€™s full potential! I have never known what CSS was for, I shall definitely give it a try now with the advice you have shared, thank you โ˜บ๏ธ

  8. I’ve been wanting to use CSS for so long now (hence why I’m so behind with reading this post because I kept it saved in my emails so I could take time reading it when baby brain wasn’t at its peak). Like you, it scares me and I have no idea what I’m doing. Something like this i need explaining so simply because when words are used that I don’t know the meaning of, then looking up what they mean, I become overwhelmed trying to piece everything together and get frustrated with myself. Maybe one day I’ll get the hang of it ๐Ÿคž

    1. Yeah, the initial learning curve is pretty steep. I found the w3schools site to be a great resource. You can look things up and it will tell you exactly what code to use.

Leave a Reply