How to Fix “CSS Error: Expected ‘:’ but found ‘/’. Declaration dropped”

.

If you are inspecting your website using the Firefox Web Developer Toolbar or Console, you might occasionally encounter a strange warning that says: “CSS Error: Expected ‘:’ but found ‘/’. Declaration dropped. Line: 0”.

The frustrating part about this error is that when you run your CSS file through the official W3C CSS Validator, it shows 100% valid with no issues. So, why does Firefox trigger this warning?

In this quick guide, we will look at the two most common mistakes that cause this issue and how to fix them instantly.

Cause1: The Wrong Attribute in the <link> Tag (Most Common)

The most frequent reason for this error has nothing to do with your actual .css file. Instead, it happens because of a small typo in your HTML file where you import or link the stylesheet.

Developers often accidentally write style=”text/css” instead of type=”text/css” inside the <link> tag.

• Incorrect Code (Triggers Error): ❌

html 
<link href="style.css" style="text/css" rel="stylesheet" />

html 
<link href="style.css" style="text/css" rel="stylesheet" />

• Why it fails: Firefox sees the style attribute and expects inline CSS properties (like color: blue;). When it detects the forward slashes / inside text/css, it gets confused and drops the declaration.

How to Fix it:

Simply change the word style to type inside your linking tag. Copy the correct code below:

html 

<!-- Correct Code -->
<link href="style.css" type="text/css" rel="stylesheet" />

html 

<!-- Correct Code -->
<link href="style.css" type="text/css" rel="stylesheet" />

(Note: If you are using HTML5, you can completely remove type=”text/css” as it is no longer strictly required!)

Also Read: [How to use Google Fonts in HTML and CSS]

Cause 2: Typo in Inline HTML Style Attributes

Another common place where this error triggers is inside your HTML body elements when writing inline styles. If you accidentally use an equal sign (=) instead of a colon (:) to define a property, Firefox will throw this warning.

Incorrect Code (Triggers Error): ❌

html 

<!-- Wrong syntax inside inline style -->
<div style="height=50px;">Content</div>

html 

<!-- Wrong syntax inside inline style -->
<div style="height=50px;">Content</div>

How to Fix it:

Always use a colon (:) to separate the CSS property from its value. Copy the corrected code syntax below:

html 

<!-- Correct syntax -->
<div style="height:50px;">Content</div>

html 

<!-- Correct syntax -->
<div style="height:50px;">Content</div>

Conclusion

Whenever you see a CSS error pointing to Line 0, it is a huge hint that the bug is residing inside your HTML/PHP file structure rather than the stylesheet itself. Always double-check your <link> tags and inline styles for missing colons.