CSS text-emphasis-color Property Customize Text Marks

Introduction

The text-emphasis-color property in CSS lets you set the color of emphasis marks, like dots, circles, or custom characters, applied to text. It’s great for making text stand out and aligning with your design scheme. You can use it alone or with the text-emphasis shorthand. Whether you want to highlight important points or add a creative touch, this property is a useful tool in your CSS toolkit.

Specification

The text-emphasis-color property is part of the CSS Text Decoration Module Level 3. This module introduces various properties for text decoration, including emphasis marks and their customization. By following this standard, you can ensure your use of text-emphasis-color is consistent with best practices and compatible across different browsers.

Syntax

The syntax for the text-emphasis-color property is straightforward:

text-emphasis-color: <color>;

Example Syntax

/* Initial value */
text-emphasis-color: currentcolor;

/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgb(90 200 160 / 80%);
text-emphasis-color: transparent;

/* Global values */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;

Explanation

• Initial Value: The default color is currentcolor, which inherits the current text color.
• Color Values: You can specify the color using formats like hex codes (#555), named colors (blue), RGB values (rgb(90 200 160 / 80%)), or transparent to make the marks invisible.
• Global Values: You can use global CSS values like inherit, initial, revert, revert-layer, and unset to control the behavior of the property based on inheritance and default values.

Practical Usage

Using the text-emphasis-color property, you can customize the color of emphasis marks to match your design scheme. This is great for highlighting specific text elements and enhancing the overall readability and aesthetics of your web content.

Values

The text-emphasis-color property accepts various values to customize the appearance of emphasis marks on your text. Here’s a breakdown:

Color Values

• <color>: Specifies the color of the emphasis marks. You can use different formats:
  • Hexadecimal: For example, #555.
  • Named Colors: For example, blue.
  • RGB Values: For example, rgb(90 200 160 / 80%).
  • Transparent: Makes the emphasis marks invisible.

Global Values

• inherit: The emphasis marks inherit the color from the parent element.
• initial: The emphasis marks use the initial value, which is currentcolor.
• revert: The emphasis marks revert to the default value as defined by the user agent or the user’s stylesheet.
• revert-layer: The emphasis marks revert to the value as defined by the cascade layer.
• unset: The emphasis marks inherit the color if it is inherited by default, otherwise, it uses the initial value.

Default Value

• currentcolor: If no color is specified, the emphasis marks use the current text color. This is the default value.

Example Usage

/* Initial value */
text-emphasis-color: currentcolor;

/* Hexadecimal color */
text-emphasis-color: #555;

/* Named color */
text-emphasis-color: blue;

/* RGB color with alpha transparency */
text-emphasis-color: rgb(90 200 160 / 80%);

/* Transparent color */
text-emphasis-color: transparent;

/* Global values */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;

Examples

Let’s see how the text-emphasis-color property works with some practical examples.

Example 1: Emphasis with a Color and Custom Character

In this example, we’ll apply a green color to custom emphasis marks using the text-emphasis-style and text-emphasis-color properties.

CSS

em {
  text-emphasis-color: green;
  text-emphasis-style: "*";
}

HTML

<p>Here's an example:</p>
<em>This has emphasis marks!</em>

Result

The text within the <em> tags will have green asterisk (*) emphasis marks applied to it.

Example 2: Vertical Text with a Custom Emphasis Mark

In this example, we’ll apply a custom emphasis mark (*) to vertical text and set its color using the text-emphasis-color property.

CSS

em {
  text-emphasis: "*";
  writing-mode: vertical-lr;
  text-emphasis-color: rgb(0, 26, 255);
  background-color: rgba(95, 158, 160, 0.602);
}

HTML

<p>Here's an example:</p>
<em>This has custom emphasis marks!</em>

Result

The text within the <em> tags will be displayed vertically with blue asterisk (*) emphasis marks applied to it.

Example 3: Emphasis with a Transparent Color

In this example, we’ll apply transparent emphasis marks using the text-emphasis-color property.

CSS

em {
  text-emphasis-color: transparent;
  text-emphasis-style: "o";
}

HTML

<p>Here's an example:</p>
<em>This has transparent emphasis marks!</em>

Result

The text within the <em> tags will have transparent circle (o) emphasis marks applied to it, making the marks invisible.

Example 4: Emphasis with an Inherited Color

In this example, we’ll apply emphasis marks that inherit their color from the parent element using the text-emphasis-color property.

CSS

div {
  color: blue;
}

em {
  text-emphasis-color: inherit;
  text-emphasis-style: ".";
}

HTML

<div>
  <p>Here's an example:</p>
  <em>This has inherited emphasis marks!</em>
</div>

Result

The text within the <em> tags will have blue dot (.) emphasis marks applied to it, inheriting the color from the parent <div> element.

Formal Syntax

The formal syntax for the text-emphasis-color property is:

text-emphasis-color = <color>

Explanation

• <color>: Specifies the color of the emphasis marks. You can use formats like hexadecimal (#555), named colors (blue), RGB values (rgb(90 200 160 / 80%)), or transparent.

Related CSS Properties

To make the most of the text-emphasis-color property and enhance your web design, it’s helpful to know about related CSS properties. These properties work together to provide a comprehensive set of tools for customizing text emphasis and other visual elements on your web pages.

text-emphasis-style

The text-emphasis-style property defines the style of the emphasis marks applied to text. You can use various shapes and characters to create emphasis marks that suit your design needs.

Syntax

text-emphasis-style: none | [ filled | open ] || <shape> | <string>;

Example

em {
  text-emphasis-style: "*";
  text-emphasis-color: green;
}

Result

The text within the <em> tags will have green asterisk (*) emphasis marks applied to it.

text-emphasis

The text-emphasis property is a shorthand for setting both the style and color of emphasis marks. This makes it easier to apply multiple properties at once.

Syntax

text-emphasis: [<text-emphasis-style> || <text-emphasis-color>];

Example

em {
  text-emphasis: "*" green;
}

Result

The text within the <em> tags will have green asterisk (*) emphasis marks applied to it.

text-emphasis-position

The text-emphasis-position property specifies the position of the emphasis marks relative to the text. This allows you to place the marks above, below, or to the side of the text.

Syntax

text-emphasis-position: over | under | right | left;

Example

em {
  text-emphasis-style: "*";
  text-emphasis-color: green;
  text-emphasis-position: over;
}

Result

The text within the <em> tags will have green asterisk (*) emphasis marks applied above the text.

Other Color-Related Properties

In addition to emphasis marks, there are several other CSS properties that deal with colors and can be used to enhance the visual appeal of your web pages.

color

The color property sets the color of the text. This is one of the most fundamental CSS properties for styling text.

Syntax

color: <color>;

Example

p {
  color: blue;
}

Result

The text within the <p> tags will be blue.

background-color

The background-color property sets the background color of an element. This property is useful for creating contrast and highlighting specific sections of your web page.

Syntax

background-color: <color>;

Example

div {
  background-color: lightgray;
}

Result

The <div> element will have a light gray background.

border-color

The border-color property sets the color of an element’s border. This property is useful for creating visually distinct borders around elements.

Syntax

border-color: <color>;

Example

div {
  border: 2px solid red;
}

Result

The <div> element will have a red border.

outline-color

The outline-color property sets the color of an element’s outline. Outlines are similar to borders but do not take up space in the layout.

Syntax

outline-color: <color>;

Example

div {
  outline: 2px solid green;
}

Result

The <div> element will have a green outline.

text-shadow

The text-shadow property adds shadow effects to text, which can include color customization. This property is useful for creating depth and enhancing the appearance of text.

Syntax

text-shadow: <offset-x> <offset-y> <blur-radius> <color>;

Example

p {
  text-shadow: 2px 2px 5px gray;
}

Result

The text within the <p> tags will have a gray shadow effect.

Browser Compatibility

The text-emphasis-color property is widely supported across modern browsers.

Practical Considerations

While text-emphasis-color is well-supported, it’s good to test your designs across different browsers and devices. Using progressive enhancement ensures a good experience for users with older browsers.

Example of Progressive Enhancement

CSS

em {
  text-emphasis-color: green;
  text-emphasis-style: "*";
  color: green; /* Fallback for older browsers */
}

HTML

<p>Here's an example:</p>
<em>This has emphasis marks!</em>

Conclusion

Understanding browser compatibility for properties like text-emphasis-color ensures your web design is accessible and consistent. By keeping up with supported browsers and using progressive enhancement, you can create appealing and functional web content that reaches a wide audience.

See Also

To further enhance your understanding and usage of the text-emphasis-color property, you may find the following related CSS properties and resources helpful:

Related CSS Properties

1. <color> Data Type:
   • Learn more about the various ways to specify colors in CSS, including hexadecimal, RGB, and named colors.
2. text-emphasis-style:
   • This property allows you to define the style of the emphasis marks, such as dots, circles, or custom characters.
3. text-emphasis:
   • A shorthand property that combines text-emphasis-style and text-emphasis-color into a single declaration.
4. text-emphasis-position:
   • Specifies the position of the emphasis marks relative to the text, such as above or below.

Additional Resources

• MDN Web Docs:
  • Comprehensive documentation on CSS properties, including detailed explanations and examples.
• W3C CSS Specifications:
  • Official specifications for CSS properties, including the text-emphasis-color property.
• CSS Tricks:
  • A valuable resource for tutorials, tips, and tricks related to CSS and web design.