Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS text-emphasis-color Property

Posted in CSS Tutorial
Updated on Jul 18, 2024
By Mari Selvan
👁️ 7 - Views
⏳ 4 mins
💬 1 Comment
CSS text-emphasis-color Property

Photo Credit to CodeToFun

🙋 Introduction

The text-emphasis-color property in CSS allows web developers to set the color of emphasis marks. Emphasis marks are used in East Asian typography to indicate emphasis, similar to how italics or boldface might be used in Western typography.

This property can be particularly useful when you need to ensure that emphasis marks stand out in a way that aligns with your website's design.

💡 Syntax

The syntax for the text-emphasis-color property is simple. You can specify a color using any valid CSS color value.

Syntax
Copied
Copy To Clipboard
element {
  text-emphasis-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the text-emphasis-color property is the same as the currentColor of the element, which means it inherits the color of the text.

🏠 Property Values

ValueDescription
named-colorA color keyword, such as blue, red, green, etc.
hexadecimal valueA hex code representing a color, such as #ff5733.
RGB valueAn RGB color value, such as rgb(255, 87, 51).
HSL valueAn HSL color value, such as hsl(9, 100%, 60%).
currentcolorThe current value of the color property.

📄 Example

In this example, we'll set the text emphasis color to red.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-emphasis-color Example</title>
  <style>
    p {
      text-emphasis: circle;
      text-emphasis-color: red;
    }
  </style>
</head>
<body>
  <h1>Text with Custom Emphasis Color</h1>
  <p>This text has a red emphasis mark.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-emphasis-color property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-emphasis-color property is a useful tool for web developers looking to enhance the visual impact of text on their websites, particularly for East Asian typography.

By customizing the color of emphasis marks, you can ensure that your text stands out and aligns with your overall design scheme. Experiment with different colors to see how this property can enhance the readability and aesthetics of your content.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy