Skip to content

Top 5 CSS Mix-ups—and How to Avoid Them

Coding can be such a pain. We’ve all been at that point where we get one letter or punctuation wrong and nothing changes. To help you steer clear of any more mishaps, here are the top 5 things you might commonly mess up, and how to avoid them.


1. Selecting the wrong HTML element

It’s frustrating when you only want to change the colour or font of one heading and end up changing the colour of the text on your entire blog. The amount of times this happens is not surprising.

Oftentimes while doing CSS, we select the wrong HTML element. For example, instead of   selecting h4 to make changes to all Heading 4 elements, you might have selected h1 or h2 thinking nothing of it.

How to avoid it:

On WordPress, work with two tabs open – one with your Additional CSS and one with your actual blog.

Work with two tabs open

Right click on your blog and select ‘Inspect’ and this will bring up the current HTML and CSS.

To edit a certain element, open the tab with your blog and hover your mouse over the HTML elements to see which part of your blog that element applies to.

Click on the element you want to edit and copy the CSS code into the CSS editor in the first tab. Then make the changes that you want to make.


2. Mixing up ID and Class selectors

ID’s begin with a ‘ . ‘

Classes begin with a ‘ # ‘

Or to make it easier, just remember: dot the I’s and #GetSomeClass


3.  Getting the syntax wrong

In general, the syntax for a CSS code is:

         Selector {

           Property: value unit;

         }

where the selector is the HTML element you would like to style and the property is the aspect of that element you are styling.

For example:

p {

font-size: 18px;

}

Don’t forget to open and close each selector with curly brackets ({ }), and to end every property with a semicolon ( ; ), otherwise the computer won’t run the code.


4. Typos

Because computers are stupid, any small typo will result in no changes in your blog’s appearance.

How to avoid it:

Make sure you go over everything you’ve written

CSS also accepts American English, so the spelling of certain words should be in American English. Otherwise the computer won’t run the code. Here are a few to watch out for:

  • Color instead of colour
  • Center instead of centre

5. Using the wrong unit

To make sure your code runs properly, make sure you use the right unit for the right property. Here’s a handy list of properties and their corresponding units:

  • Font size, border, padding, margin: px (pixels)
  • Columns and rows width and length: fr (fraction)
  • Box-model values (height, width): % (percentage)
  • Font for responsive design: em and rem (root em)

Have you got it? Here’s a recap of everything. Have a look, and try editing the CSS on your own blog!

Published inUncategorized

Be First to Comment

Leave a Reply

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