Customizing Your Blog With Code: HTML, CSS & Plugin Basics

What is HTML & CSS?

As cool as it would be, blogs are unfortunately not created by magic and yes, do involve coding. Basic coding, however, isn’t super hard to understand and make up the basic building blocks of all websites including blogs. Now, with WordPress, depending on what kind you use, you can alter your blog and change its HTML (WordPress.com & WordPress.org) and CSS (WordPress.org).

As defined by Wikipedia, HTML is: “Hypertext Markup Language is the standard markup language for creating web pages and web applications.“, which is jumbo jumbo for the language you use to create basic things online. We use HTML to do things like add text, boxes and photos, etc.

Meanwhile, CSS is personally my favourite because that’s the language we use to make things we create in HTML pretty. CSS stands for Cascading Style Sheets, so it’s a style sheet where you add what you want to change stylistically. Have a Heading 1 you’ve created with HTML, use CSS to make it bold, then italic, then in the font Comic Sans (but seriously don’t, Comic sans is the biggest design joke of the universe). You can alter a lot with CSS alone which is why having the ability to add CSS styling is so beneficial and important for y’all who use WordPress.org (unless you’d like pay buttloads more money for a premium business plan on WordPress.com – I mean, up to you, each to their own).

For those stuck in a free plan with WordPress.com, you can still add HTML, and there are sneaky ways to add styling in that too. You guys can read more about HTML in this awesome blog post by Tale Out Loud right >>HERE<< which is extremely helpful for learning some HTML basics, because today I’ll focus on CSS.

How do I use CSS Styling on my blog?

I personally think that CSS is really fun, and I have a little hack for you guys today too.

So, to use CSS, you need to know what you want to change. That sounds easy but you need to know what you want to change in terms of how it’s coded and written in HTML. Say you wanted to change the heading of a blog post, what kind of heading is it? If it’s an H1/Heading 1, you can alter it with CSS in this format:

h1 {

color: pink;

type-family: Helvetica;

}

Be careful though, you might find that a lot of your blog has headings that are H1 and unless blocked by another styling, it can means that ALL your H1 headings will turn pink and be a Helvetica font.

I’m not gonna go into a whole list of what you can change because there are many. If they don’t have defined names like h1, h2, body, etc, they’ll have a hashtag: #pinkheading or a class: .pinkheading. 

My personal hack for finding the names of things to change is to:

Open another tab in Incognito

Right click on the webpage

Click on Inspect

Find & Click on Styles where you’ll find the whole style sheet for the webpage!

You can click and highlight sections of the site and see the corresponding styling where it’ll highlight itself for you!

This is a pretty cool trick I’ve used for ages now.

When doing Additional CSS, be very careful of what you code. It might seem like it’s not working and it could be as simple as one element like forgetting to add ‘;’ after your styling preference, or closing the brackets {}.

There are thousands of resources out there to help you with both HTML, CSS and every other language of code (specifically for WordPress if you’re ever brave enough to try learning PHP which I’ve yet to do!). So, don’t give up and google away if you get stuck cause most of the time, someone else will have asked the same thing too.

The Easiest Thing You’ll Read About Today: Plugins

Plugins are the bread and butter of adding cool shit to your blog without the hassle. You can find a whole array of plugins out there and they’re basically chunks of added code that does extra stuff that you can simply install and customise for your blog. There are a lot of plugins out there, some of my favs that I have on my blog are Google Fonts, Classic Editor (cause Gutenberg and New Editor can go die), bottom of every post lets me add my copyright stuff at the end of each post automatically, and the Editorial Calendar plugin I could not live without.

You can find a whole list of awesome plugins perfect for book bloggers right HERE & HERE, which can help you figure out what plugins will suit you and your blog best.

What did you think of today’s post? Are you as bewitched by code as I was?

Don’t forget to drop us any questions you have in the comments for our Q&A & Secret Reveal tomorrow 🙂

xx Tracy

Don’t Forget Our Giveaway! It Ends Super Soon!

To celebrate this blog design event, we’ve got an awesome giveaway lined up for you!

Want to try your luck at winning a complete blog design makeover from either me or Kat? There will be two lucky winners – one will receive a blog makeover from me, and the other will receive a blog makeover from Kat. That’s two prizes, two winners, and double the chance to win! More rules in the Rafflecopter.

a Rafflecopter giveaway

——-