Why is my image style's applied to all images when I've specifically styled each? Please help me with this

HTML-CSS
1 
type or paste code here <!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 class="parent">

<header>
<h1 class="lulu"> 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 class="child-1">

<h3 style="color:white;">
...</h3>

<p>.</p>


<div class="row">
  <div class="column">
<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 class="column">
<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 class="column">
<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 class="row">
  <div class="column">
    <img src="child.png" alt="child" style="width:100%">
  </div>
  <div class="column">
    <img src="nanny.png" alt="nanny" style="width:100%">
  </div>
</div>


<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">


<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>

Blockquote

THIS IS THE CSS STYLING PART SO FAR

type or paste code here 
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%;}

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.

2

Hey! can you set up a codepen for your project so others can test and help you easily?

1 Like
3

Sure! Could you please tell me how to do that?

4

just go to

codepen.io

Create a new codepen , copy paste your code and share the link here.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.