What is CSS? A Beginner’s Guide for Bloggers

What is CSS? Take control of your blog's design with HTML + CSS! HTML and CSS design for bloggers. Download a free CSS cheat sheet just for bloggers at DesignYourOwnBlog.com!

What is CSS? Take control of your blog's design with HTML + CSS! HTML and CSS design for bloggers. Download a free CSS cheat sheet just for bloggers at DesignYourOwnBlog.com!

As a blogger and/or DIY blog designer you’ve probably heard about a hundred times that you’re supposed to know it, but what is CSS exactly?

And how on earth will I ever learn CSS, it sounds so complicated!?

We discussed last week how HTML and CSS differ and how they work together. We also learned how easy HTML really is!

Don’t believe me? Go now to read it and download your free HTML Cheat Sheet before continuing here today. Go on, we’ll wait.

Ok ready?

Now that you have a decent understanding of what HTML is, we can now talk about what CSS is and how it affects our web pages. But first…

What is CSS for bloggers + beginners. Download a free CSS cheat sheet just for bloggers at DesignYourOwnBlog.com!

What is CSS?

CSS stands for Cascading Style Sheet. Where HTML is what defines the structure and content of a web page, a Cascading Style Sheet is a web document that allows you to change the appearance of the HTML.

CSS allows you to change the size, style, font, and color of text; margins and padding; background colors and border styles. It can also be used to position elements on a page (but we’ll leave that for another day).

One Big Advantage of CSS is Consistency

The best thing about CSS is that is allows you to make global style changes that affect every instance of a certain element throughout your blog or website so that you don’t have to make these changes at the individual page level. This saves you a ton of time when it comes to redesigning your blog.

Here’s an example of what I mean: as we learned last week, the page title on a blog page is defined by an HTML element called an H1 (heading 1). By default, the browser displays an H1 as extra large, bold, black text, much like we saw in the PAWS example.

If we want to change the color, font and size of all the H1’s on our blog to keep consistency throughout, all you need to do is define what all H1’s will look like in your CSS.

Sometimes different browsers may display slightly different default styles. Using a style sheet to define what a specific element should look like can keep the look of your blog consistent from one browser to another as well as one device to another.

How Does CSS Work?

The Cascade

A very important piece of CSS is the “Cascading” part. The browser reads style definitions from top to bottom in a style sheet. This means that a style you define lower in the style sheet will override any previous styles defined earlier in the style sheet.

We’ll get into that in a moment.

You can also have a style sheet override another style sheet. This is how we are able to override predefined styles from our blog themes or plugin widgets, as our custom style sheet is usually the last one read by the browser.

How CSS is Applied

CSS is applied to HTML elements in a web page by declaring specific styles for each element. A style declaration looks like this:

selector {
     property: value;

Let’s look at each of these pieces separately:


The selector is the piece of content that we want to target and style. It is either an HTML element or a Class Name.

When defining an HTML element, we use the tag name without the opening and closing bracket. For example, the <p> (or paragraph tag) would simply be:


A Class Name always begins with a dot. For example,


We’ll get more into classes in a bit.


Properties and their respective values always live within curly braces:

p {

Properties are predefined terms within CSS that all web browsers understand. They are things like:

font-family, font-size, color, etc.

p {

A property is always followed by a colon (:)


The value is the particular style or variable you choose to assign to a property. For example:

p {
     font-family: Arial;
     font-size: 16px;
     color: gray;

A value is always followed by a semi-colon (;)

So the example above tells the browser that we want all of our page titles (or any element surrounded by an <p> tag) to be displayed in Arial font at 16 pixels in size and in the color gray.

Pretty easy, right? Let’s do another one.

a {
     color: pink;
     font-weight: bold;
     text-decoration: none;

This example tells the browser to make all links (anchor tags that look like this: <a>) within our blog the color pink, bold, and not underlined. (Browsers by default display links in blue with an underline).

text-decoration: is a predefined property that all browsers understand. I wish it was something easy like underline: but it’s not. After using CSS for a while, you begin to memorize the more common properties. But to make it easy for you, I’ve created a cheat sheet of all the most commonly used properties and their available values! Download your free CSS cheat sheet here!

Make sense so far?

Ok, I should make a disclaimer here.

In these last two examples, I used names for the colors instead of hex codes. While these are perfectly valid and will be read just fine by any browser, it really is best to use hex color codes or RGB values (explained in the cheat sheet) in your CSS. This will allow you to use very specific colors from your branding. Hex color codes look something like this:


You can find hex colors in any color picker tool or image editing tool.

Defining Multiple Elements

Ok, let’s do a little shorthand. Let’s say you want to use the same font and color to define your page titles and subtitles but display them in different font sizes (a common style request). We could define each HTML element separately like this…

h1 {
     font-family: Verdana;
     font-size: 24px;
     color: green;

h2 {
     font-family: Verdana;
     font-size: 20px;
     color: green;

h3 {
     font-family: Verdana;
     font-size: 18px;
     color: green;

…but since all three tags share the same font-family and color values, that creates a lot of repetition. Instead we can define multiple HTML elements together be separating them with commas, like this:

h1, h2, h3 {
    font-family: Verdana;
    font-size: 24px;
    color: green;

Now in order to change just the font-size of the h2’s and h3’s, we can override the font-size by defining them just below:

h2 {
    font-size: 20px;

h3 {
    font-size: 18px;

That’s how the cascade works! There’s no need to redefine the font-family and the color because they’ve already been defined up above. This also makes it easier in the future if you decide to change your font to something else. You only need to change it once instead of three times!

Either way is correct because the browser will understand both methods, but

a) it’s quicker for you to write and edit version 2 and
b) it helps your CSS to load faster because you’re keeping the file size smaller by cutting out the repetition.

Other Elements

We can style more than just text in our CSS. We can define the look of a widget or image for example. Let’s say you want a black border around all your images. Remember our <img> tag? Here’s how we do that:

img {
     border-width: 1px;
     border-style: solid;
     border-color: #000000;

This will add a one-pixel-width, solid, black border around all your images.

Related: How to Create a CSS Ombré (gradient) Background for Your Blog

CSS Classes

Now let’s say you didn’t want certain images on your web page to have a border on them, like your icons for example. We can add a class to those elements in the HTML to specifically target them. We add a class like this:

<img src="image/twitter-icon.png" class="icons" />

Note that there are NO spaces between the word class, the equal sign, or the double quotes.

You can name a class whatever you want, you just want to name it something that makes sense. Also note that there are never any spaces in class names.

In CSS, all class names begin with a dot. Now we go back into the CSS and add the following after the previous image style (defined above) so that it’s overridden:

.icons {
     border: none;

This will tell the browser to only apply this style declaration to image tags with the class “icons” added to it.

You can actually add this class to any HTML element that you don’t want a border around.

Nested CSS Styles

HTML tags can be nested within other HTML tags. For example, a bulleted (or unordered) list looks like this:

     <li>list item number one</li>
     <li>list item number two</li>
     <li>list item number three</li>

Now let’s say we want all our list items (li’s) in a list to be italicized. We would define it like this in the CSS:

li {
     font-style: italics;

But what if we wanted to target a particular unordered list, not all of them? We could do that by adding a class to our list items:

     <li class="slanted">list item number one</li>
     <li class="slanted">list item number two</li>
     <li class="slanted">list item number three</li>

This could get VERY cumbersome if we had 100 list items! So instead of adding a class to every <li> in our list, we can very easily do this by adding our class to the <ul> tag instead:

<ul class="slanted">
     <li>list item number one</li>
     <li>list item number two</li>
     <li>list item number three</li>

But now we need a slight change to our CSS. Since the class is applied to the parent element of the <li> tag, this is how we handle that:

.slanted li {
     font-style: italic;

Do you see what I did there? I added the class name, then a space, THEN the li tag. This tells the browser to italicize ALL li tags within the class named “slanted.”

Related: How to Make Your Text Appear Letterpressed with CSS

Troubleshooting and Common Syntax Errors

Sometimes after editing your style sheet, you might get an error or find that a particular style definition is not working when you refresh your browser window. Oftentimes, these are caused by syntax errors.

Browsers can be very particular when it comes to proper syntax and one little mistake can throw everything off. If this happens…

  • Check your style sheet for missing semi-colons, spelling errors or missing opening and closing curly braces.
  • Did you forget the dot before a class name or add a dot before an HTML element?
  • Are there commas between multiple selectors?

Your error may be in your HTML:

  • Did you follow the word ‘class’ with an equal sign and no spaces?
  • Did you surround the class name with double quotes?
  • Is the class name spelled exactly the same in the HTML as it is in the CSS?

Take a Peek Under the Hood

Did you know that there’s an easy to way to view the HTML and CSS from any website? We can do that with a tool called Inspect Element that’s built into every browser.

To get to it, highlight any part of a website, then right-click and select “Inspect Element” (sometimes just “Inspect” depending on the browser). If you’re using Internet Explorer, you just have to click F12.

A window should now pop up near the bottom of your screen with a bunch of code. On the left you’ll see the HTML for the page. This is an easy way to learn how HTML works! Here you can see the tags used to wrap around the various elements.

On the right is all the CSS for the page. If you click on a certain HTML element in the left side, on the right you’ll see all the corresponding styles that are applied to that element in the style sheets. Any crossed out styles mean that they have been overwritten by other styles.

NOTE: In all the major browsers, the style definitions that appear at the top are the styles that override the ones below. You’re viewing the style sheet upside down. Internet Explorer (because it’s annoying and likes to be different) displays the definitions the opposite way.

Hey New Coder! How About a CSS Cheat Sheet?

I want to help you remember what we learned here today so I’ve got another gift for you: A CSS cheat sheet just for bloggers! It includes all the common properties and values you’ll most likely use or run into while customizing your blog.

What is CSS for bloggers + beginners. Download a free CSS cheat sheet just for bloggers at DesignYourOwnBlog.com!

Have I mentioned that I’m working on something special that’s just for bloggers who are total beginners to HTML and CSS? Download your free cheat sheet now and I’ll keep you updated!

CSS Questions?

Soooooo what did you think? Did this make sense? Was it easy to understand or too complicated? Your feedback will help me create the best workshop experience for you!

Now go find out How to Edit CSS in Your Blog!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com


  • Sascha says:

    I’m definitely going to have to read this one twice (or three times lol)! CSS seems a little more complicated that HTML. But you definitely broke it down in a great way. Thanks for sharing !!!

    • Marianne says:

      Thanks for that feedback Sascha! CSS is a little more complicated, you’re right. Maybe I should have kept it even simpler this first time around 😉 I’m taking note!

  • Mary-Anne says:

    Thanks Marianne. I will try some out to reinforce my learning here. This is really useful. It’s like learning another language..but easier I think…..it is but logical. It’s just a matter of getting familiar. Can’t wait to learn more!!

    • Marianne says:

      Exactly Mary-Anne! It’s another language but it definitely is logical. I look at CSS like a puzzle and the more you use it, the easier it gets.

  • Meera says:

    Great post again Marianne! You have no idea the number of times I’ve referred to your site while trying to get my blog up and running. I thought I’ll never learn CSS but it does get easier once you make an effort to figure it out. You actually start to understand the lingo after some time. And not to mention how satisfying it is when stuff work how you want it too. Thanks again for your posts and CSS content bombs 🙂

    • Marianne says:

      Oh Meera, that is so sweet of you to say! I”m so so happy to hear you found this so helpful. I personally LOVE working with CSS and I too find it incredibly satisfying because of the “instant gratification” aspect of it. Way to keep at it!

  • Cat says:

    Marianne this is a great post! I am not a complete techphobe but CSS has been something I’ve shyed away from as it just felt to difficult. You make it super clear and although admittedly it will still take a bit of time to put into practice at least now I have begun to understand it. Thanks!

    • Marianne says:

      You don’t know how happy it makes me to read this Cat! I know it takes a minute to fully wrap your mind around it, but I truly believe that anyone can get it. I hope you’ll make good use of the cheat sheet for reference!

  • Robbie says:

    This is such a helpful post. I’ve figured out some CSS some on my own thus making me very dangerous 🙂 This helps fill in the details. I’ve pinned it so I can read it over. Thanks.

    • Marianne says:

      Thank you for sharing it Robbie, I am so glad to hear that this helps to fill in the gaps. I can’t wait to launch my workshop to fill in even more!

  • Barb says:

    I am totally lost, I’ve read this now four times and I just can’t seem to get it through my brain. I have downloaded the cheat sheet perhaps I will get it then. May I ask a question, could this coding allow me to get a list of the email addresses for people who click to follow the blog, or can it help me set up a way for them to put in their email and it automatically goes on a list? I’m really not tech savvy and I want so much to grow my email list but I can’t even figure out how to get one.

    • Marianne says:

      Hi Barb, I’m sorry it’s difficult to understand. Did you read the HTML post first? It’s best to get a basic understanding of HTML before you try to understand CSS.

      CSS is what affects the style and look and feel of your blog, so no that won’t help you with collecting email addresses. You have to sign up for an email service provider like MailChimp that will provide a form you can place on your blog and then collect the entries for you. At least MailChimp is free until you reach 2000 subscribers so its a great option for new bloggers.

  • Julie says:

    Great explanation, thank you! I am a subscriber, but I have been unable to download the CSS cheat sheet. Is it not available yet?

  • Honestly? I feel like my head’s going to explode! But thanks nonetheless for a great guide 🙂

    • Marianne says:

      Hi Carol, thanks for your feedback, I’m sorry you found it confusing! I actually just went back and tried to simplify the post a bit. If you get a chance, go back and see if it makes a bit more sense to you.

  • Thanks for the info. This is the first place I’ve ever seen CSS explained for normal (non-coding) humans. I’m not saying I got it on the first time through, but I’ll be keeping the cheat sheet and referring to it, if I get brave enough to go mess around under the hood of my blog. And I know you hear this all the time, but your site is beautiful.

    • Marianne says:

      Thanks Darla, that is super helpful feedback! I am glad that you felt it was explained for non-coding humans, but it sounds like I have a tiny bit more work to do on simplifying it even more. Thanks so much for the compliments too!

  • Sarah Alford says:

    This is amazing! As is the html guide too. I did a basic utmost course years ago but never did css. You explain it so simply! TY

  • Megan says:

    Thank you so much for posting this! I just purchased a new theme and was so frustrated when I realized it didn’t have built in options to customize the colors. I thought I’d be stuck with the theme’s original color which doesn’t match my color scheme at all. After reading your post I decided to try updating my CSS and it worked! I still have a long way to go in beautifying my webpage, but I’m one step closer and feel like I have control over the design now.

    • Marianne says:

      That is so awesome Megan, huge high fives to you!! I just took a peak at your blog and I think it looks really great btw, so you’re not far off!

  • Courtney says:

    Great article!!!! I’ve been trying to design my teaching blog this summer and oh my goodness I’m struggling!!! I was able to follow your article pretty well but it isn’t what I need to fix my blog design. Any input you have on shifting my blog around would be greatly appreciated!!

    • Marianne says:

      Hi Courtney, glad you like it but sorry it wasn’t the cure for your current issue. Can you explain more about what you mean by “shifting your blog around?”

  • Liza says:

    Hi! I will also have to read this CSS thing twice 🙂 I agree, it’s more complicated than HTML. But thanks for this information. Adding to my storehouse of knowledge to get me going. Thanks a lot!

Leave a Reply

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

CommentLuv badge