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:
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.
<!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:
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.
<!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:
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.
<!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:
