# CSS Selectors 101: Targeting Elements with Precision

## Overview

In this article, we are going to learn about CSS selectors, why we need selectors, and the meaning and working of CSS. But before starting the CSS journey, if you don’t know HTML, follow the [HTML](https://blog.studyhex.in/understanding-html-tags-and-elements) article.

## Why we need CSS

As we all know, HTML can provide structure to a web page. But how the webpage should look, how each HTML element should be positioned, everything can’t be managed using HTML only. So we need some kind of rules that can be defined to give html element a proper look and feel with the corresponding position of each HTML element. Here CSS comes into the picture, we can write all rules, then the browser reads those rules and apply accordingly to the elements, and we can see some beautiful UI (User Interface) / UX (User Experience).

## Meaning of CSS

CSS stands for **Cascading Style Sheets.** Let’s try to understand the meaning of each word.

**Cascading**

If you are going on a vacation with 3 of your friends, and you are the driver, then you rely only on the friend who actually knows the place. So here you have a priority preference. Cascading in CSS also does the same. If multiple CSS rule applied to a single element, CSS decides which one to use based on order and its specific priority. CSS calls this the specificity algorithm.

**Style Sheets**

It is a file that contains the CSS rules.

Syntax Example

```plaintext
h1 {
    color:red;
}
```

## Different Ways to Write CSS Rules

We have mainly these three ways to write CSS

1. Inline CSS
    
2. Internal CSS
    
3. External CSS
    

**Inline CSS**

Here, we write CSS directly into the element within a style attribute

```plaintext
<h1 style="color:red;">Heading</h1>
```

## Selector in CSS

As we all know, in HTML, we have elements, and to apply CSS rules, we have a selector to select those elements. We have multiple selectors in CSS, which are as follows

1. Element Selector
    
2. Class Selector
    
3. ID Selector
    
4. Group Selector
    
5. Desendent Selector
    

### 1) Element Selector

The element selector targets elements by their tag name. It applies the same style to all matching elements on the page.

**Example**

```plaintext
p {
  color: blue;
  font-size: 18px;
}
```

```plaintext
<p>Hello, this is a paragraph</p>
```

**Output**

**Before CSS output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688807482/f597d7c4-ab6b-4429-8ad0-de38e8e10780.png align="center")

**After CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688749027/d33e867a-e7d6-45f9-991e-f1cbe6596318.png align="left")

### 2) Class Selector

The class selector targets elements that have a specific `class` attribute. We can reuse classes. A single element can belong to different classes, and a single class can be used in multiple elements.

**Example**

```plaintext
<p class="highlight fontRed">This is highlighted text</p>
<p>This is normal text</p>
```

```plaintext
.highlight {
  font-weight: bold;
}
.fontRed {
    color:Red;
}
```

**Before applying CSS output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688860266/3d06abf2-9cfa-4491-98be-081465fbb6fe.png align="left")

**After CSS output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688881868/c49613f9-de41-4386-ba03-21489c4f3cd9.png align="left")

### 3) ID Selector

The ID selector targets a single unique element using its `id` attribute.

Note: ID is unique and can be used only once on a page. One Element only have single ID

**Example**

```plaintext
<h1 id="main-title">Welcome to My Website</h1>
```

```plaintext
#main-title {
  color: green;
  text-align: center;
}
```

**Before CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688941581/cc5f1167-cb13-45f0-b7f1-2752d68c5f86.png align="left")

**After CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688959379/efa84cb1-6854-4999-852e-ad91d7f99a50.png align="left")

## Class Vs ID

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689260257/5fc1865d-7bdb-4857-be6e-2239412f8781.png align="left")

### 4) Group Selector

The group selector is used when we want to apply the same CSS rules to multiple selectors at once. We separate selectors using commas.

**Example**

```plaintext
h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}
```

```plaintext
  <h1>This is Heading 1</h1>
  <h2>This is Heading 2</h2>
  <p>This is a paragraph text</p>
```

**Before CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689023919/8e9818a4-2b6d-47d5-af5b-e6f1a3b634ec.png align="left")

**After CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689052291/b8a7dbd5-69fa-4a68-88d1-7093c454b7d8.png align="left")

### 5) Descendant Selector

The descendant selector targets elements that are inside another element. It is useful when you want to style only elements within a specific section.

**Example**

```plaintext
<div class="card">
  <p>This paragraph is inside the card</p>
</div>

<p>This paragraph is outside</p>
```

```plaintext
.card p {
  color: purple;
}
```

**Before CSS output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689092270/069e74a3-a231-4053-a69f-38f9b6691540.png align="left")

**After CSS Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689113349/9aa85d0d-602e-441f-a7e0-36bc65478a6a.png align="left")

### How to Use

During the design of a web page, it’s always a good practice to use all of this method with a combination based on your usecase. Assume you can define the same font-family for all heading then you can use the element selector. If you have a few beautiful cards to display processing you can use classes. If you want to change the heading text color which is the main heading of the page, then you can use ID to particularly target that.

## Mechanism of Cascading and Specificity Algorithm

**Let’s try to understand the Cascading first.**

As you can see, we have a heading Specificity Algorithm

```plaintext
<h1>Heading</h1>
```

Let’s apply some CSS here

```plaintext
h1 {
    text-align:right;
    color:red;
    border: 2px solid blue;

}
```

As you can see The heading Text color changed to red, and it shifted to the right side.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769687969734/82f4b8d7-32f7-43f7-9552-1fcc26fdc520.png align="center")

Here you can see we did some changes to already applied properties, and it successfully take effect as well, and not made are working fine. This is cascading, where priority goes to the order, which means which property at the bottom of the CSS only takes that.

```plaintext
  h1 {
    text-align:right;
    color:red;
    border: 2px solid blue;
  }
  h1{
    text-align:center;
    color:gray;
  }
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688025650/28fc3824-3a8a-4b3d-9b71-a2070c962793.png align="center")

**Now time to understand the Specificity Algorithm**

Let’s take a heading which has an ID and a class

```plaintext
<h1 id="color-pink" class="color-blue">Heading</h1>
```

Now apply some CSS

```plaintext
  #color-pink{
  	color:pink;
  }
  .color-blue{
  	color:blue;
  }
  h1 {
    color:red;
    border: 2px solid blue;
  }
```

As you can see in the final output, instead of following the properties order, it always gives ID to the height priority, the class, and then the element selector gets the priority.  
The priority Order (High to Low)

1. Inline CSS
    
2. ID Selector
    
3. Class Selector
    
4. Element Selector
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769688286086/56d8a31f-8e9d-4896-a80a-6f27a6e13e23.png align="center")

### List of Most Used Basic CSS Properties

These are the fundamental properties you will use in almost every project.

#### **Text & Fonts**

* `color`: Sets the color of the text (e.g., `red`, `#333`).
    
* `font-family`: Sets the font type (e.g., `Arial`, `sans-serif`).
    
* `font-size`: Sets the size of the text (e.g., `16px`, `1.2rem`).
    
* `font-weight`: Sets the thickness of the text (e.g., `bold`, `400`).
    
* `text-align`: Aligns text horizontally (e.g., `center`, `left`, `right`).
    
* `line-height`: Sets the vertical space between lines of text.
    

#### **The Box Model (Size & Spacing)**

* `width` / `height`: Sets the width and height of an element.
    
* `margin`: Space **outside** the border (pushes other elements away).
    
* `padding`: Space **inside** the border (pushes content away from the border).
    
* `border`: A line around the element (between margin and padding).
    
* `border-radius`: Rounds the corners of the border.
    

#### **Backgrounds**

* `background-color`: Sets a solid background color.
    
* `background-image`: Sets an image as the background.
    

#### **Layout & Positioning**

* `display`: Determines how an element behaves.
    
    * `block`: Takes up the full width (like `<div>`, `<h1>`).
        
    * `inline`: Takes up only the necessary width (like `<span>`).
        
    * `flex`: Enables Flexbox layout (puts items in a row).
        
* `position`: Used for advanced positioning (`relative`, `absolute`, `fixed`).
    

Example

```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic CSS Properties</title>
    <style>
        /* 1. Base Styles (Text and Background) */
        body {
            background-color: #f0f2f5; /* Light grey background */
            font-family: Arial, sans-serif;
            color: #333333; /* Dark grey text */
            margin: 0px; /* Reset default browser margin */
        }

        /* 2. Main Container (Layout) */
        .main-container {
            width: 600px;
            margin: 50px auto; /* auto centers the container horizontally */
            background-color: #ffffff;
            border: 1px solid #cccccc; /* Thin grey border */
            padding: 30px; /* Space inside the container */
        }

        /* 3. Header Section (Text Alignment) */
        .header {
            text-align: center;
            border-bottom: 2px solid #eeeeee;
            padding-bottom: 20px;
            margin-bottom: 20px; /* Space below the header */
        }

        .header h1 {
            color: #2c3e50;
            font-size: 28px;
            margin: 0px; /* Remove default margin */
        }

        .header span {
            color: #7f8c8d; /* Lighter text for subtitle */
            font-size: 14px;
        }

        /* 4. Flexbox Layout (Side by Side) */
        .content-box {
            display: flex; /* Makes children (divs) sit in a row */
            gap: 20px; /* Space between the two columns */
        }

        /* 5. Columns */
        .left-column {
            width: 30%;
            background-color: #3498db;
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 8px; /* Rounded corners */
        }

        .right-column {
            width: 70%;
        }

        /* 6. Typography adjustments */
        .right-column h2 {
            font-size: 20px;
            margin-top: 0px;
        }

        .right-column p {
            line-height: 1.6; /* Makes text easier to read */
            font-size: 16px;
        }

        /* 7. Button Style (Static - No Hover) */
        .btn {
            display: inline-block;
            background-color: #27ae60;
            color: white;
            padding: 10px 20px;
            text-decoration: none; /* Removes underline from link */
            border-radius: 5px;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="main-container">
        
        <div class="header">
            <h1>Jane Doe</h1>
            <span>Senior Web Developer</span>
        </div>

        <div class="content-box">
            
            <div class="left-column">
                <strong>Status:</strong><br>
                Active
            </div>

            <div class="right-column">
                <h2>About Me</h2>
                <p>
                    I am a developer learning CSS basics. 
                    I understand how margin, padding, and borders work. 
                    This layout uses a simple flexbox row to put items side by side.
                </p>
                <a class="btn" href="#">Contact Me</a>
            </div>

        </div>

    </div>

</body>
</html>
```

**Output**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689681085/93dfb85e-4999-4342-8ba2-ab05821291c8.png align="center")

## Conclusion

You don’t need to memorise all CSS properties; CSS is a skill which become strong eventually with practice. When you build 20 or 30 projects using CSS, you willbe able to build an understanding of each property

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769689842026/3c2199f5-7133-4eeb-be61-6d69085cb76c.png align="center")

.