How to Change a Webpage Text Font and Color Using CSS

Author Info

Last Updated: October 30, 2022

Do you want to use the newest technology to style your web pages? Here's how!

Steps

{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3d\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-1.jpg\/v4-460px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-1.jpg","bigUrl":"\/images\/thumb\/3\/3d\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-1.jpg\/aid612569-v4-728px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-1.jpg","smallWidth":460,"smallHeight":251,"bigWidth":728,"bigHeight":397,"licensing":"<div class=\"mw-parser-output\">License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a> \n<\/p> \n<\/p><\/div>"}

1
Understand how css works with HTML. For example:
```
Text
```
Almost any HTML tag can include "style," such as
```
p
```
or
```
div
```
What goes in between the quotes is the CSS part.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c9\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-2.jpg\/v4-460px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-2.jpg","bigUrl":"\/images\/thumb\/c\/c9\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-2.jpg\/aid612569-v4-728px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-2.jpg","smallWidth":460,"smallHeight":251,"bigWidth":728,"bigHeight":397,"licensing":"<div class=\"mw-parser-output\">License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a> \n<\/p> \n<\/p><\/div>"}

2
To change text font, use css'
```
 font-family 
```
For example:
```
Text
```
will cause "Text" to use the Times font.
Advertisement
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-3.jpg\/v4-460px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-3.jpg","bigUrl":"\/images\/thumb\/7\/79\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-3.jpg\/aid612569-v4-728px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-3.jpg","smallWidth":460,"smallHeight":251,"bigWidth":728,"bigHeight":397,"licensing":"<div class=\"mw-parser-output\">License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a> \n<\/p> \n<\/p><\/div>"}

3
To set an order of preference, in case a particular font is not on a person's computer, use commas to separate font names. For example:
```
Text
```
will cause "Text" to use the Times font. If times is not available, Georgia will be used. If neither Times nor Georgia are available, a generic serif font will be used.
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-4.jpg\/v4-460px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-4.jpg","bigUrl":"\/images\/thumb\/c\/ca\/Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-4.jpg\/aid612569-v4-728px-Change-a-Webpage-Text-Font-and-Color-Using-CSS-Step-4.jpg","smallWidth":460,"smallHeight":251,"bigWidth":728,"bigHeight":397,"licensing":"<div class=\"mw-parser-output\">License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">Creative Commons<\/a> \n<\/p> \n<\/p><\/div>"}

4
To set text color, use css'
```
 font 
```
For example:
```
Text
```
will cause "Text" to be red. You can use any valid HTML color name in the place of "red." You can also use a hex code. For example:
```
Text
```
will cause "Text" to be white.
Advertisement

Expert Q&A

Search

Add New Question

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Tips

Make sure all quotes, colons, and other symbols are in the correct places; otherwise, you may not receive an expected result.

Thanks
Helpful 0 Not Helpful 0
You may want to test your code in multiple browsers, to make sure that it works in as many as possible.

Thanks
Helpful 0 Not Helpful 0

Log in

How to Change a Webpage Text Font and Color Using CSS

Steps

Expert Q&A

Tips

You Might Also Like

About this article

Is this article up to date?

About this article

You Might Also Like

Explore Categories