Do you know HTML elements are easy to define by the class, ID name, attribute, and pseudo-state? The way you define them is what affects the way they customize these elements using CSS selectors. For instance, if you need to make any broad changes on a website, you got to use a specific type of selector. Like, if you want to style every span element on a site. For this, you would require a type selector span { style properties }.
And, to make the detailed changes, you further require a particular selector. The most precise one is an ID selector. So, let’s have a look at the selector type given below.
CSS ID selector
If we talk about CSS ID selectors, it uses the HTML element’s ID attribute for selecting one unique element on a given page. For using an ID selector in CSS, you have to simply type a hashtag (#) followed by the given ID of the HTML element. Further, you need to put the style properties you desire for applying the element in brackets.
Just check the syntax of an ID selection in CSS:
#idname { style properties }
There are certain rules that you need to follow for correctly using the CSS ID selection. But before taking a look at the rules (given below), let’s note down something important about the examples mentioned below.
We will be using BootstrapCDN for loading the default Bootstrap stylesheet. It means that the examples will get styled accordingly. Nonetheless, the CSS and HTML of the examples are likely to work on HTML5 sites too. It means that if you are building your website from scratch without the use of the Bootstrap framework, you are still likely to use CSS and HTML as templates.
How to Use ID in CSS
The very first rule you have to remember while using the ID attribute is that it needs to contain at least one character. But it must not begin with a number.
For instance, if you have multiple h2s on a website and each one marks the beginning of a new chapter. In this case, you have to give the ID name to each h2.
Given below is the correct HTML to use:
<h2 id=”C1″>Chapter 1</h2>
<h2 id=”C2″>Chapter 2</h2>
<h2 id=”C3″>Chapter 3</h2>
<h2 id=”C4″>Chapter 4</h2>
However, this is not correct:
<h2 id=”1″>Chapter 1</h2>
<h2 id=”2″>Chapter 2</h2>
<h2 id=”3″>Chapter 3</h2>
<h2 id=”4″>Chapter 4</h2>
Another rule to consider is that when an element is in a provided ID name, it needs to be unique on a page. This way, the ID selector gets to choose only one unique element.
When returning to the instance of multiple h2s, you need each h2s to have a distinct style for visually cueing a reader whenever a new chapter starts. In this case, the ID can provide each h2 with a distinct ID name. This means that one can use ID selectors for applying a distinct set of property values to each.
The given HTML is correct:
<h2 id=”C1″>Chapter 1</h2>
<h2 id=”C2″>Chapter 2</h2>
<h2 id=”C3″>Chapter 3</h2>
<h2 id=”C4″>Chapter 4</h2>
And, this one is incorrect:
<h2 id=”C4″>Chapter 1</h2>
<h2 id=”C4″>Chapter 2</h2>
<h2 id=”C4″>Chapter 3</h2>
<h2 id=”C4″>Chapter 4</h2>
The given CSS would change the size of each h2 font:
#C1 {
font-size: 18px;
}
#C2 {
font-size: 20px;
}
#C3 {
font-size: 22px;
}
#C4 {
font-size: 24px;
}
Here’s the final result:
The last rule to remember when you use ID selectors is that your ID selector’s property value needs to match with the exact ID name.
When using the HTML from the mentioned example, the following CSS needs to be correct.
#C1 {
font-size: 18px;
}
#C2 {
font-size: 20px;
}
#C3 {
font-size: 22px;
}
#C4 {
font-size: 24px;
}
And, it would be incorrect:
#c1 {
font-size: 18px;
}
#c2 {
font-size: 20px;
}
#c3 {
font-size: 22px;
}
#c4 {
font-size: 24px;
}
If we have to use this CSS using the lowercase “c,” the selectors of the CSS ID and the respective CSS rules won’t be applied to it. The h2 default style in the given Bootstrap may render instead, like shown below.
We have also covered the given rules for using the selector ID in CSS. Now, you need to apply those to use an ID selector to styling images.
CSS Image ID
You may further use the ID selector on the images or headings, buttons, as well as various other HTML elements.
Suppose, you need to style a particular image on a page. Probably, you need it in different opacity levels and shapes compared to other images on a given page. In this case, you may use a specific ID selector.
For beginning it, you have to add an ID attribute to an image. The given ID attribute may appear somewhere within the image element. It can come before the img src attribute, after both the img src and alt attributes, or after the src attribute but just before the alt attribute.
In the following example, we can place the “round” of the ID attribute before the alt and src attributes within the second image of the element. After that, we can use an ID selector for styling this image to become round and opaque (70%).
Here’s the HTML:
<img src=”https://source.unsplash.com/fk4tiMlDFF0/300×200/” alt=”tiniest puppy”>
<img id=”round” src=”https://source.unsplash.com/TzjMd7i5WQI/300×200/” alt=”tiny puppy”>
<img src=”https://source.unsplash.com/-Go4DH2pZbc/300×200/” alt=”least tiny but still tiny puppy”>
Here’s the CSS:
#round {
border-radius: 50%;
opacity: 0.7;
}
And, its result is:
Now that you know what exactly an ID selector is and how to make use of this in CSS, make sure to understand the difference between the ID and class in CSS.
CSS Class vs ID
A class is properly used in CSS to make a group of more than one element. On the other hand, the ID helps in identifying the single element. The class selector is further useful for styling multiple HTML elements of a similar class. Meanwhile, an ID selection is useful for styling one element of HTML. You may even recognize the class selector by a specific period (“.”) that it includes. It even includes the hash character (“#”)
Another major difference between the ID selector and class selector is its specificity. The CSS selectors include various levels of specificity. It means that it has an HTML element that’s targeted by various selectors. This is how the browser applies to various levels of specificity. It happens if an HTML element gets targeted by several selectors. Further, the browser applies the CSS rule of the selector to offer better specificity.
When we compare ID selectors vs. Class selectors, the ID selectors contain higher specificity and are considered more powerful. The ID selectors are so strong that they allow only the important property to override them within the CSS. This means that the element gets targeted by a specific ID selector, as well as a class selector. The CSS style of the ID selector further applies to the element above the style of its class selector.
Have a look at the example explaining this rule here.
Suppose, we are creating buttons for a Bootstrap website. Although Bootstrap CSS provides predefined styles for buttons, we will create custom ones. So, we only start with the most simple template, as shown below.
<button type=”button” class=”btn”>Button copy</button>
Across the website, if you want the button elements to get Calypso blue. For this, you have to use a class selector for defining various elements that come under the button class to give a blue background hue and a white font color.
Here’s the HTML for this:
<button type=”button” class=”btn”>Subscribe</button>
<button type=”button” class=”btn”>Subscribe</button>
Here’s the CSS:
.btn {
background-color: #00A4BD;
color: #FFFFFF;
}
And, the result is:
But what if we want the subscribe button on a homepage with a more eye-catching layout? For this, we need to use an ID selector for defining one button within the ID homepage. And, we can also style it to get the Fuschia colored background with black font color.
All buttons without its ID ‘homepage’ would still follow the proper CSS rule of a class selector (as we have seen in the case of the blue background and white font color)
Here’s the HTML:
<button type=”button” class=”btn” id=”homepage”>Subscribe</button>
<button type=”button” class=”btn”>Subscribe</button>
Here’s the CSS:
#homepage {
background-color: #FF00FF;
color: #000000;
}
.btn {
background-color: #00A4BD;
color: #FFFFFF;
}
And, the result is:
Now let’s talk about applying the same CSS style to multiple ID controls.
Here’s how we can apply multiple IDs on one CSS:
Hence, you need to apply the following format –
#id1, #id2, #ID3 {
width:100%;
float:left;
}
Make Elaborate Changes in the CSS ID Selector
The CSS selectors allow you to control the HTML’s appearance on your site. With a proper ID selector, you get to have granular control on the customization procedure. Further, use its code that targets a single element within a page. And, to do so, you at least need to have a basic knowledge of CSS and HTML.
Via: Udacity
