Xopus

Main Menu

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund

Xopus

Header Banner

Xopus

  • Schemas
  • CSS
  • Chrome
  • Firefox
  • Fund
CSS
Home›CSS›How to use CSS to change font color

How to use CSS to change font color

By Warren B. Obrien
April 15, 2022
0
0

Looking to spruce up your website with different font colors? You can do this using CSS. CSS stands for Cascading Style Sheets and is the default language used to create and manage the styling of any website.

There are three methods for applying CSS to an HTML document. These are inline CSS, internal/embedded CSS and external CSS.

First method: Inline CSS

To change the font color in CSS, you need to create a CSS rule to set the value of the color property.

The inline method uses the style property which you can apply to almost any element. Here is an example that sets the font color of an HTML paragraph to red:

Paragraph of text

You can achieve the same effect using internal/embedded CSS or external CSS.

Second Method: Internal/Built-in CSS

You can use this method when you want to create CSS rules that affect multiple instances of an HTML element, but only on a single page. The CSS rules are then written in the header of the HTML page, using a style element:



Method Three: External CSS

The third way to achieve the same effect is to use an external CSS style sheet. Using a text editor, create a file with the “.css” extension. Common practice is to call this file something like stylesheet.css but you can give it any name as long as you keep the “.css” extension.

To color your body text green, for example, using an external style sheet, just paste the CSS rule like this:

p { color: blue }

In your HTML document, you must include a link to your style sheet in the HTML header element:






Paragraph of text



Change font color in HTML, without CSS applied

Best practice is to use CSS, but here’s how to change the font color using just HTML:

Paragraph of text

The font element, along with its color attribute, is deprecated. Indeed, they are elements of presentation rather than structural elements. Modern HTML should only consist of structural elements.

Changing font color in CSS is relatively simple

We have shown you three methods to change font color in CSS. We also showed you how to do it the old fashioned way using the HTML font tag. Try them out and see what works best for you!

Once you have mastered changing font color using CSS and HTML, you may want to master changing font size in HTML.


css tips and tricks

How to Change HTML Font Size in CSS

Read more


About the Author

david abraham
(30 articles published)

David is a WordPress lover who is passionate about helping small businesses grow!

More from David Abraham

Subscribe to our newsletter

Join our newsletter for tech tips, reviews, free ebooks and exclusive offers!

Click here to subscribe

Related posts:

  1. What are Cascading Style Sheets and what is CSS for?
  2. Update from the European Commission: The future revision of REACH and the restriction of PFAS | Jones Day
  3. The Greeting Cards Market Expected To Experience High Growth By 2026
  4. Virtual Healthcare Assistant Market to Grow Exponentially Between 2021 and 2028 | Key players – CSS Corp, eGain, idAvatars, Kognito, MedRespond

Recent Posts

  • Google Chrome adds virtual credit card numbers to protect your real ones – TechCrunch
  • How to take screenshots using the built-in screenshot tool in Mozilla Firefox on Windows 11 2022
  • Three Bard Faculty Pen Reviews for Artforum May 2022 Edition
  • 10 CSS background templates you can use on your website
  • Automotive Chromium Market Size and Overview 2022-2030 | Key Players – HELLA KGaA Hueck, Thule Group AB, Lund International, Covercraft Industries, Pep Boys – Manny

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021

Categories

  • Chrome
  • CSS
  • Firefox
  • Fund
  • Schemas
  • Terms and Conditions
  • Privacy Policy