Whenever I assign a className or id to my img tag in my javascript (using react.js) and then a style that references that id or class, the style does not get applied, however when I do the same for a div everything works fine.

<--javascript-->

import React from "react";
import TitleImage from './Images/TitleBG.png'
import TitleImage2 from './Images/TitleMG.png'
import TitleImage3 from './Images/TitleCG.png'
import './heade.css'; 

const TopHeading = () => {

    return(

        //Here is a div with the ID "TopHeading", this style gets applied.

        <div id="TopHeading">

            {/*This image with class "image1" does not get its style applied.*/}

            <img className="image1" alt="Dofus" src={TitleImage}/>
            <img width='auto' alt = "Memory Game" height='50px' src={TitleImage2}/>
            <img width='auto' alt = "Character" height='50px' src={TitleImage3}/>
            <div className="aDiv"></div>
        </div>
    );
};

<--css-->

#TopHeading{
    display: grid;
    align-items: center;
    justify-items: center;
  
    background-color: rgb(131, 192, 131);
    height: 300px;
};

.image1{
    border-style: solid;
    width: auto; 
    height:250px;
}

.aDiv{
    size: 50px;
    border-style: solid;

Here you can see the ID's style getting applied to the div.

And here is the image with the class's style being ignored fro some reason: