The eye-catching designs of websites are hidden behind CSS. And the fundamental building blocks of CSS are selectors. You know, those commands where you say “show this and paint it”. Since we’re beginners, if you knew how important these selectors are. I also struggled quite a bit when I first learned these basic things. Now, let’s take a closer look at these selectors.
Let’s start with the most well-known: Element selectors. You might ask what this means. Simply, it’s the tags in HTML. For example, if you want to style all the paragraphs on a page at once, you target the `
` tag. You can think of it as a painter selecting all the reds on a canvas and applying a shade. Pretty practical, isn’t it?
Let’s go a bit further. If a page has multiple tags of the same type and you want to target only one, what will you do? Here comes the “ID” selectors. An ID is a unique identifier for an HTML element. Think of it as an identity number, unique for each person. That means you can only use an ID once. To target this ID in CSS, you put a ‘#’ before it. Suppose you gave the main title of your page an `id=”main-title”`, then in CSS, you write `#main-title { color: blue; }`. That’s it. Nice, isn’t it?
But sometimes, a tag needs to be used multiple times, but not all of them should have the same style. That’s where ‘Class’ selectors come into play. Classes are used to apply the same style to multiple HTML elements. Like giving a group of friends the same T-shirt. You design the T-shirt, then assign that design to each of your friends. In CSS, to target classes, you start with a ‘.’ dot. For example, if you want to make a warning message red, you give it `class=”warning”`, then in CSS, you write `.warning { color: red; }`. You can assign this class to as many elements as you want. Very useful, right? Sometimes, I spend hours wondering what to name a class 🙂
Now, let’s see how these selectors are used together. Sometimes, a single selector isn’t enough. For instance, you may want to target a paragraph inside the main title. To combine selectors, you have a few ways. The most common is separating them with a space, like `div p`, which targets all `
` tags inside a `
- `, not all `
- `s inside nested lists. These details can be confusing sometimes, but practicing makes it clearer.
Selectors also have specificity. If you assign styles through ID, class, and element selectors to the same element, which style will be applied? CSS’s ‘specificity’ rule determines this. Generally, ID selectors have higher priority than class, which are higher than element selectors. You can think of ID as the strongest, element as the weakest. There are deeper aspects to this, but the main point is knowing this helps understand why styles are applied or overridden. I used to get frustrated when styles didn’t apply as expected because of this.
Let’s see this with some code. I prepared a simple HTML structure and will demonstrate how to style it using selectors. First, we’ll have a main title, some paragraphs, and a `
` grouping them. Then, we will apply different colors with ID, class, and element selectors.First, let’s look at a wrong approach where we make mistakes in haste, and then fix it. Suppose we want to make all paragraphs red but the paragraph inside the main title blue. If we write `p { color: red; }`, all paragraphs turn red. Then, `#main-title p { color: blue; }` applies only to paragraphs inside the main title due to specificity. But this is not exactly what we wanted; the other paragraphs outside remain red. Our goal was to style only the second paragraph differently while the first stays default. The initial attempt wasn’t perfect.
The corrected HTML assigns a class to the second paragraph:
<h1 id="main-title">Basic CSS Selectors</h1> <div class="content-box"> <p>This is the first paragraph.</p> <p class="special-paragraph">This is the second paragraph, with a special style.</p> </div> <p>This is another outside paragraph.</p>And the correct CSS code:
/* Correct Approach */ body { /* General style for the whole page */ font-family: Arial, sans-serif; } p { /* Default style for all paragraphs */ color: black; line-height: 1.6; } #main-title { /* Style for the main title */ color: green; font-size: 2em; margin-bottom: 20px; } .content-box p { /* Paragraphs inside the content box */ color: #333; } .special-paragraph { /* Only the paragraph with this class */ color: purple !important; font-weight: bold; }Here, we defined general styles for the page, set all `
` to black, styled the main title with ID, targeted paragraphs inside the content box with class, and finally made the special paragraph purple and bold with a class and `!important`. Using ID, class, and element selectors together allows for very precise styling. Isn’t it beautiful? This way, we can style every part of our website exactly as we want. Truly fundamental, these selectors form the backbone of CSS and web design. Learning them thoroughly benefits every web builder, especially when dealing with complex projects or debugging style issues related to specificity and conflicts. Remember, these selectors are also used in JavaScript for selecting elements, so mastering them doubles your skill set. You can find many tutorials online, like a simple CSS selectors tutorial. In conclusion, ID, class, and element selectors are your most essential yet powerful tools. Use them correctly to craft stunning web pages. Practice a lot and keep in mind, always look ahead, not just for styling but also for their JavaScript applications. Sometimes, styles don’t apply because of misuse, but with patience, you’ll master them. I hope these basics help guide you. As you begin your CSS journey, these selectors will be your close friends. Take care!