🙂 If we keep on selecting CSS elements using their general element names like
div,
p,
body, etc, we will run to a certain problem. Because we might have many p element or div elements. So, we need things called
classes and
ids.
Task
🙂 Create two separate rectangle shapes on a web page. Inside the divs open <p> tags and inside, write 'div1' on the first and 'div2' on the second. What would you do to set div1 to a background color of black
and div2 to a background color of blue?
<div><p>div1</p></div>
<div><p>div2</p></div>
NB: Remember that div without width and height won't form the rectangle. So, remember setting width and height to your divs. And also a background color to see them.
😉 The task won't be possible to do by selecting div and adding effects to it since it makes both div 1 and div 2 have the same effects. 😎 That is where we use CSS class and id selectors. They are used to identify and select
elements separately or in groups.
2.6.1. The ID Selector
😎 It helps you to select only a single element. Let's see this example below to understand it more.
<html>
<head>
<style>
</style>
</head>
<body>
<div id="div1"><p>div1</p></div>
<div><p>div2</p></div>
</body>
</html>
⭐ As you saw in the example above id="div1" was only given for div1 not div2.
NB: Two separate elements can't have the same id.
2.6.2. The Class Selector (The more flexible selector)
🙂 The class selector enables you to select either single or multiple elements.
<html>
<head>
<style>
</style>
</head>
<body>
<div class="box"><p>div1</p></div>
<div class="box"><p>div2</p></div>
</body>
</html>
⭐ As you can see in the example above class="box" was given for both div1 and div2.
NB: Two separate elements can have the same or different class.
🙂 Now having this basic understanding about class and id, let's go to our CSS to give div2 a background color of blue. There are two solutions for these.
Solution 1
1. Go and give div2 an id of div2.
2. Inside the style tag write "#div2". This code grabs the element with an id of div2.
⭐ "#" sign is used to represent id while '.' sign is used to represent class.
3. Set the background color to blue. And for div 1, set it to black.
4. Save your file and open it up on your browser. BOOOOOOOM it worked.
Solution 2
1. Go and give div2 a class of div2.
2. Inside the style tag write ".div2". This code grabs the element with an class of div2.
⭐ "#" sign is used to represent id while '.' sign is used to represent class.
3. Set the background color to blue. And for div 1, set it to black.
4. Save your file and open it up on your browser. BOOOOOOOM it worked.
Exercise:
A. Try giving both div1 and div 2 the same id. Set it to a background color of green. Do both div1 and div2 have the background color of green? Why?
B. Try giving both div1 and div2 the same class.
Set it to a background color of green. Do both div1 and div2 have the background color of green? Why?
2.6.3. Element Selectors
We have used element selectors before. But let's define them more now. Element selectors are used to select the same kind of elements from our HTML code and add styles to them by our CSS.
For
eg:
<html>
<head>
<style>
p {
color: purple;
}
</style>
</head>
<body>
<p>Hello</p>
<p>Goodbye</p>
<h1>Hi</h1>
</body>
</html>
Now the color of all p elements will be purple.
