How to Set Text Color for a Specific Paragraph using CSS ?
Last Updated :
20 Mar, 2024
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.
Below are the approaches to set text color for a specific paragraph using CSS:
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. This allows us to customize the color of the text within that paragraph according to our preferences.
Syntax:
<p style="color: red;">Your text here</p>
Example: This example uses inline CSS to set color for paragraph.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<div style="text-align: center;">
<p style="color: blue;">
This paragraph has blue text color,
showcasing the power of GeeksforGeeks!
</p>
</div>
</body>
</html>
Output:
Applying a Class or ID selector
We can create a class or ID selector in our CSS file to apply specific styles to HTML elements. By assigning this selector to a paragraph in our HTML markup, we can easily customize its appearance. This allows us to maintain consistent styling across multiple paragraphs.
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 Applying a class or ID selector to set color for paragraph.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Text Color Styling</title>
<style>
body {
text-align: center;
}
.highlight {
color: blue;
}
#special {
color: green;
}
</style>
</head>
<body>
<h1>
Text Color Styling with GeeksforGeeks
</h1>
<p class="highlight">
Explore the power of CSS with GeeksforGeeks!
</p>
<p id="special">
Enhance your webpage's visual appeal
using GeeksforGeeks resources.
</p>
</body>
</html>
Output:
Using :nth-child() pseudo-class
We can utilize the :nth-child() pseudo-class to style elements based on their position within a parent. This enables us to target specific paragraphs and apply custom text colors. 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>
<head>
<title>Text Color Styling</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
p:nth-child(2) {
color: purple;
}
</style>
</head>
<body>
<h1>
Enhancing Text Color with GeeksforGeeks
</h1>
<p>
GeeksforGeeks offers invaluable resources
for web development enthusiasts.
</p>
<p>
With GeeksforGeeks, you can learn advanced
CSS techniques like styling specific paragraphs.
</p>
<p>
Discover the power of CSS and elevate your
web design skills with GeeksforGeeks!
</p>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...