Common CSS Mistakes to Avoid

Introduction

CSS is powerful, but small mistakes can stop styles from working.

A missing colon, a missing semicolon, a misspelled property, or the wrong selector can make a rule fail.

For example, this CSS looks close to correct:

1p {2  color blue;3}

But it is missing a colon.

The correct version is:

1p {2  color: blue;3}

CSS is usually forgiving.

If the browser finds one invalid declaration, it may ignore that declaration and continue reading the rest of the stylesheet.

That means a page may partly work while one style silently fails.

This article explains common CSS mistakes and how to avoid them, with a focus on syntax errors, missing semicolons, wrong selectors, and invalid values.

Why CSS Mistakes Happen

CSS has a simple structure, but it must still be written correctly.

A basic CSS ruleset looks like this:

1selector {2  property: value;3}

For example:

1h1 {2  color: navy;3}

This includes:

1a selector2curly braces3a property4a colon5a value6a semicolon

If one of these parts is missing or written incorrectly, the browser may ignore the rule or declaration.

Mistake 1: Missing the Colon

A CSS declaration needs a colon between the property and the value.

Incorrect:

1p {2  color blue;3}

Correct:

1p {2  color: blue;3}

The property is:

1color

The value is:

1blue

The colon tells the browser where the property ends and the value begins.

Without the colon, the browser cannot read the declaration properly.

Mistake 2: Missing Semicolons

A semicolon separates one declaration from the next.

Incorrect:

1p {2  color: blue3  font-size: 18px;4}

Correct:

1p {2  color: blue;3  font-size: 18px;4}

The missing semicolon after color: blue can stop the browser from reading the next declaration correctly.

If there is only one declaration, the final semicolon may still be understood by the browser:

1p {2  color: blue3}

However, it is better to use semicolons consistently:

1p {2  color: blue;3}

This helps prevent errors when you add more declarations later.

Mistake 3: Forgetting Curly Braces

CSS declarations must go inside curly braces.

Incorrect:

1h12  color: navy;

Correct:

1h1 {2  color: navy;3}

The opening brace starts the declaration block:

1{

The closing brace ends it:

1}

If you forget the braces, the browser will not know which declarations belong to the selector.

Mistake 4: Forgetting the Closing Brace

A missing closing brace can affect the CSS that follows.

Incorrect:

1h1 {2  color: navy;3 4p {5  color: #333333;6}

Correct:

1h1 {2  color: navy;3}4 5p {6  color: #333333;7}

In the incorrect example, the h1 rule never closes properly.

This can cause later CSS to be ignored or interpreted incorrectly.

When a large section of CSS suddenly stops working, check for missing closing braces.

Mistake 5: Using the Wrong Selector

CSS only applies if the selector matches the HTML.

For example, this CSS targets a class called intro:

1.intro {2  font-size: 1.2rem;3}

But this HTML does not have that class:

1<p class=”introduction”>Welcome to the page.</p>

The selector .intro will not match class="introduction".

A matching version would be:

1<p class=”intro”>Welcome to the page.</p>

or the CSS could be changed to:

1.introduction {2  font-size: 1.2rem;3}

Selector names must match exactly.

Mistake 6: Forgetting the Dot for Class Selectors

A class selector needs a dot.

HTML:

1<p class=”note”>This is a note.</p>

Incorrect CSS:

1note {2  color: blue;3}

Correct CSS:

1.note {2  color: blue;3}

Without the dot, note is treated as an element selector.

The browser looks for an element called <note>.

It does not target class="note".

Mistake 7: Forgetting the Hash for ID Selectors

An ID selector needs a hash symbol.

HTML:

1<section id=”contact”>2  <h2>Contact Us</h2>3</section>

Incorrect CSS:

1contact {2  padding: 32px;3}

Correct CSS:

1#contact {2  padding: 32px;3}

Without the hash symbol, contact is treated as an element selector.

The browser looks for an element called <contact>.

It does not target id="contact".

Mistake 8: Mixing Up Classes and IDs

Classes and IDs use different selector symbols.

A class uses a dot:

1.card {2  border: 1px solid #cccccc;3}

An ID uses a hash:

1#main-content {2  padding: 24px;3}

HTML:

1<article class=”card”>…</article>2<main id=”main-content”>…</main>

This will not work if the selector type is wrong.

Incorrect:

1#card {2  border: 1px solid #cccccc;3}

if the HTML uses:

1<article class=”card”>…</article>

Correct:

1.card {2  border: 1px solid #cccccc;3}

Use . for classes and # for IDs.

Mistake 9: Misspelling Property Names

CSS property names must be spelled correctly.

Incorrect:

1p {2  colour: blue;3}

Correct:

1p {2  color: blue;3}

CSS uses American English spelling for color.

Another incorrect example:

1h1 {2  font-szie: 2rem;3}

Correct:

1h1 {2  font-size: 2rem;3}

If a property name is misspelled, the browser usually ignores that declaration.

Mistake 10: Using Invalid Values

Even if the property name is correct, the value must also be valid.

Incorrect:

1p {2  color: darkishblue;3}

Correct:

1p {2  color: darkblue;3}

Another incorrect example:

1h1 {2  font-size: largepx;3}

Correct:

1h1 {2  font-size: 32px;3}

The browser ignores values it does not understand.

Use valid values for each CSS property.

Mistake 11: Missing Units

Many CSS values need units.

Incorrect:

1.card {2  padding: 20;3}

Correct:

1.card {2  padding: 20px;3}

The value 20 is incomplete for padding.

The browser needs a unit such as:

1px2rem3em4%5vh6vw

However, zero does not need a unit:

1body {2  margin: 0;3}

This is valid because zero is zero in any length unit.

Mistake 12: Adding Units Where They Are Not Needed

Some CSS properties do not use length units.

Incorrect:

1p {2  line-height: 1.6px;3}

This is not always invalid, but it is probably not what you want.

A better version is:

1p {2  line-height: 1.6;3}

A unitless line-height is commonly used because it scales with the font size.

Another example:

1.card {2  opacity: 50px;3}

Correct:

1.card {2  opacity: 0.5;3}

Different properties expect different types of values.

Mistake 13: Using HTML Syntax in CSS

HTML uses angle brackets.

CSS selectors usually do not.

Incorrect CSS:

1<p> {2  color: blue;3}

Correct CSS:

1p {2  color: blue;3}

HTML:

1<p>This is a paragraph.</p>

CSS:

1p {2  color: blue;3}

Use angle brackets in HTML.

Do not use angle brackets around element selectors in CSS.

Mistake 14: Writing CSS in HTML Without a Style Element

If you write CSS directly in an HTML file, it must go inside a <style> element.

Incorrect:

1<head>2  p {3    color: blue;4  }5</head>

Correct:

1<head>2  <style>3    p {4      color: blue;5    }6  </style>7</head>

For most real projects, external CSS is usually better:

1<link rel=”stylesheet” href=”styles.css”>

Then write the CSS in styles.css.

Mistake 15: Forgetting to Link the CSS File

If your CSS is in an external file, the HTML must link to it.

Less complete:

1<head>2  <title>My Page</title>3</head>

Correct:

1<head>2  <title>My Page</title>3  <link rel=”stylesheet” href=”styles.css”>4</head>

If the stylesheet is not linked, the browser cannot apply it.

If none of your CSS is working, check the <link> element first.

Mistake 16: Using the Wrong CSS File Path

This only works if styles.css is in the same folder as the HTML file:

1<link rel=”stylesheet” href=”styles.css”>

If the CSS file is inside a folder called css, use:

1<link rel=”stylesheet” href=”css/styles.css”>

If the HTML file is inside a subfolder, you may need:

1<link rel=”stylesheet” href=”../css/styles.css”>

Wrong file paths are one of the most common reasons CSS does not load.

Mistake 17: Forgetting rel="stylesheet"

The <link> element needs rel="stylesheet" for CSS.

Incorrect:

1<link href=”styles.css”>

Correct:

1<link rel=”stylesheet” href=”styles.css”>

The rel attribute tells the browser that the linked file is a stylesheet.

Without it, the browser may not apply the CSS file correctly.

Mistake 18: Expecting Inline, Internal, and External CSS to Behave Separately

CSS from different places can interact.

For example:

1<head>2  <style>3    h1 {4      color: green;5    }6  </style>7</head>8<body>9  <h1 style=”color: navy;”>Welcome</h1>10</body>

The inline style may override the internal style.

That means the heading appears navy, not green.

CSS can come from:

1browser default styles2external stylesheets3internal style elements4inline style attributes

These sources work together through the cascade.

Mistake 19: Not Understanding Rule Order

When selectors have the same strength, later rules can override earlier rules.

Example:

1p {2  color: black;3}4 5p {6  color: blue;7}

The paragraph will usually appear blue because the second rule comes later.

Order matters.

This is especially important when using multiple CSS files:

1<link rel=”stylesheet” href=”base.css”>2<link rel=”stylesheet” href=”theme.css”>

If both files style the same property with equal specificity, the later file may win.

Mistake 20: Ignoring Specificity

Specificity is how the browser decides which selector is stronger.

Example:

1p {2  color: black;3}4 5.intro {6  color: blue;7}

HTML:

1<p class=”intro”>Welcome to the page.</p>

The paragraph appears blue because .intro is more specific than p.

Another example:

1.intro {2  color: blue;3}4 5#main-intro {6  color: green;7}

HTML:

1<p id=”main-intro” class=”intro”>Welcome to the page.</p>

The paragraph may appear green because the ID selector is more specific.

If a rule is not applying, another more specific rule may be overriding it.

Mistake 21: Using IDs for Reusable Styles

IDs should be unique on a page.

This is not suitable:

1<p id=”note”>First note.</p>2<p id=”note”>Second note.</p>

Better:

1<p class=”note”>First note.</p>2<p class=”note”>Second note.</p>

CSS:

1.note {2  background-color: #f5f5f5;3}

Use classes for reusable styles.

Use IDs for unique elements or page anchors.

Mistake 22: Using the Same ID More Than Once

An ID should identify one specific element.

Incorrect:

1<section id=”content”>First section</section>2<section id=”content”>Second section</section>

Correct:

1<section id=”intro”>First section</section>2<section id=”details”>Second section</section>

Duplicate IDs can cause problems with CSS, JavaScript, links, labels, and accessibility relationships.

For repeated styling, use a class instead:

1<section class=”content-section”>First section</section>2<section class=”content-section”>Second section</section>

Mistake 23: Choosing Class Names That Do Not Match the HTML

CSS:

1.error-message {2  color: red;3}

HTML:

1<p class=”error-msg”>Please enter your email address.</p>

The class names do not match.

The CSS uses:

1error-message

The HTML uses:

1error-msg

The browser will not treat these as the same class.

Correct:

1<p class=”error-message”>Please enter your email address.</p>

or update the CSS selector:

1.error-msg {2  color: red;3}

Class names must match exactly.

Mistake 24: Confusing Spaces and Hyphens in Class Names

This is one class:

1<p class=”error-message”>Error text.</p>

The matching selector is:

1.error-message {2  color: red;3}

This is two classes:

1<p class=”error message”>Error text.</p>

The classes are:

1error2message

They can be selected separately:

1.error {2  color: red;3}4 5.message {6  font-weight: bold;7}

Spaces separate class names.

Hyphens are part of a class name.

Mistake 25: Putting Important Content in CSS

CSS can add decorative content with pseudo-elements, but important content should be in HTML.

Less suitable:

1.button::after {2  content: “Submit application”;3}

Better:

1<button type=”submit”>Submit application</button>

Important text should be part of the HTML so users, browsers, assistive technologies, and search engines can access it reliably.

CSS should control presentation, not provide essential content.

Mistake 26: Removing Focus Styles

Some CSS removes focus outlines:

1a:focus,2button:focus {3  outline: none;4}

This can make a page harder to use with a keyboard.

Better:

1a:focus,2button:focus {3  outline: 2px solid #0055cc;4  outline-offset: 2px;5}

Focus styles show users which element is active.

Do not remove them unless you provide a clear replacement.

Mistake 27: Using Fixed Widths Everywhere

Fixed widths can break layouts on small screens.

Less flexible:

1.container {2  width: 1200px;3}

Better:

1.container {2  width: 90%;3  max-width: 1200px;4}

The better version lets the container shrink on small screens and stop growing too wide on large screens.

Use flexible layouts when possible.

Mistake 28: Forgetting Responsive Images

Large images can overflow their containers.

Less flexible:

1img {2  width: 800px;3}

Better:

1img {2  max-width: 100%;3  height: auto;4}

This allows images to shrink when the container is smaller.

The height: auto keeps the image proportions correct.

Mistake 29: Using display: none Without Considering Users

This hides an element completely:

1.alert {2  display: none;3}

That may be correct if the alert should not be shown.

However, do not use display: none for content that users still need.

Hidden content may not be available to many users, including screen reader users.

Use hiding carefully.

If content is important, make sure users can access it when needed.

Mistake 30: Expecting CSS Comments to Use //

CSS comments use /* ... */.

Incorrect:

1// This is a comment2p {3  color: blue;4}

Correct:

1/* This is a comment */2p {3  color: blue;4}

JavaScript can use //.

CSS normally uses /* ... */.

Using the wrong comment syntax can cause CSS errors.

Mistake 31: Forgetting to Close CSS Comments

Incorrect:

1/* Card styles2.card {3  padding: 24px;4}5 6p {7  color: #333333;8}

Correct:

1/* Card styles */2.card {3  padding: 24px;4}5 6p {7  color: #333333;8}

If a comment is not closed, the browser may ignore a large part of the stylesheet.

When CSS suddenly stops working after a comment, check that the comment ends with:

1*/

Mistake 32: Overusing !important

The !important flag makes a declaration harder to override.

Example:

1p {2  color: red !important;3}

This can be useful in rare cases, but overusing it makes CSS harder to manage.

If you use !important often, it may mean your selectors, order, or structure need review.

Better:

1.article p {2  color: red;3}

Use better selectors before reaching for !important.

Mistake 33: Not Checking Browser Developer Tools

If CSS is not working, developer tools can show why.

Use Inspect to check:

1whether the element has the class or ID you expect2which CSS rules apply3which rules are crossed out4whether a declaration is invalid5whether the CSS file loaded6where spacing is coming from7which rule is active

Do not guess.

Inspect the element.

Developer tools are one of the fastest ways to find CSS mistakes.

Mistake 34: Ignoring Crossed-Out CSS

In developer tools, crossed-out CSS usually means a declaration is being overridden or is invalid.

For example:

1p {2  color: black;3}

may be crossed out because this rule is winning:

1.intro {2  color: blue;3}

HTML:

1<p class=”intro”>Welcome.</p>

A crossed-out rule is evidence.

It tells you that the browser read the rule, but another rule or issue prevents it from being active.

Mistake 35: Not Saving Files Before Testing

Sometimes the CSS is correct, but the file is not saved.

If changes are not appearing, check:

1is the HTML file saved?2is the CSS file saved?3did the browser refresh?4is the browser showing a cached version?

A hard refresh or private window can help when caching is confusing.

But first, make sure your files are saved.

A Broken CSS Example

Here is a CSS example with several mistakes:

1card {2  background-colour white3  padding: 20;4  border-radius 8px;5}6 7#intro {8  color: darkishblue;9}10 11p {12  font-szie: 18px;13}

Problems include:

1missing dot for .card2misspelled background-color3missing colon4missing semicolon5missing unit on padding6invalid colour value7misspelled font-size

A corrected version:

1.card {2  background-color: white;3  padding: 20px;4  border-radius: 8px;5}6 7#intro {8  color: darkblue;9}10 11p {12  font-size: 18px;13}

Small syntax errors can cause several styles to fail.

A Broken HTML and CSS Example

CSS:

1.intro-text {2  color: navy;3  font-size: 1.2rem;4}

HTML:

1<p class=”intro”>Welcome to the page.</p>

The CSS does not apply because the class names do not match.

Correct option 1:

1<p class=”intro-text”>Welcome to the page.</p>

Correct option 2:

1.intro {2  color: navy;3  font-size: 1.2rem;4}

The selector and the HTML class must match exactly.

A Useful Debugging Checklist

When CSS does not work, check these points.

First, check whether the CSS file is linked:

1<link rel=”stylesheet” href=”styles.css”>

Then check whether the file path is correct.

Then check whether the selector matches the HTML.

Then check the syntax:

1curly braces2colons3semicolons4property spelling5valid values6units7closed comments

Then inspect the element in browser developer tools.

Look for crossed-out rules, invalid declarations, and active styles.

Best Practices

Write CSS slowly and check the syntax.

Use property: value; for each declaration.

Use semicolons consistently.

Close every ruleset with a closing brace.

Use valid property names.

Use valid values for each property.

Use units where needed.

Use . for class selectors.

Use # for ID selectors.

Make sure selectors match the HTML exactly.

Use classes for reusable styles.

Avoid duplicate IDs.

Avoid unnecessary inline styles.

Avoid overusing !important.

Keep focus styles visible.

Use flexible widths instead of fixed widths where possible.

Use browser developer tools to inspect active rules.

Validate or lint CSS when possible.

Save files before refreshing the browser.

Summary

CSS mistakes are often small, but they can stop styles from working.

Common problems include missing colons:

1color blue;

instead of:

1color: blue;

missing semicolons:

1color: blue2font-size: 18px;

instead of:

1color: blue;2font-size: 18px;

wrong selectors:

1note {2  color: blue;3}

instead of:

1.note {2  color: blue;3}

and invalid values:

1color: darkishblue;

instead of:

1color: darkblue;

The main idea is to be precise.

CSS depends on correct syntax, matching selectors, valid properties, and valid values.

When something does not work, inspect the element, check the active rules, and fix one issue at a time.