CSS Selectors
We make two img tags and add different images to them and put CSS on it and the background of both images is red. If we want to make our first image is color red and the second image color is blue so what we can do that.
We use CSS selectors. We use a class selector on both image tags. And we add class=”image-1” and in second we use class=”image-2”.
We style class image-1 bg-color is red and class image-2 bg-color is blue. So it changes both background colors.
For Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<img class="image-1" src="img1.png" alt="img-here">
<img class="image-2" src="img2.jpg" alt="second-img-here">
</body>
</html>
CSS:
.image-1 {
background-color: red;
}
.image-2 {
background-color: blue;
}
And it changes both background-color. In the next note, we talk about Classes and Ids.
Comments
Post a Comment