Why is my image style's applied to all images when I've specifically styled each?-CodePudding

I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape. also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess) other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't. how should I style those 3 to be squared?

body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}

.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}


.column {
float: left;
width: 30%;
padding: 5px;
}


.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}

.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}

.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}

.child-2 p{
color: black; 
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>

<body>

<div>
<div >

<header>
<h1 > DAYCARE</h1>
</header>

<style>
img {
  border: 1px solid #ddd;
  border-radius:2px;
  padding: 5px;
  max-width:auto;
  max-height:auto;
  display: block; 
  margin-left: auto;
  margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>


<div>
<div >

<h3 style="color:white;">
Child care: Making the best choice 
for your family</h3>

<p>.</p>


<div >
  <div >
<style>
img {
  border: 1px solid #ddd;
  border-radius:50%;
  padding: 5px;
  max-width:auto;
  max-height:auto;
 }
</style>
    <img src="house.jpg" alt="house" style="width:100px" style="height:100px">
  </div>


  <div >
<style>
img {
  border: 1px solid #ddd;
  border-radius:50%;
  padding: 5px;
  max-width:auto;
  max-height:auto;
}
</style>
    <img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
  </div>

  <div >
<style>
img {
  border: 1px solid #ddd;
  border-radius:50%;
  padding: 5px;
  max-width:auto;
  max-height:auto;
  }
</style>
    <img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>

<div >
  <div >
    <img src="child.png" alt="child" style="width:100%">
  </div>
  <div >
    <img src="nanny.png" alt="nanny" style="width:100%">
  </div>
</div>


<div>
<div style="position:relative; right:8px; top:90px;">
<div >


<h3>About us:</h3>
<p>.</p>

<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

</div>
</div>

<main>

<section>

</section>

</main>
</div>
</body>
</html>

CodePudding user response：

It is not ideal to use several differant styling options on one page. It is recommened that all styling is maintained seperately from your pages code.

e.g by using a css.

Using the img tag in your css will affect ALL img tags in your code.

If you want to add additional specific changes to certain images then you should add a class e.g

<img />

.fill {
  width:100%;
  height:100%;
}

SPECIFICITY

If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.

You can read more about that here: idk if u want like this or not