CSS classes case sensitive?

September 23rd, 2004

I didn’t know this before: It appears that css classes are case sensitive, but you must declare a proper doctype in your html document for this to work (html 4.01 and above).

For example, this stylesheet:

// myStyle.css

.myclass{
	background-color: Aqua;
	width: 50px;
	height: 50px;
}

.MyClass{
	background-color: Fuchsia;
	width: 100px;
	height: 100px;
}

whit this html document:

//test.html

 


 

will apply to each div the proper class.
If you test this in Mozilla Firefox or Netscape 7.1 it works stright away. If you take out the xml declaration it works even in IE6. But if you delete the doctype declaration, then both divs will take the style of the latter class (MyClass in this example).
I should probably note, that this has been only tested on my local PC, so i don’t know if this is true for the Mac as well…

Posted by klaut Filed in General

4 Responses to “CSS classes case sensitive?”

  1. Simeon Says:
    September 23rd, 2004 at 9:27 pm

    I didint apply the same testing that you did. But I came across an instance where I realized my code wasnt working because the css wanst cased correcntly and immediatly starting applying the same rigorous naming conventions that I do in java script to my css code.

    No more problems.

    Its always funny when something like that sneaks up on you though isnt it?

  2. Burak KALAYCI Says:
    September 24th, 2004 at 3:01 am

    Quite expected I’d say. Because W3C recommendations were designed for machines and browsers to process the content more easily. They didn’t care for human errors, or time lost by web developers.

    Best regards,
    Burak

  3. Todd Says:
    September 24th, 2004 at 3:17 am

    Yup, classes are case sensitive. :) All the books (including zeldman) mentioned it briefly that you should do everything lower case.

  4. Geoff Blow Says:
    September 24th, 2004 at 1:40 pm

    Yes, CSS is case sensitive. Instead of using the XML declaration (don’t use the XML declaration at all) that messes with IE, use the following meta tag inside the head tag. It should work just fine with IE and others.

    meta http-equiv=”content-type” content=”text/html; charset=utf-8″