How to change the font type, size, and color on a spider web page

Updated: 08/16/2021 by Computer Promise

Font size

This page contains instructions on how to change a font and its color on a web page. With the introduction of HTML5, the proper way to configure web page fonts is to use Cascading Style Sheets. The one-time method, of using an inline way attribute or font tag, is deprecated, and should no longer exist used.

Note

Although the deprecated methods may nonetheless render correctly in modern Internet browsers, they are no longer guaranteed to do so. To create spider web pages that display correctly for the maximum number of users, use the CSS methods described on this page.

Tip

The methods for changing font attributes on this page work for text contained in almost HTML tags, including <div>, <p>, and <bridge>. These methods also piece of work for text in a table, using the <table>, <tr>, and <td> tags.

Using CSS for a single awarding

If y'all programme on irresolute the font face and its color for one give-and-take, sentence, or paragraph on a web page, configure its attributes in the element tag. Using the way attribute, you may specify the font confront and color with font-family, color, and the font size with font-size, as shown in the example beneath.

Example code

<p style="font-family unit:Courier; color:Blue;            font-size: 20px;">This text has the font Courier, is Blue, and 20px.</p>

Result

This text has the Courier font, is Blue, and 20px in size.

Using CSS for one or more than pages

Custom font for one page

In the head portion of your web page, yous may insert lawmaking between the <way></style> tabs to change the appearance of your text in diverse elements. The adjacent blue box contains example code that, once chosen, would alter your font face to Courier and color information technology reddish. Every bit y'all can see, we have defined the class proper name as "custom."

<style type="text/css"> .custom {  font-family: Courier;  color: red;  font-size:20px; } </style>

One time divers, this styling can be applied to most elements in your page by attaching the form "custom" to them. The following box shows two lines of code and their respective results.

Example

<p course="custom">This whole sentence is red and Courier</p> <p>Only the word <span class="custom">test</span> is red and Courier.</p>

Event

This whole judgement is cherry-red and Courier.

Only the word test is reddish and Courier.

Custom font for many pages

Importing an external CSS file can be very benign in that information technology allows users to modify rules for multiple pages at the same time. The following department shows an case for creating a basic CSS file that changes the font and it'south colour for about elements. This file may be loaded into more than ane web page, fifty-fifty an entire site.

Using whatever basic text editor, saving the following text equally a .css file will gear up it for import.

@charset "utf-viii";
.courier {  font-family: Courier;  color: #005CB9; }

Once the preceding text is placed into a .css file (we have named ours basic.css), you can link to it from any other page using a line similar to the following example.

<link rel="stylesheet" Blazon="text/css" href="http://www.example.com/bones.css">

Tip

Users may alter the attributes of elements on a page by changing the code in the imported .css file.

Using the font tag

Although deprecated, the HTML <font> tag can notwithstanding be used and may be necessary to be used with some online services. When using the FONT tag, you must include the face aspect, which describes the font to be used. In the instance below, nosotros are using the Courier font and the hexadecimal color code #005CB9, which is a night bluish.

Example code

<font color="#005CB9" face="courier" size="5">A special font example.</font>

Result

A special font example.