
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
Setting Text Color using CSS
To set the text color, use the color property in CSS. You can set the color with the color name, hexadecimal value, RGB value, or using the HSL value.
Example
<!DOCTYPE html> <html> <head> <style> span { background-color: orange; color: white; } p.demo { display: none; } span.demo1 { display: inline; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo">9AM</p> 10AM on 20th December. </div> <div> Match will end at <span class="demo1">5PM</span> on 20th December. </div> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> p.demo1 { word-spacing: 1cm; color: #F8E61C; } p.demo2 { word-spacing: 40px; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>
Output
- Related Articles
- Setting the element's text color using CSS
- Setting Text Color Working with CSS
- Setting Text Alignment using CSS
- Setting up Background Color using CSS
- Setting the Color of Links using CSS
- Setting the Location Color Stops using CSS
- Setting Color Property in CSS
- Setting up Background Color in CSS
- How to Change Link Underline Color using text-decoration-color CSS
- Setting Line Height using CSS
- Setting Background Position using CSS
- Setting Background Image using CSS
- Emphasis text and color with CSS
- Animate CSS text-decoration-color property
- Setting List Style Type using CSS

Advertisements