How to Link Styles Elements With Html-CodePudding

Hey guys im new heres my code:

    img {
        display: grid;
        grid-template-columns: 10fr minmax(8.5in);
    }



</style>

<body>
    <article>
       <p>Blog Main</p> 
    </article>

    <img src="logo.png" alt="world" width="100px" height="100px">
    <link rel="img">

How do i link the img elelemnt so i can style each individual one?

Thanks

CodePudding user response：

There are several ways to do it. You could use classes or ids.

<head>    
    <style>
        img.image1 {
            display: grid;
            grid-template-columns: 10fr minmax(8.5in);
            width: 100px;
            height: 100px;
        }
        .image2 {
            display: grid;
            grid-template-columns: 10fr minmax(8.5in);
            width: 150px;
            height: 150px;
        }
        // Or use ids
        #image3 {
            display: grid;
            grid-template-columns: 10fr minmax(8.5in);
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <article>
       <p>Blog Main</p> 
    </article>

    <img src="logo.png" alt="world" class="image1">
    <img src="logo.png" alt="world" class="image2">
    <img src="logo.png" alt="world" id="image3">
    <link rel="img">
</body>

CodePudding user response：

Add a class to the img tag, then add the style to the class.

Example

<style>
.img_1 {
   border: 3px solid red;
}
</style>

<img class="img_1" src="file.png">