HTML & CSS for Bloggers: CSS Basics for a Beautiful Blog

Published on February 1, 2016 | Last Updated on May 26, 2022

4 min read

By: Maddy Osman

Welcome to the second installation in my series teaching HTML & CSS for Bloggers. The first post shared basics that help with SEO. In this post, we’ll go over CSS basics for a beautiful blog.

Jump Ahead to a Specific Section:

CSS Basics for a Beautiful Blog

What is CSS?

How to Use CSS

How to Find a WordPress CSS Stylesheet

CSS Structure

CSS Classes and IDs

Calling to a CSS style on HTML

Final Thoughts: CSS Basics for a Beautiful Blog

What is CSS?

I’m glad you asked! But let’s start by defining HTML.

HTML stands for “Hypertext Markup Language.” HTML defines the basic structure for a website. It tells the browser what to put in your header, the main body, and the footer. The HTML document should contain all text and call outs to Javascript (like your Google Analytics code, for example) and CSS. Basically, an HTML document pulls each part of the website together even if it doesn’t store all the specific code details.

CSS stands for “Cascading Style Sheets“. CSS determines how your page looks, both in terms of font type, color, size, and even where certain elements sit on your page. It defines the size of the header, body, footer, and really so much more than that. For the purpose of this post, we’ll focus primarily on simple CSS basics for a beautiful blog and save the more advanced topics for later lessons (so subscribe to the newsletter in the sidebar if you want to keep learning more!)

How to Use CSS

Let’s assume that you’re not using WordPress and have to do everything yourself. You’d have to manually call out the CSS file in your HTML file. It would look something like this:

The “link” part of this tag is just telling the HTML document that you’re calling another file in to be displayed on the page. The “rel” tells the document exactly what you’re calling, which in this case is stylesheet. The type is just another reference to this, but also lets the browser know it doesn’t have to do anything extra special to process the code. It doesn’t have to compile like PHP code (a more involved process) – it can just be read as-is. The “href” is the source of the file and should correspond to wherever the CSS code is housed. Usually this is in it’s own specific folder, so the file path might instead read “css/style.css.”

How to Find a WordPress CSS Stylesheet

Luckily for you WordPress users, you don’t have to set this up yourself. You can access the stylesheet connected to your active them by going to Appearance > Editor > Styles > styles.css. Some themes have more than one stylesheet, but “styles.css” tends to be the main one. Plugins will also contribute their own individual stylesheets, and can be accessed by going to Plugins > Editor and selecting individual plugins’ stylesheets.

Be careful to make changes to this document. It’s a good idea to backup your WordPress site, or at least saving an exact copy of your styles.css document in case you break something. Let’s talk a little bit about the structure of objects on a CSS document.

CSS Structure

A basic CSS object looks something like this:

.fontstyles {
font-size: 16px;
}

Let’s go over each part.

“.fontstyles” is what we consider to be the CSS “class.” A class is just a name to describe what your code is supposed to do. In HTML & CSS, we often talk about being “semantic.” This means creating names for CSS objects that make sense as to what they’re supposed to actually do. You can call classes whatever you want, just don’t use spaces. CSS classes are case sensitive, so be careful to keep this in mind when creating and implementing code.

Instead of < and > carets, CSS uses curly brackets: { and } to show where the code starts and ends. It’s important to note that these aren’t implemented until after the name of the CSS class.

Within the code itself are specific actions. In this example, “font-size” refers to exactly what you’d expect – changing the size of a font. After the action, make sure to insert a colon (:), and end the line with a semi colon (;). You can continue to add additional actions. Say, for example, you want to define the font color in this class, as well. That code would look like this:

.fontstyles {
font-size: 16px;
font-color: green;
}

The final piece is the closing curly bracket: }

Congrats! You’ve created your first CSS style.

CSS Classes and IDs

We just discussed CSS classes, but another lesson to learn is the difference between classes and IDs. A CSS class looks something like this:

.fontstyles {

}

A CSS ID looks something like this:

#fontstyles {

}

The only obvious visual difference here is that a class in preceded by a period (.) and an ID is preceded by a hashtag symbol (#). A class can be used multiple times on a page. Say you want to make specific text green, as well as a heading tag, and a link. You can insert the CSS class to achieve this. An ID can only be used once on a page. You’d likely use an ID to define the different layout specifics. So, a footer would have it’s own ID, your sidebar would have it’s own ID, etc. Understanding the difference between a CSS class and a CSS ID is important in CSS basics for a beautiful blog.

Calling to a CSS style on HTML

As long as your HTML page links to the CSS document you’ve been working on, it’s easy to call and use CSS styles on the HTML page. Referring back to the CSS style we’ve been working on, let’s see how we’d apply it to a h1 tag:

< h1 class="fontstyles">HEADING TEXT HERE

Just replace the period from your CSS class with the word “class” and an equals sign (=) with quotations surrounding the name of the class. The same process works when defining an ID, you’re just replacing the hashtag symbol (#) instead of a period. Some pages will display the CSS code directly on the HTML page like so:

< h1 style="font-size: 16px;">HEADING TEXT HERE>

Notice that instead of defining a class or ID, you’re just telling the HTML document that you want to give the specific HTML tag a “style.” Punctuation is a little different, but similar enough for it to make sense. The above code is an example of inline CSS. This is considered to be very bad for SEO, because it increases page load time. That’s why ALL of your CSS codes should be housed on a separate CSS document.

Final Thoughts: CSS Basics for a Beautiful Blog

Ok, I know I promised to show you CSS basics for a beautiful blog, but I want this lesson to sink in before we talk about how to more specifically customize the look and feel of your blog theme. I promise that digging into specific styles and how to achieve them will be the very next topic! On that note, if there’s some specific look you’re trying to achieve, leave your questions in the comments.

Maddy Osman

The Blogsmith

Maddy Osman is the author of Writing for Humans and Robots: The New Rules of Content Style. She's a digital native with a decade-long devotion to creating engaging, accessible, and relevant content. Her efforts have earned her a spot in BuzzSumo’s Top 100 Content Marketers and The Write Life’s 100 Best Websites for Writers. She has spoken for audiences at WordCamp US, SearchCon, and Denver Startup Week.

HTML & CSS for Bloggers: Basics That Help with SEO

Join the Discussion (19)

I probably should, huh? Anything in particular that you’d like for me to dig into more deeply?

Can you provide some more content like this?

So glad it was useful to you, Rishabh!

Amazing content. Thanks

Francesa,
So glad this could help you! Unfortunately, this is just one of two or so posts on the topic here, but I also write about web dev stuff at DeveloperDrive.com and wpmudev.org 🙂

This is great! I had some problems applying classnames but this helped me.

(What also helped me if this is something others struggle with too: a friend of mine who worked at Facebook showed me this table: https://meiert.com/en/indices/css-properties/ –before that I didn’t even know what I could do with my html code :-/)

Have you written more about CSS lately? It seems most was about SEO and marketing or am I missing something?

Phoeicia,

I try to! Still lots for me to learn, too 🙂

And those were the days, weren’t they? So many conflicts between themes and plugins! That could be a whole series of topics on it’s own… 🙂

Maddy

Wow – you truly know your stuff!

Thank goodness for WordPress and website designers!

Whilst at university in the late 1990’s, we were taught how to create simple websites using html. Once the formula was correct, the page would do exactly as you instructed it – I needed no help. How far technology has come since then!

Adrienne,

I hear that from a lot of people! Web stuff isn’t easy to jump into, but I hope to make it a little more understandable!

Either a course or a book is my eventual plan. Readers like you will help keep me honest with that goal 🙂

Thanks for stopping by!!

Maddy

Hey Maddie,

I would love to learn how to do this. I think I don’t have the patience for it because I’ve gone to the CSS Tutorial site and played around with the coding lessons but when I would try it on my blog it would never work which I found SO frustrating.

But there are some things I prefer doing myself and I continue to play around with it so for the small projects I’m all in. For the larger ones I’m out.

I do agree with Brent though, you should probably put a course together. If you did it so that we idiots could learn then you’d have an awesome customer base just from us. I’d LOVE to learn how to do this without losing my religion. LOL!!!

~Adrienne

Brent –

That’s definitely an idea I’ve toyed around with. Another is creating a book. I’m going to keep creating the content and see what would be a better fit 🙂

And I know exactly what you mean about editing. I can get stuck in it myself too, sometimes. Even if I know what I’m doing, I’m caught between little decisions about what direction to take, stylewise!

Thanks for all your great feedback and helping me spread the word about this series 🙂

Maddy

Maddy,

I really think you should put together a course on CSS basics. (Aimed right at total beginners)

You wouldn’t believe how many times I’ve gone to edit something small — something you could probably edit within a matter of minutes — but I end up spending 3 1/2 hours searching for the answer.

The answers I find online to what I’m trying to do with CSS are generally…

a) Far too complicated / beyond my skill level
b) Entirely incomplete

I know to someone who is “fluent” in CSS, it’s probably hard to imagine that it could be challenging to other people.

But I’ll be the first to admit that I could use help.

Just an idea.

Brent