CSS text-emphasis-color Property

CSS text-decoration-color property example

CSS text-emphasis-color Property


This Blog You Will Learn

  ஃ  Learn CSS text-emphasis-color Property

  ஃ Syntax

 ஃ structure diagram examples

 ஃ Example

 ஃ Output

 Learn CSS text-emphasis-color Property

The text-emphasis-color property in Cascading Style Sheets (CSS) is used to set the color of emphasis marks applied to text.


Syntax:

selector
 {
  text-emphasis-color: color;
 }

 structure diagram examples

Learn CSS text-emphasis-color Property 


text-decoration-thickness example

Learn CSS text shadow  syntax examples

Example

<!DOCTYPE html>
<html>
<head>
<style>

h1{
 
  text-emphasis-style: circle;
  text-emphasis-color: blue;
}

p {
  text-emphasis-style: triangle;
  text-emphasis-color: red;
}
h2 {
  text-emphasis-style:double-circle;
  text-emphasis-color:orange ;
}
h3{
   text-emphasis-style: sesame;
  text-emphasis-color: red;
}
</style>
</head>
<body>
<h1>CSS text-emphasis-color Property</h1>
<p> https://webdesigningtheory.blogspot.com/ </p>
<h2> Web Designing Theory</h2>
<h3> Learn Programming Language HTML,CSS,PHP </h3>
</body>
</html>

css text decoration properties

Explain Program

Step  1] 


<!DOCTYPE html>
<html>
<head>
<style>

<!Doctype html>  → browser this is an HTML document

<html>                 →  Root element  of the webpage

<head>                      →  Contains metadata and CSS style

<style>                     →   Internal  CSS is written 

Step 2

CSS Section


<style>

h1{
 
  text-emphasis-style: circle;
  text-emphasis-color: blue;
}

p {
  text-emphasis-style: triangle;
  text-emphasis-color: red;
}

h2 {
  text-emphasis-style:double-circle;
  text-emphasis-color:orange ;
}
h3{
   text-emphasis-style: sesame;
  text-emphasis-color: red;
}
</style>


css code

1) CSS style
h1{
 
  text-emphasis-style: circle;
  text-emphasis-color: blue;
}

  • Adds circle mark above each character.
  • emphasis color blue

2)CSS style

p {
  text-emphasis-style: triangle;
  text-emphasis-color: red;
}

  • Add triangle marks
  • color triangles red
3)CSS style

h2 {
  text-emphasis-style:double-circle;
  text-emphasis-color:orange ;
}

  • Add double circle marks
  • color orange

4)CSS style
h3{
   text-emphasis-style: sesame;
  text-emphasis-color: red;
}

  • Add sesame style dots
  •  color red

Step 3]

closing the Tag

  </style>   </head>

Step 4]
<body> section  (HTML  Structure)

<body>
<h1>CSS text-emphasis-color Property</h1>
<p> https://webdesigningtheory.blogspot.com/ </p>
<h2> Web Designing Theory</h2>
<h3> Learn Programming Language HTML,CSS,PHP </h3>

  1. <h1>   ➡ heading.                               :-  style circle
  2. <p>    ➡   This paragraph                    :- style triangle
  3. <h2>   ➡   subheading                         :-  style double-circle
  4. <h3>    ➡  third-level heading             :-  style sesame

Step 5]

closing the Tag

  </body>   </html>



 Learn CSS text-emphasis-color Property

Output:-

CSS text-emphasis-color Property

Related Post :-

How to create HTML Dialog Element

CSS column gap property

background color program CSS

Comments

Popular posts from this blog

HTML Tag

HTML Input Type Submit Syntax and Example

CSS Text Color Explained with Syntax and HTML Examples