Beginner's Introduction to Using CSS

Welcome back!

In my previous article, we learned how to build the skeleton of a website using HTML. We covered tags, structure, and how to put content on the page. If you are brand new to web development or missed that post, I highly recommend starting with the basics of HTML to build a strong foundation.

👉 Read: HTML for Beginners: Understanding the Basics

Now that we have our structure (HTML), it looks a bit plain, doesn't it? It's time to give it some style. If HTML is the skeleton, CSS (Cascading Style Sheets) is the skin, the clothing, and the makeup. It’s what makes the web look beautiful.

But before we can paint the walls, we need to know which wall to paint. That is where CSS Selectors come in.

Why Do We Need Selectors?

Without selectors, you would have to write style rules inside every single HTML tag (called "inline styling"). Imagine having a blog with 50 paragraphs. If you wanted to change the font size, you would have to edit 50 individual tags.

With selectors, you can write one rule that targets all 50 paragraphs instantly. They keep your code clean, organized, and powerful.

Types of Selector

Element Selector

It is the most basic way to style. It selects all HTML elements of a specific type.

This is like shouting "Humans!" in a room. Everyone who is a human responds.

You can just write the tag name (without brackets).

/* Selects all <p> tags on the page */
p {
  color: green;
  font-size: 16px;
}

• Before: Standard black text.

• After: Every single paragraph on your website turns dark gray.

Class Selector

What if you want some paragraphs to look different? Maybe you have warning text that needs to be red. You can’t use the p selector because that changes everything.

Enter the Class Selector. This is the most used selector in CSS. It selects elements that share a specific class attribute.

This is like shouting "Red Team!" Only the people wearing the Red Team uniform respond.

You can use a dot (.) followed by the class name.

<p class="warning-text">This is an error.</p>
<p>This is normal text.</p>

.warning-text {
  color: red;
  font-weight: bold;
}

• Result: Only the paragraph with class="warning-text" turns red. The normal paragraph stays gray.

ID Selector

Sometimes, there is only one specific element on a page, like a main Header or a Footer. You want to target that exact element and nothing else.

This is like calling someone by their full Social Security Number or unique name. There is only one.

You can use a hash (#) followed by the ID name.

<div id="main-header">Welcome to my Site</div>

#main-header {
  background-color: black;
  color: white;
  padding: 20px;
}

Note: IDs must be unique per page. You cannot have two elements with id="main-header".

Group Selectors

What if your <h1>, <h2>, and <h3> headings all need to have the same font family? You could write three separate rules, but that's repetitive.

You can group them together using a comma.

Syntax: Separate selectors with a comma.

/* Instead of writing 3 blocks, write 1 */
h1, h2, h3 {
  font-family: 'Helvetica', sans-serif;
  margin-bottom: 10px;
}

This applies the style to all three types of headings at once.

Descendant Selectors

Sometimes you only want to style an element if it is inside another specific element. For example, you might want links (<a>) in your navigation bar to look different than links in your paragraph text.

It’s like find me the book... but only the book that is on the specific shelf.

Syntax: Write the parent, add a space, then the child.

/* Selects <a> tags ONLY if they are inside a <nav> */
nav a {
  text-decoration: none;
  color: blue;
}

• <nav><a href="#">Home</a></nav> → Will be blue.

• <p>Click <a href="#">here</a></p> → Will NOT be blue.

Pseudo-Class Selectors

Sometimes you want an element to look different only when something specific is happening to it like when a user hovers their mouse over a button or clicks into a text box.

These are called Pseudo-class selectors. They target the state of an element.

Think of a button like a mood ring. It's normally blue (default state), but when you touch it, it turns red (active state).

Syntax: Use a colon (:) followed by the state name.

/* Normal state */
button {
  background-color: blue;
  color: white;
}

/* Hover state (Mouse is over it) */
button:hover {
  background-color: darkblue; /* Gets darker */
}

/* Active state (Being clicked) */
button:active {
  background-color: red; /* Turns red while clicking */
}

Common Pseudo-classes:

• :hover – When the mouse is over the element.

• :focus – When an input field is selected (ready to type).

• :first-child – Selects only the very first element in a group.

Specificity

What happens if you have a p selector that says the text is Blue, but a .class selector that says the text is Red? And what if you have an ID that says it's Green?

The browser has to decide which rule to follow. This scoring system is called Specificity.

Think of it like a card game where certain cards beat others.

Hierarchy of Power (Weakest to Strongest)

1. Element Selector (p): Worth 1 point. (Weakest)

2. Class Selector (.my-class): Worth 10 points. (Beats Elements)

3. ID Selector (#my-id): Worth 100 points. (Beats Classes)

4. Inline Style (style="..."): Worth 1000 points. (Beats almost everything)

Example of Conflict:

/* Specificity: 1 (Element) */
p {
  color: blue;
}

/* Specificity: 10 (Class) */
.warning {
  color: red; 
}

• Result: The text will be Red because the Class (10) beats the Element (1).

The Big Boss Option: !important

Sometimes, you might be stuck. You have a style that just won't change, no matter what you do. Enter the !important rule.

!important is a special keyword that ignores the scoring system entirely. It forces the browser to apply that rule, even if the specificity is lower.

If Specificity is a debate, !important is the table flip. It ends the argument immediately.

Syntax: Add !important just before the semicolon.

p {
  color: blue !important; /* Forces Blue, even if a Class says Red */
}

.warning {
  color: red;
}

• Result: The text will be Blue. Even though .warning is usually stronger (10 points vs 1 point), the !important flag overrides it.

⚠️ Warning Guys

Avoid using !important whenever possible.

It might seem like a quick fix, but it makes your code very hard to maintain. If you use it everywhere, you eventually have no way to override anything, and your stylesheet becomes a mess. Save it for absolute emergencies or when overriding external library styles you cannot control.

“CSS is the paint, but Selectors are the brush. You can have the most beautiful colors in the world, but without the right brush, you cannot put them where they belong.”
— Unknown

To uncover more secrets about the invisible infrastructure powering your daily life, be sure to read my full series on The Internet.

Check out the full series: The Internet by Satpalsinh Rana