Common Reasons Why CSS Breaks


CSS can be pretty easy to use once you get the hang of it, but it has its complications. I post HTML/CSS tutorials here and there’s almost always at least one comment that says the CSS isn’t working for them. I’m sure all of us, at one time or another, has had CSS break/not work at all.

Like all computer languages, CSS has syntax. There is a certain way you have to write CSS and if you don’t follow that syntax, the CSS will break D: Oh no!

The thing about CSS is that you editor won’t tell you when you type in CSS incorrectly. In Blogger’s HTML editor, when you type HTML incorrectly, it displays an error and won’t let you save. In WordPress, if you type php incorrectly, you get the white screen of death. CSS just won’t work, so you don’t know if you typed it in wrong and have a syntax error or you’re using the wrong CSS for what you need.

I highly recommend saving your CSS often and checking on it. You should check how new CSS you’re adding is affecting old CSS you already have there.

So since the editor won’t tell us why the CSS isn’t working, how do we know what’s wrong? Check the syntax! Here are some common CSS related errors to look out for when you’re editing CSS:

1. You are missing a semicolon

Seems like something obvious to check for if you know CSS even a little, but when you’re typing quickly, sometimes you can forget it. It has happened to me more than once. That darn pinkie finger missed the semicolon! >_>

2. You’re missing beginning and end brackets

If you are new to CSS, styles are formatted like this:

Those brackets are very important because they mark the beginning and end of the styles to be applied to the HTML element. Forgetting an end bracket could then break other CSS you have below that new CSS. If you’re adding in something at the beginning of your style sheet, it could break a lot of things!

3. The CSS you’re applying won’t work for the HTML element

This can be a bit more complicated to figure out. It takes more knowledge on how HTML differs between elements. For example, compare a link to an paragraph tag. A link (a tag) is an inline element but an paragraph is a block style element. Oh and don’t forget the inline-block elements ;)

If you don’t know the difference, Google it. One reason your CSS could be “breaking” is because that style can’t be applied to an inline HTML element. For example, you can’t apply a width and height to a link tag when it has a display: inline; style applied to it (which is the default). You would have to override that for the link by setting the display: block; or display: inline-block; to get the width and height to work.

4. You spelled something wrong

Another simple mistake, but it happens. Something like this:

won’t work. :/ If you misspell the CSS property, the CSS will break. If you’re not sure how to spell it, or what the specific wording is, Google it. The first link will probably be from w3schools and is a great quick reference for HTML/CSS.

5. You’re referencing the wrong HTML element

If you had this CSS:

and you don’t have an HTML element with the ID announcements anywhere in your HTML, the CSS won’t work. If you have an HTML element with the ID announcement, the CSS won’t work because you have an extra ‘s’ in the CSS name. Make sure you’re referencing the correct HTML.

6. Incorrect value for a CSS property

CSS styles/properties only take certain values. You can’t just make something up. For example:

is not a valid value for text-align. If you’re not sure what values a CSS property will take, Google it.

7. The CSS is not compatible with that browser

Some CSS is newer than other CSS. The newer CSS (CSS3) won’t always work in older browsers (like IE 8) or even in some of the newer browsers. There may be CSS that works for Google Chrome, but not Firefox. One thing I really like about w3schools, is that they show the browser compatibility. Like this one:

Sometimes you have to make a trade off on this. How important is it for you to have that compatibility? How many of your readers even use older versions of IE? (Google Analytics can help you figure this out!).

8. You have duplicate CSS that is overriding your new CSS

This can be hard to catch! Let’s say at the end of your CSS sheet you have this CSS:

Then later on you go to add new CSS somewhere in the middle or at the beginning of your CSS styles to make it green

The style blue is further down in your CSS sheet and will override that green style that is near the top. CSS applies from the top down. It’s always best practice to search for .widget and see if it already exists, before adding a new style. You don’t want duplicate CSS like that because it can make it more complicated to figure out later.

You could force an override on the new CSS by using !important; but you should really only use that if you want to override CSS from plugins/widgets that are getting styles from outside sources. You shouldn’t have to override styles with !important that exist in your own style sheet. Just change the values in the ones that currently exist.

9. There is CSS that is more specific than the new CSS you are applying

This problem is similar to number 8’s. Let’s say you want to change all the heading 3 elements in your blog to blue. So you go through your CSS and change the h3 like this:

but it’s not working…why? The problem could be that there is another CSS style that is more specific than a simple h3. This gets deeper into the rules of CSS in how you specify with ID vs. Classes vs. Selectors. (Google it (sensing a theme with that yet?)) I’m not going to go deeply into how that works, but as an example, if I had this CSS:

that .widget h3 is more specific than a general h3 CSS. It’s specifically targeting all h3 elements in the widget area rather than all h3 elements in the entire site. This is a bit more advanced CSS knowledge, so if you’re confused, it may be better to learn about how CSS works first.


Leave a Reply

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

CommentLuv badge

4 thoughts on “Common Reasons Why CSS Breaks

  1. This is such a helpful post, thank you! I mean, css is still terrifying for me, but I at least feel a little braver with your advice. I’m still putting off updating (Read: ACTUALLY FINISHING) my site, but I’m feeling a little bit better about it now, so that’s something!
    Beth x
    (PS This is the first time (I think) I’ve visited your site, and it’s beautiful. I’m a new bloglovin follower!)