This post may contain affiliate links, and may use advertising partners which may display ads. As an Amazon Associate I earn from qualifying purchases. Read more at the bottom of this page or see the full disclaimer for details.
How a Font Change Inspired a Rebrand
It’s so typical of me to dive headfirst into a project I know nothing about. I sat down planning to write my blog posts for the week… and somehow ended up spending eight hours coding my site. The funniest part? I didn’t even know what CSS stood for until after, and I decided to write this blog post about my experience. (For anyone else wondering: CSS means Cascading Style Sheets — it’s the language that controls how your website looks. Fonts, colours, spacing, and layout , etc,)
When “Just One Change” Becomes a Full-Blown Project
It started innocent enough. I just wanted to change my font colour (I had it a beautiful terracotta orange before, and while it looked great, it really impacted readability). Then I wanted to make more changes to my typography — maybe adjust my links, and make my widget titles look cleaner. But every little fix led to another “just one more thing.”
Before I knew it, I was knee-deep in code, dinner was late, and I was still scrolling Googling and asking ChatGTP to fix my code like a madwoman. It took all day, my blog looked beautiful — but my eyes were burning, my brain was buzzing, and I realized I hadn’t spent that much time on my phone in one sitting since deciding to live a more unplugged life (read about what inspired that here — you might be inspired too!) . I could feel the difference — mentally and even physically.
So if you don’t want to make the same mistake, here’s a quick rundown on what CSS actually does, how it differs from other coding languages, and a few things I wish I knew before diving in.
(Side note, does anyone else remember having a Piczo site in the 2000s? I remember trying to learn how to code to get my glittery fonts and backgrounds in my school computer lab! Please tell me if you remember this!)
I first remember (kind of) learning about the difference between these codes when I was integrating my plugins for my email signup widget. Read about how I did that here and some other things I wish I knew before I started my blog.
HTML, CSS, and JavaScript — What’s the Difference?
Let’s break it down in mom terms:
- HTML (HyperText Markup Language) is the structure — the bones of your website. It decides what shows up: headings, paragraphs, images, links, buttons.
- CSS (Cascading Style Sheets) is the style — the makeup and outfit. It controls how those elements look: fonts, colours, alignment, and spacing.
- JavaScript is the movement or personality — it adds interactivity like dropdown menus, slideshows, or buttons that change when you hover.
They work together like this:
HTML builds it → CSS styles it → JavaScript makes it move.
If your blog feels “boxy” or generic (which if it does, you almost certainly won’t get approved for ads, which is the goal for most bloggers), CSS is where you can add softness, depth, and your unique personality — no developer required (most times).
Things I Wish I Knew Before Spending 8 Hours in CSS
CSS can only style what HTML builds first. Especially when I was working on my intro widget (which I still need help with… any coders out there that can help??), I kept trying to change elements that didn’t exist HTML, wondering why nothing was happening. CSS can’t add something that isn’t already in the site’s structure, it can only style what’s there. That is why anything you want to style or customize has to already be in your site’s theme or in your HTML that you add (more on that below).
CSS rules “cascade.” The most recent code you add overrides anything written before it, which is actually where the word cascading comes from. So if you change a colour or font size in a specific block later on, it will replace what was already there higher up in the stylesheet. That is both a blessing and a curse — it makes it easy to make quick changes if necessary, but just adding to the bottom of your CSS can get cluttery. And if you make changes to your code higher up, you may have something overriding it down below. You definitely have to be very organized and aware when working with CSS.
Tiny typos break everything. I learned (the hard way) that a single missing semicolon (;) can stop an otherwise perfect block of code from working. I would be so frustrated that my code wasn’t working, and then realize I never “finished” the line with a “;“, which applies the code. And all coding blocks need a pair. For HTML it’s like <> and </>, and for CSS it’s like { }. If you are missing a bookend, the code will not work. Always double-check before you panic!
Not every font works with WordPress. This was my saddest discovery. The fonts I love and use in Canva didn’t show up correctly on my site — they’re just not compatible with WordPress. But there’s a fix!
Here’s what I wish I knew sooner:
- Go to Google Fonts and find one you love.
- When you click on a font, Google will show you two types of code:
- HTML code and the link tag that “imports” the font to your site
- CSS code that tells your site where to use the font
In WordPress, add an HTML widget to your page or sidebar — this is where you’ll paste the HTML font link and the actual text or element you want to style. Order matters: HTML first, then CSS. The HTML creates the content, and the CSS tells it how to look.
Once I did that, everything finally clicked — my fonts displayed properly, and I understood how HTML and CSS actually talk to each other.
A Quick Beginner’s Guide to HTML and CSS for Blog Customization
If you’re brand-new to coding, think of HTML and CSS as your creative tools for customizing your theme beyond the built-in settings. HTML (the structure) lets you create new little sections — like blocks of text, quotes, or styled headings — using HTML widgets in WordPress. You can literally type in your own mini layout, like a title, paragraph, or button, right inside that widget. But it will just be plain text according to your site’s theme or default settings.
Then, CSS (the style) is what makes it look beautiful. You can change your link colours, adjust font sizes, add backgrounds, or even animate your headings so they fade, bounce, or slide into view. You don’t need to know everything, just a few small snippets can make your site feel 100% yours. Copy, paste, experiment, and preview until you love it. It’s less about being “techy” and more about being creative with intention.
Also, if you are my dad or my brother-in-law reading this, please don’t ask to look at my code 😂
When Design Meets Mindfulness
That day taught me something bigger: creativity and boundaries have to co-exist. I love making my blog beautiful — it’s part of the Glow. But it’s easy to slip from intentional creation into overstimulation, especially with my ADHD brain.
I have treat designing like a creative sprint: set a timer, put on my diffuser, make my changes, and log off when the time’s up. Because yes, creating something beautiful matters, and improving your site appearance and design is never wasted time… but if you are not careful you will lost too much time over it. While making sure that button looks perfect might seem like all that matters in the moment, I promise your viewers can wait another few days before experiencing that beautiful button. (Yes, I am talking to myself… I currently have so many more ideas running through my head that I want to code!)
Part of the Glow
Did any of this resonate with you? Have you ever been caught up in a project like this? And if you’d like more content like this, a real life glimpse into the life and journey of a blogger and mom, subscrube to Let’s Glow for blogging updates, easy recipes, and of course wellness tips and exclusive discounts that I can’t share anywhere else.
