text decoration types code example

Example 1: html text decoration

<p style="text-decoration: none;"> There will be no effects. Default value </p>
<p style="text-decoration: underline;"> Text will be underlined </p>
<p style="text-decoration: overline;"> A line will be drawn over the text </p>
<p style="text-decoration: line-through;"> Text will be strikethrough </p>

Example 2: css text decoration

/******************* How to style your text? ************************/

tag_name {
  
  text-decoration-line: underline; /* or overline; line-through; ... */
  /*OR: */
  text-decoration: underline overline dotted red;  /* text-decoration-line (can be more than one); text-decoration-style; text-decoration-color; */
  
  
  color: blue;                     /* Sets the color of the text */
  
  text-decoration-color: yellow;   /* Sets the color of the text decoration */
  
  text-decoration-style: solid;    /* Sets the style of the text decoration (like solid, wavy, dotted, dashed, double) */
  
  font-style: italic; /* Specifies the font style for a text, like, if you want it as normal, italic, oblique,... */
  
  font-size: 1.6em; /* Sets the size of the text */
  
  letter-spacing: 5px; /* Sets the space between letters */
  
  line-height: 20px /* Sets the space between lines */
  
  font-family: "Times New Roman", Times, serif;   /* specifies the font for an element. It can hold several font names as a "fallback" or stack system. 
                                                     If the browser does not support the first font, it tries the next font */
  
  
  text-shadow: 2px 2px 8px; /* horizontal_shadow; vertical_shadow; blur-radius; color|none|initial|inherit; */
  /*OR */ 
  text-shadow: 0 0 #FF0000;  /* The blur is optional */
  /*OR: */
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;  /* Text-shadow with a red and blue neon glow */
  
  
  text-indent: 40px; /* Indents the first line of text with different values (can be negative values) */
  
  text-align: center;  /* Specifies the horizontal alignment of text in an element,by choosing, for exemple, justify, right, left, ... */
  
  overflow: hidden; /* Specifies what should happen if content overflows an element's box, by choosing, for exemple, visible; auto; scroll; ... */
  
  white-space: nowrap;  /* Specifies how white-space inside an element is handled, by choosing, for exemple, pre; normal; nowrap;... */
  
  text-overflow: ellipsis; /* Specifies how overflowed content that is not displayed should be signaled to the user, for exemple, with 3 dots */
  
  word-break: break-all; /* Specifies how words should break when reaching the end of a line, by choosing, for exemple, keep-all; normal; break-word; ... */
  
  word-wrap: break-word;  /* Allows long words to be able to be broken and wrap onto the next line. */

}

Example 3: text-decoration:

text-decoration: