How to change text color in CSS

Changing the color of text is a fundamental aspect of web design. CSS (Cascading Style Sheets) and Bootstrap offer a variety of ways to change text color. In this article, we'll show you how to change text color using CSS and Bootstrap with easy-to-follow examples.

Change Text Color Using Bootstrap

Bootstrap, a popular CSS framework, also provides utility classes for text colors.

Easily set the text color by using .text-* color classes

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black

.text-white-50

.text-black-50

        
            
        <p class="text-primary">.text-primary</p>
        <p class="text-secondary">.text-secondary</p>
        <p class="text-success">.text-success</p>
        <p class="text-danger">.text-danger</p>
        <p class="text-warning">.text-warning</p>
        <p class="text-info">.text-info</p>
        <p class="text-light bg-dark">.text-light</p>
        <p class="text-dark">.text-dark</p>
        <p class="text-body">.text-body</p>
        <p class="text-muted">.text-muted</p>
        <p class="text-white bg-dark">.text-white</p>
        <p class="text-black">.text-black</p>
        <p class="text-white-50 bg-dark">.text-white-50</p>
        <p class="text-black-50 mb-5">.text-black-50</p>

Change Text Color Using Inline CSS

One of the simplest ways to change text color is by using inline CSS.

The style="color: red;" attribute within the <p> tag sets the text color to red.

This text is red.

        
            
          <p style="color: red;">This text is red.</p>