Understanding CSS Selectors & The Foundation of Styling Web Pages

When you open a webpage, the browser first starts by reading the HTML i.e. the structure and content of the page at hand. But raw HTML on its own is plain and boring which can affect the time a user spends on the webpage lowering hte rating of the page or the website. That is where CSS come in handy. CSS or "Cascading Style Sheets" bring colours spacing fonts and visual appeals to the webpage.

What Are CSS Selectors?

However before it an affect the visual aspects of your wrbpage it needs to know what part of the page to change. You can think of it as CSS needs some way to "identify" the things it needs to change. This is what selectors do, they "point to" elements in the HTML file. CSS selectors let you choose elements by tag, category, or unique names so the browser knows exactly what to style. Without selectors there would be no way for CSS to connect style rules to elements.

Types Of CSS Selectors

Styling any webpage with CSS always begins with choosing the right elements to style. CSS selectors are the tools you use to pick those elements. You can think of these selectors as ways of addressing people. Sometimes you speak to everyone in a group sometimes you just talk to a specific person.

Element Selector

Selects elements directly by tag name. It will affect all the elements of the same tag name.

p {
    color: blue;
    text-align: justify;
}

This says all <p> tags should be justified and blue in color. It is useful when you want to apply style globally to one type of element.

Class Selector

Selects element that share a specifiic cass name. They be different tags but they share the common class.

<main class="superman">
    <p>This is Main Content</p>
</main>

<section class="superman">
    <p>This is a random section</p>
</section>

Let this be the HTML where thre are tags <main> and <section> with a class of superman . Then we can style these simultaneously with similar styles using hte class selectors that we can write like .className .

.superman {
    background-color: yellow;
}

ID selector

IDs are usnique identifiers for HTML elements. It is always advisable for the ids on an HTML page to be unique and no reapeat. This is because may reasons but most important on them I believe is if the ids are not unique it might confuse the assistive technologies like screen readers. It may not be able to associate a single ID with a single label and show undefined behavious make it harder for specially abled individuals to navigate the website.

Consider some HTML

<h1 id="mainTitle">Hello There!</h1>

Then we can select the above <h1> as follows.

#mainTitle {
    font-size: 32px;
}

Group Selectors

This lets you apple the same styles to different elements in a single block. It can be implemented using comma separated names.

h1, h2, p {
    font-family: Arial, sans-serif;
}

This tells the browser to use Arial for all <h1> <h2> and <p> tags in the document.

Descendant Selector

This scopes in on an element inside another tag. It can be implemented using a single element between the names of tags or classes etc.

nav a {
    color: green;
}

This selects all the a tags in side the nav tag.

Pseudo-Elements

Sometimes you just need visual content that you would not necesserily want to write in your HTML. CSS lets you do that with the help of a related concept of pseudo-elements. Two of the simplest ones are ::before and ::after . These are not visual elements in your markup, instead CSS generates a virtual box before or after the contents of an element. To make them visible you ust add the content property in your block of code (an empty string also works).

p::before {
    content: "|";
}

p::after {
    content: "|";
}

This will are the pipe symbol before and after your content on the webpage like |Hello There| . Using pseudo classes keeps HTML clean and add visual sugar using CSS. Since this content isn't part of the document itself it should not contain any essential information as that will be looked over by assistive technologies.

Selector Priority

This is probably one of the most important important and confuing topics in all of CSS. Sometimes more than one rule can try to style the exact same element. When that happens, the browser needs a way to decide what style to apply. A general rule of thumb is the more specific the seletor, the higher the prioirity. At a very high level the basicranking you should remember is this

ID selector > Class Selector > Element Selector

So if any element has conflicting styles the browser look at this order and applies the one with higher specificity.

Consider the following example

<p id="greeting" class="highlight">Hello There</p>

.highlight {
    color: green;
}

#greeting {
    color: red;
}

Both the rules target the same p tag using different selectors. since the ID selector has higher priority the text ends up being red.

Conclusion

As you continue learning CSS, everything you do whether it’s animations, layouts, or responsive design will always start with choosing the right elements. So take some time to practice the selectors we covered: element, class, ID, group, and descendant selectors. Once you understand how to pick elements precisely, writing styles becomes intuitive. The obvious next step would be to practice and when you can visualise how styling works you can move on to libraries like Bootstrap or Tailwind.