CSS class starting with number is not getting applied

Question

I\'m trying to create a webpage that contains images. However, I want all the images to be the same size and in the same format. I have the following CSS class which applies

Answer 1

CSS class names should not begin with a number (unless you're willing to do what @torazaburo's answer describes). So perhaps change that, i.e. the class name from "200-200" to "s200-200".

.200 {
  color: red;
}
.s200 {
  color: red;
}

<div class="200">I'm not red :(</div>
<div class="s200">I am red :)</div>

Answer 2

For classes starting with numbers, you'll need to write

.\32 00-200 {
  width: 200px;
  height: 200px;
}

You'll probably want to avoid doing that.

The \32 represents the digit "2". The space following it is necessary to terminate the escape sequence.

The reason for this is that "CSS identifiers" may not start with numbers. In CSS, class names used in selectors are considered "CSS identifiers". Therefore, the leading number must be escaped in the way shown above. Note that there is no restriction from the HTML perspective on class names, other than they may not contain spaces. So you could write <div class="%^*+

Answer 3

Another very useful notation is this:

[class="200"]{
  width: 200px;
  height: 200px;
}

W3C specifications however state:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

So you might want to consider rethinking your class names instead

Answer 4

you Should not begin class name with number preferably.for fix it ,change class name.

.img-container {
    border: thin solid #C4C4C4;
    border-radius: 10px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.c200 {
    width: 200px;
    height: 200px;
} 

<div class="img-container c200"><img></div>