MASTORSCDN TEXT DOCUMENTATION

Welcome to the MastorsCDN Text Utility Classes documentation. These classes allow you to apply text colors, variations, shadows, hover effects, and font sizes to your HTML elements. Below is a list of all available color names, followed by detailed examples.

ALL AVAILABLE COLORS

Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua, AliceBlue, AntiqueWhite, Aquamarine, Azure, Beige, Bisque, BlanchedAlmond, BlueViolet, Brown, Burlywood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenrod, DarkGray, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, Dark-turquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DodgerBlue, Firebrick, FloralWhite, ForestGreen, Gainsboro, GhostWhite, Gold, Goldenrod, GreenYellow, Honeydew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenrodYellow, LightGray, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSteelBlue, LightYellow, LimeGreen, Linen, MediumAquamarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, OldLace, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenrod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, SkyBlue, SlateBlue, SlateGray, Snow, SpringGreen, SteelBlue, Tan, Thistle, Tomato, Turquoise, Violet, Wheat, WhiteSmoke, YellowGreen, RebeccaPurple, Magenta, Orangered, Dark, LightDark, DarkDark, VeryDarkGray, OffBlack, CCC

Preview Class Name Description HTML Declaration Copy

Basic Text Colors
Apply solid text colors using color names from the list above.
Red Text .text-Red Sets the text color to red. 
<span class="text-Red">Red Text</span>
BlueViolet Text .text-BlueViolet Sets the text color to blue-violet. 
<span class="text-BlueViolet">BlueViolet Text</span>

Text Color Variations
Use numbered suffixes (e.g., -100, -900) for lighter or darker shades. Numbers range from 100 (lightest) to 900 (darkest).
Light Green Text .text-Green-300 A lighter shade of green text. 
<span class="text-Green-300">Light Green Text</span>
Dark Purple Text .text-Purple-700 A darker shade of purple text. 
<span class="text-Purple-700">Dark Purple Text</span>

Important Text Colors
Add an "i" suffix (e.g., .text-Teali) for important states with !important priority.
Teal (Important) .text-Teali A vivid teal text color with priority. 
<span class="text-Teali">Teal (Important)</span>

Hover Text Colors
Use the "hov-" prefix to change text color on hover.
Hover Orchid Text .text-hov-Orchid:hover Changes text to orchid on hover. 
<span class="text-hov-Orchid">Hover Orchid Text</span>

Text Shadows
Apply shadow effects with "shad-" or "shadow-" prefixes (interchangeable).
Coral Shadow Text .text-shad-Coral or .text-shadow-Coral Coral text with a shadow effect. 
<span class="text-shad-Coral">Coral Shadow Text</span>

Hover Text Shadows
Use "shad-hov-" or "shadow-hov-" prefixes for shadow effects on hover.
SkyBlue Shadow on Hover .text-shadow-hov-SkyBlue:hover A sky blue shadow effect on hover. 
<span class="text-shadow-hov-SkyBlue">SkyBlue Shadow on Hover</span>

Font Size Utilities
Apply font sizes with named classes (e.g., .text-s, .text-xl) or numeric classes (e.g., .text-10 for 1rem).
Extra Large Text .text-xl Sets font size to 1.8rem. 
<span class="text-xl">Extra Large Text</span>

Basic Text Colors
Apply solid text colors using color names from the list above.
Red Text .text-Red Sets the text color to red. 
<span class="text-Red">Red Text</span>
BlueViolet Text .text-BlueViolet Sets the text color to blue-violet. 
<span class="text-BlueViolet">BlueViolet Text</span>

Text Color Variations
Use numbered suffixes (e.g., -100, -900) for lighter or darker shades. Numbers range from 100 (lightest) to 900 (darkest).
Light Green Text .text-Green-300 A lighter shade of green text. 
<span class="text-Green-300">Light Green Text</span>
Dark Purple Text .text-Purple-700 A darker shade of purple text. 
<span class="text-Purple-700">Dark Purple Text</span>

Important Text Colors
Add an "i" suffix (e.g., .text-Teali) for important states with !important priority.
Teal (Important) .text-Teali A vivid teal text color with priority. 
<span class="text-Teali">Teal (Important)</span>

Hover Text Colors
Use the "hov-" prefix to change text color on hover.
Hover Orchid Text .text-hov-Orchid:hover Changes text to orchid on hover. 
<span class="text-hov-Orchid">Hover Orchid Text</span>

Text Shadows
Apply shadow effects with "shad-" or "shadow-" prefixes (interchangeable).
Coral Shadow Text .text-shad-Coral or .text-shadow-Coral Coral text with a shadow effect. 
<span class="text-shad-Coral">Coral Shadow Text</span>

Hover Text Shadows
Use "shad-hov-" or "shadow-hov-" prefixes for shadow effects on hover.
SkyBlue Shadow on Hover .text-shadow-hov-SkyBlue:hover A sky blue shadow effect on hover. 
<span class="text-shadow-hov-SkyBlue">SkyBlue Shadow on Hover</span>

Text Decorations
Apply text decoration styles such as underline, overline, and line-through, including variations like dotted, dashed, double, and wavy.
Underlined Text .text-u or .text-underline Underlines the text. 
<span class="text-u">Underlined Text</span>
Overlined Text .text-o or .text-overline Adds an overline to the text. 
<span class="text-o">Overlined Text</span>
Line-Through Text .text-line-through Strikes through the text. 
<span class="text-line-through">Line-Through Text</span>
Dotted Underline .text-dotted Underlines the text with a dotted line. 
<span class="text-dotted">Dotted Underline</span>
Wavy Underline .text-wavy Underlines the text with a wavy line. 
<span class="text-wavy">Wavy Underline</span>
Underline and Overline .text-u-overline Applies both underline and overline. 
<span class="text-u-overline">Underline and Overline</span>

Hover Text Decorations
Use the "hov-" prefix to apply text decorations on hover.
Underline on Hover .text-hov-u:hover Underlines the text on hover. 
<span class="text-hov-u">Underline on Hover</span>
Dotted on Hover .text-hov-dotted:hover Applies a dotted underline on hover. 
<span class="text-hov-dotted">Dotted on Hover</span>

Line Height Utilities
Adjust line height with classes like .text-lh-{value} or .line-height-{value}. Values include 00 (0), 05 (0.5), 10 (1), 15 (1.5), 20 (2), 25 (2.5), 30 (3). Add "i" suffix for !important.
Line Height 1.5 .text-lh-15 Sets line height to 1.5. 
<span class="text-lh-15">Line Height 1.5</span>
Line Height 2 .text-line-height-20 Sets line height to 2. 
<span class="text-line-height-20">Line Height 2</span>

Text Ellipsis Utilities
Truncate text with ellipsis after a specified number of lines (1-10) using .text-dotted-{n}.
This is a long text that will truncate .text-dotted-1 Truncates text to 1 line with ellipsis. 
<span class="text-dotted-1">truncate</span>
Longer truncates .text-dotted-2 Truncates text to 2 lines with ellipsis. 
<span class="text-dotted-2">Longer truncates</span>

Text Alignment
Align text using classes like .text-left, .text-center, .text-right, etc.
Left Aligned .text-left Aligns text to the left. 
<span class="text-left">Left Aligned</span>
Centered Text .text-center Centers the text. 
<span class="text-center">Centered Text</span>
Justified text spans the width .text-justify Justifies the text. 
<span class="text-justify">Justified text spans the width</span>

Font Styles
Apply font styles like italic, normal, or oblique.
Italic Text .text-italic or .text-i Sets font style to italic. 
<span class="text-italic">Italic Text</span>
Oblique Text .text-oblique Sets font style to oblique. 
<span class="text-oblique">Oblique Text</span>

Font Weights
Adjust font weight with named classes (e.g., .text-bold) or numeric classes (e.g., .text-700).
Bold Text .text-bold or .text-b Sets font weight to bold. 
<span class="text-bold">Bold Text</span>
Weight 600 .text-600 Sets font weight to 600. 
<span class="text-600">Weight 600</span>

Additional Text Properties
Modify text transform, word break, white space, and text overflow.
Uppercase Text .text-uppercase Transforms text to uppercase. 
<span class="text-uppercase">Uppercase Text</span>
No Wrap Text .text-nowrap Prevents text from wrapping. 
<span class="text-nowrap">No Wrap Text</span>
Ellipsis Overflow Text .text-ellipsis Truncates text with an ellipsis. 
<span class="text-ellipsis">Ellipsis Overflow Text</span>
Mandatory Field .star Adds a red asterisk after the text. 
<span class="star">Mandatory Field</span>

Font Size Utilities
Apply font sizes with named classes (e.g., .text-s, .text-xl) or numeric classes (e.g., .text-10 for 1rem). Numeric sizes range from 0 to 500 (0rem to 50rem).
Extra Large Text .text-xl Sets font size to 1.8rem. 
<span class="text-xl">Extra Large Text</span>
2.5rem Text .text-25 Sets font size to 2.5rem. 
<span class="text-25">2.5rem Text</span>