I wanted to id a picture in HTML to edit it in CSS, but it doesn't work. Here is the code:

#1{ border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%; }
<img src=""/>

But the picture isn't formatted the way I wanted to to be. So do I need to add the code into the HTML itself or what do I need to do?

2

6 Answers

You have already defined the id attribute, but this id value does not qualify the following criteria.

Must contain at least one character

Read the HTML5 specification.

But also if you are on HTML 4 the specification says:

ID must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Try with

#myimage { border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%; }
<img src=""/>
2

The MDN says:

Note: Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

Source:

HTML 4.01 spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

However, HTML5 spec and the WHATWG HTML Living Standard allows IDs start with digits:

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

So I would suggest to stick to the MDN recommendation: For compatibility reasons, don't start your ID or name with a digit. Instead id="1", use something like id="img1".

5

It's because you used a number. Switch to something like "one" instead.

Tempted to use something like "1800number_box" for a ID? Don't. Because it won't work. Class identifiers are allowed to start with a number, but ID identifiers are not.

ID’s Cannot Start With a Number

Assuming that you are learning CSS, you would most probably be looking for these two errors:

  • Your id does not start with numbers: change id = 1 to id="one"

  • The second possible error is that you are not putting the CSS in the correct area. Put the CSS in <style></style> tags in the <head></head>

For external stylesheets, remember to add this:

<link rel="stylesheet" type="text/css" href="mystyle.css">

If you will be reusing this style on any other images, you should style it by class instead.

<img src=""/>

Then:

.some-style { border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%; }

Now you can use this same styling over and over without having to add more to your CSS file, since there can only be one id element per page, but you can have as many elements as you want with the same class.

Try this:

#myimage, img.myimage { border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%; }
 <img src="">

Also you can try this way :

<img src="">