How to Set Text Color for a Specific Paragraph using CSS ? - Coding

In web development, setting different text colors for a specific paragraph can be useful for highlighting certain content. We will see how to set different text colors for a specific paragraph using CSS. This can help make certain parts of your text stand out.

Tip: Prefer External Stylesheets for easier maintenance and updates.

Below are the approaches to set text color for a specific paragraph using CSS:

Table of Content

Using Inline CSS
Using a Class or ID Selector
Using :nth-child() pseudo-class

Using Inline CSS

We can use inline CSS to style HTML elements directly. To set text color for a specific paragraph, we add the “style” attribute to the paragraph tag and specify the “color” property.

Note: The inline CSS can make your HTML harder to maintain if overused.

Syntax:

<p style="color: red;">Your text here</p>

Example: This example uses inline CSS to set the color for a paragraph.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>

<body>
    <div style="text-align: center;">
        <p style="color: blue;">
            This paragraph has blue text color, 
              with Inline CSS Styling
        </p>
    </div>
</body>

</html>

Output:

Output

Using a Class or ID Selector

To apply specific styles to multiple paragraphs consistently, create a class or ID selector in your CSS file. Assign this selector to the paragraphs in your HTML markup for easy customization.

Syntax:

<!-- Using class selector -->
<p class="highlight">Your text here</p>

<!-- Using ID selector -->
<p id="special">Your text here</p>

Example: This example uses class and ID selectors to set colors for paragraphs.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Text Color Styling</title>
    <style>
        body {
            text-align: center;
        }

        .highlight {
            color: blue;
        }

        #special {
            color: green;
        }
    </style>
</head>

<body>
    <h1>
        Using class and ID selectors 
          to set colors for Paragraphs
    </h1>
    <p class="highlight">
        This paragraph has blue text color,
        Using class selector
    </p>
    <p id="special">
        This paragraph has green text color, 
          Using ID selector
    </p>
</body>

</html>

Output:

Output

Using :nth-child() pseudo-class

The :nth-child() pseudo-class allows you to style elements based on their position within a parent. This method targets specific paragraphs and applies custom text colors dynamically. With this technique, we can dynamically adjust the appearance of paragraphs.

Syntax:

parent Element : nth-child(n) {
    /* CSS properties */
}

Example: This Example uses the :nth-child() pseudo-class to set text color for paragraph.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Text Color Styling</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        p:nth-child(2) {
            color: purple;
        }
    </style>
</head>

<body>
    <h3>
        Using :nth-child() pseudo-class
    </h3>
    <p>
        This paragraph has purple color
    </p>
</body>

</html>

Output:

Output

Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Change the Font Family & Size of Text in CSS ?
How to Create an Image Overlay Fade in Text Effect on Hover using CSS ?
How to Create Responsive Sidebar using HTML & CSS ?
How to Set the List Style Image in Tailwind CSS ?
How to Create an Image Overlay Slide to Bottom Effect on Hover ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12