img with two different properties in css - html

Question

I would like to be able to have for example two img classes with different properties. For example in css I want to have:
img {
padding-left: 15pt;
float: right;
}
and then:
img1 {
padding-left: 15pt;
float: left;
}
where img1 should be a tag for image so I can use it in html for example as:
<img1 src="myimage.png" alt="m"/>
How can I do that?

Answer 1

What you are using like <img1 /> is invalid HTML tag, inorder to select the elements uniquely, we define class or id to the elements, even if for some reason you don't want to define a class or an id, you can define Custom Attributes to the element, having a prefix of data- but you cannot define Custom HTML Elements, ..
Defining class to each img tag.. (Declaring id, make sure they are unique for each, you cannot use the same id on multiple elements..)
<img src="" class="img1" />
<img src="" class="img2" />
And than we write respective CSS like
.img1 {
/* Selects element having a class of .img1 */
}
.img2 {
/* Selects element having a class of .img2 */
}
Supposing you have common properties to be declared for both, group them using a comma, and than redeclare the unique properties for the other class like
.img1, .img2 {
padding-left: 15pt;
/* Other common properties goes here */
}
.img2 {
/* Unique properties for .img2 */
}
If you are not looking to assign a class to each img tag, than you can use :nth-of-type or :nth-child pseudo to select each img, but make sure you wrap them using a div or section anything you feel is appropriate...
Suppose we wrap them inside a div tag, and we assign a class say .container
<div class="container">
<img src="" />
<img src="" />
</div>
So here you can select the first img as
.container img:nth-of-type(1) {
/* Properties here will apply to first img tag nested inside element having
class of .container */
}
.container img:nth-of-type(2) {
/* Properties here will apply to second img tag nested inside element having
class of .container */
}
Note: These are CSS3 pseudo, but these are widely supported but as usual, older IE versions will spoil the game, though polyfills are available, but at the end you have to decide you want to choose what.
Also, specificity matters in each of the selectors I've defined above, if you aren't aware of specificity, than give a quick read here...

Answer 2

You can not define custom tags in html, should use CSS classes for what you want to accomplish.
<img class=img1 src="myimage.png" alt="m"/>
<img class=img2 src="myimage2.png" alt="m"/>
.img1 {
padding-left: 15pt;
float: left;
}
.img2 {
padding-left: 15pt;
float: right;
}