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 throughout the markup. A coworker looked at me like I had four heads and said, “Why don’t you just use CSS?”

“Why don’t I just use what now?”

“CSS. That way you won’t have to repeat the colors and styles all the time.”

“Teach me the ways…”

And he did.

What is CSS?

CSS stands for “Cascading Style Sheet” and involves a style sheet language that describes and controls how your website looks.

Think of a website. Now think of all the words that you read on the website. Then look at all the colors and positioning of those words.

The words, or content, is determined by HTML. The look and layout is controlled by CSS.

The two languages work together to marry content and presentation.

The CSS file is linked to the HTML within the document’s <head> tags. To learn more about what HTML is and how it works, check out my post The Ins and Outs of HTML.

See the Pen
Content and Presentation
by Chelsy (@mamaneedscoffee)
on CodePen.

Click between the CSS tab and HTML tab to see the different codes.

Don’t get hung up on the CSS code just yet! I’m going to explain what all those }’s and ;’s mean and how they control the look of your website.

The takeaway here is that CSS control various aspects of your site including the layout, colors and fonts.

Why Use CSS?

You can control the presentation of your site across all pages.

Let me take you back to the old days – the days before CSS.

You could make a website about your cat. Using HTML code alone, you could center the title, make it pink, add an obnoxiously patterned background and include all the information you wanted to about Mittens.

Oh, and it was almost law to have some terrible MIDI music playing in the background.

Come on! You remember!

Now, if you clicked on that “here” link, you would be taken to pictures of Mittens. Once there, you would likely see the same pink title, the same green text and the same obnoxious background.

The thing is, to create that second page, you would have to write in all those colors and styles all over again – and for every page connected to Mittens’ homepage.

With the magic of CSS, you can place all the pinks and greens and Comic Sans specifics in one file and apply them to ALL pages.

Not only that, but if you wanted to change the obnoxious background to a different obnoxious background, you wouldn’t have to go through each page to do so. You can make one change in your CSS code and the new obnoxious background would appear on all pages.

You can personalize themes to match your brand and image.

The development of CSS was great news for webpage creators – both expert and novice – but the implications may seem less amazing when you are simply downloading a free theme and applying it to your blog.

I must admit, there are some awesome free themes out there that are visually pleasing and extremely functional. The thing is, while you’re downloading that awesome theme, so are a bunch of other people. Suddenly, your site loses its uniqueness when it comes to presentation.

Sure, you can pay big money to someone for a theme guaranteed to be only used by you. They will even customize it to your preferences and style.

And perhaps you’re at that point in your blogging career to make such a financial move.

The truth is, by knowing how to hack your CSS code to personalize your site, you can make some very simply changes that will impact the connection between your site’s look and your brand.

For FREE!

Where Can I Find My CSS?

At least 99% of the time, the CSS code is saved in a file called style.css (or something very similar). There are a couple of ways you can find and change this code while using WordPress.

Using WordPress’ Theme Editor

You can access the code from the left menu by selecting Appearance then Theme Editor. If it’s your first time clicking that link, you may get a pop-up warning you that if you f*ck up this code, then you’ll f*ck up your site. (It may not be worded quite like that.)

Yes, I am taking screenshots as I write this post. So meta.

Generally, the default file that will open is your style.css file. If it doesn’t, you can find it on the right hand side under Theme Files called Stylesheet (style.css).

From here you can make changes to the CSS code. Remember, though, that you can really mess up your site if you butcher your code. Which is why I like option 2:

Using WordPress’ Customizer

Click on Appearance then Customize. This will bring you to a screen that allows you to change various aspects of your site while providing a real-time preview as you do so.

The benefit of this feature is that you can easily undo any changes you make without destroying your site.

Scroll to the bottom of the options and click on Additional CSS. This area allows you to add or change CSS codes without touching the style.css file. You can override existing CSS properties or create new ones.

In this post I’m only focusing on explaining what CSS is and how it works. Check out my Coding page for more information on what kinds of changes you can make to this code. 🙂

How Does CSS Work?

Remember that piece of code at the beginning of this article? I’m going to get into the nitty-gritty of how that code works. This is a kind of an intro guide into CSS, so I won’t go too crazy with details.

CSS relies on a particular syntax, or language structure, that uses simple English keywords to specify various style properties.

For example, the property “font-size” is going to specify the size of your font. The word “red” is going to indicate that you want something red.

Each line of CSS code is made up of two elements: the selector and the declaration block.

The Selector

The selector works by matching tags (bits of HTML such as <p> for paragraph) to visual attributes.

The <p>, again, represents a paragraph, so all the fancy CSS I added here is going to affect the whole paragraph. Within that CSS, I specified that I wanted the text of that paragraph to be 16pt, red and centered.

Now, if I added another paragraph, those styles would apply to that paragraph as well.

See the Pen
Content and Presentation 2
by Chelsy (@mamaneedscoffee)
on CodePen.

If I wanted each paragraph to have its own style, I would have to add one of two things to the <p> tag: a class or an id.

Don’t worry about the differences between these two terms. Basically, they give a special identification to the <p> tag to differentiate it from other <p> tags.

So in this next example, I used “class” to call the first paragraph “paragraph1” (appropriately) and the second paragraph “paragraph2”. Then I used CSS to give them each their own color:

See the Pen
What the Heck is CSS 3?
by Chelsy (@mamaneedscoffee)
on CodePen.

So by using a selector, I was able to match the paragraph (<p> tag) with a color, font size and alignment – and by using the “class” element, I could attribute different colors to each paragraph.

The Declaration Box

Now I’m going to explain to you why CSS looks the way it does in code form.

Each little piece of CSS is called a “Declaration Box”. That means that the p.paragraph1 in the CSS example above is one declaration box and the p.paragraph2 is a separate declaration box.

When you see a chunk of CSS code, it involves these elements:

SELECTOR {PROPERTY: VALUE;}

Remember that the selector is the HTML tag we are referring to in the site’s content. The property is the aspect of that tag we wish to change. This could be the color, the width, how much space is to the left of it (whatever it is), etc.

(Don’t forget that CSS can be applied to more than just text. It can change background colors, the width of your header, the space between your widgets and so on.)

The value is what we want to change it to.

Take a look at this code and see how I use CSS to control the properties of the image:

See the Pen
What the Heck is CSS 4?
by Chelsy (@mamaneedscoffee)
on CodePen.

The HTML tag for images is <img>, so I referred to that in the CSS code. This is the selector.

I decided to place a purple border around the picture as well as add some space between the image and the border.

For the border, the term “border” was used to specify the property I wanted to change. All the jargon afterwards (which identifies the border’s width, color and style) is the value I wanted to apply to that property.

Same for the “padding” property. I used that to create 25px’s worth of space between the image and the border. Now it looks like a nicely framed picture of our sweet little Mittens.

Layout, Fonts and Colors

With the power of CSS on your side, you can take complete creative control over all the visual elements of your site.

But it’s not easy.

Even I get tripped up playing around with CSS – trying to move an element to the right but it sails off to the left, headers changing colors on one page but not the other – but I enjoy the trial and error element of figuring it out.

If you are absolutely new to all of this, I recommend taking it slow. I would avoid tackling your site’s layout (where the header is in relation to the sidebar, for example) and begin by playing around with fonts and colors.

There are many great themes you can use as a starting point for customizing and personalizing a site or blog.

I personally use Elara because it’s free and has a simple and pleasing look with some pretty cool features that can all be applied without knowing a lick of code.

Keep checking back for more articles about changing specific elements of your site using CSS!

If you have any questions, or if anything doesn’t make sense, please contact me or leave a comment below! 🙂

 

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…

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...

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...

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. The Easy Elementor Tutorial for Mom Bloggers for 2021 - The Passive Sales System - […] element, you can use the tabs along the top of the content editor, such as style and advanced, to…
  2. Why You Should Learn CSS as a Blogger - Mama Needs Coffee - […] into CSS isn’t as scary as it may seem. In fact, my guide to using CSS lays out exactly…

Submit a Comment

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

Skip to content