Why You Should Learn CSS as a Blogger
Why You Should Learn CSS as a Blogger

Even though this article is titled Why You Should Learn CSS as a Blogger, I wrote it in my schedule as “Why You Learn CSS” and that made me laugh.

So, why you learn CSS?

While there are many fancy plugins out there that give you a buttload of control over the look of your site (such as Divi!), I personally find that I’m still digging into the CSS to further customize the appearance of my site.

Maybe it’s because I love doing it but also I want a site that is unique to my personality and brand.

Getting into CSS isn’t as scary as it may seem. In fact, my guide to using CSS lays out exactly how to tickle your site’s code without destroying it.

That’s all well and good I suppose but something tells me you’re going to need a bit more convincing in order to get your hands dirty.

So keep reading to find out exactly why you should learn CSS!

Your Site Will Be Unique

I guess it would be counter-intuitive to say that free WordPress templates are a dime a dozen because they’re, well, free. But the point is that there are many of them out there and many site owners using them.

The beauty of CSS is that you don’t need to build a website from scratch to create something cool and unique. By understanding CSS code and how to change it, you can take existing layouts and customize them however your heart fancies.

The most successful websites are the ones that stand out! Unique sites are engaging and memorable and leave a lasting impression on visitors.

This impression inspires visitors to become loyal followers and buy your products, share your content and sign up for your email list.

Knowing how to play around with your CSS code gives you a chance to stand out from the crowd!

PRO TIP: Astra is a beautifully simplistic (and free) WordPress theme that is super easy to customize!

CSS Makes Changes Across Your ENTIRE Site

If you’re using a plugin such as Divi for example, you can customize aspects of your site but you have to make these changes on every single template (not every single page since you can apply Divi templates to all posts, for example).

When you use CSS, the visual changes you make are universal across your entire site. If you want to change the color of your links, for example, you can make that change in CSS and every link will adhere to the color you have chosen.

This definitely helps not only save time but maintain consistency in your site’s design.

CSS is Easy

Once you get a basic understanding of what you’re looking at, CSS is a very easy coding language to use.

Trust me, I love HTML and CSS and tried to learn Javascript – Yikes! I had no idea what I was looking at.

The language of CSS is extremely logical – it uses labels to determine what aspect of your site you want to customize and indicators to tell the browser how to display them.

CSS can be used to change the color of your text, the style of your fonts, the placement of logos, etc. by using simple pieces of code found within your site’s stylesheet.

It really isn’t more complicated than that.

Mobile Responsiveness Depends on CSS

So my guilty pleasure is designing websites on my laptop. However, as beautiful as these sites are (and they be beautiful), they look completely different on my phone.

Translating the look of a website from desktop to mobile is known as “responsive design” and the magic all happens within the CSS code.

Of course, you can download plugins or use WordPress’s customizer to style your site for mobile screens but knowing the CSS gives you absolute and total control.

You can rearrange sections of your site, style your mobile menu and change the size of your text and images.

You Can Create Animation with CSS!

Storytime: When I was a young developer (i.e. a teenager mucking around with the advanced capabilities of Windows 98), I used to play around with graphics and create animations.

This involved designing each slide, using the selector tool to move aspects of my image, and compiling them through a GIF animation program.

How I had a life, I’ll never know.

Now, with CSS, you can create cool animation effects such as fade-ins. Just don’t go crazy! You don’t want your site to look like something out of the 90s.

CSS is Standardized Across Browsers

Chrome, Firefox, Safari – they all recognize CSS’s coding language. Coding languages such as Javascript can change and develop so often that some browsers may have difficulty keeping up with them.

This is because CSS is simple! It’s a straightforward language that has not been updated since 2011 when CSS3 was released.

So when you make changes to your CSS code to customize your site, you can feel confident that these changes will be reflected no matter what browser your reader uses.

How Does CSS Work?

As I mentioned before, I’ve written this handy-dandy guide to how CSS works and how to use it. But, if you want a little taste, I’ll give you a quickie breakdown of how it all works:

What is CSS?

CSS stands for “Cascading Style Sheet” and involves language that controls how your website looks. HTML, on the other hand, determines your site’s content.

The two languages work together to combine content with presentation.

For example, if a website was a house, the drywall would be the HTML while the paint would be the CSS.

Where to Find Your CSS Code

Your CSS code is stored in a file called “style.css”. You can access it directly through your site’s FTP back-end or through WordPress by going through Appearance then Theme Editor.

Be warned! Changes you make to these files can eff up your site, so proceed with caution.

A safer bet is to use WordPress’s customizer (Appearance->Customizer) to add additional CSS code that doesn’t change your site’s “style.css” file.

How Does CSS Work?

CSS relies on a particular syntax, or language structure, to make visual changes to your site. Each line of code is made up of a selector and declaration box.

The selector matches the CSS code to the HTML bits of your website. For example, HTML uses a <p> tag to define a paragraph, so you would refer to that “p” in your CSS.

The declaration box tells the browser how to make that tag look. It involves a “property” and a “value” – the property is the aspect of the tag you want to change (such as the font size) and the value is what you want to change it to (like 14pt, for example).

Here’s what it looks like:

SELECTOR {PROPERTY:VALUE;}

The property and value are always contained in curly brackets and separated by a semi-colon. The selector gets to float around on the outside.

Here’s a practical example of changing a paragraph’s font size:

p {font-size: 14pt;}

That’s all it would take to change the font size of all of your site’s paragraphs to 14pt.

Ready to Get Started?

Trust me, CSS is not as confusing and scary as it looks. The more you get into it, the more fun and easy it gets!

If you want to play around with CSS, I recommend checking out the site CodePen. It allows you to enter code and see the changes in real-time.

Otherwise, there are many free courses out there you can check out to get you started.

Have fun!

(And don’t forget to Pin!!!)

Coding, design, and writing are my happy places. I can lose all track of time when I’m working on my blogs.

I hope here at MNC you will find the answers to your questions and some inspiration to make your blog or site really totally cool!

Learn More.

Latest Posts

How to Use Tailwind for FREE (Pinterest Without Paying!)

Have you been banging your head over your Pinterest marketing strategy and trying to figure out a way to organize your pinning schedule without spending money on Tailwind? Once upon a time, I did. I made up fancy Google spreadsheets that listed all of my blog posts...

Don’t forget to sign up for the FREE Blogger Toolkit!

You May Also Like…

10 Online Courses to Learn HTML and CSS for Free

10 Online Courses to Learn HTML and CSS for Free

Are looking to learn HTML and CSS for free? While this site can certainly give you cool little coding tidbits to apply for your site, you may have a hankering to learn how to do this coding all on your own. I know I did once upon a time - and I had so much fun...

What the Heck is CSS? And How It Can Help Make Your Site Unique!

What the Heck is CSS? And How It Can Help Make Your Site Unique!

CSS is a coding language that is such an integral part of web design - yet an invariable mystery to many mom bloggers. I remember the first time I ever encountered CSS. I was already using HTML to make dinky little websites for fun, injecting styles and colors all...

How to Hide Pinterest Pins in Your Blog Post

How to Hide Pinterest Pins in Your Blog Post

Who would have thought when Pinterest came out in 2010 it would be an invaluable way to drive traffic to your site? I remember the days when I used to use Pinterest to look up recipes, decor ideas and funny memes. Now it's used by mom bloggers everywhere to drive...

0 Comments

Trackbacks/Pingbacks

  1. How to Make Your Blog Mobile Friendly (And Look Awesome on Smartphones!) - Mama Needs Coffee - […] blog owners shy away from responsive design because they think it involves a lot of coding. While you can…

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content