How To Change The Text Color In Div

To completely customize the look of your website, you can't forget near typography — how yous adjust and style text. Depending on your pattern, business niche, and audience, you may desire to change the typeface, size, or colour of your font.

Download Now: Free HTML & CSS Hacks

For example, if you lot favor a dark grayness over black in your colour scheme, then you'll want to modify the default font color of your text. If you're in media, then you lot may opt for a sans serif font, which is considered the easiest typography to read. But if yous're in the creative field, then yous may opt for a decorative typeface like Morris Troy. These are merely a few reasons y'all might want to style the font on your website.

Let's look at how you tin can change font on your site with just a bit of code. We'll comprehend:

how to alter font blazon in HTML
how to modify font size in HTML
- how to change font size within the same paragraph
how to change font color in HTML
how to change font in a div in HTML

How to Change Font Type in HTML

To change font type in HTML, utilize the CSS font-family unit property. Set it to the value you want and place it inside a fashion attribute. Then add this style aspect to an HTML element, similar a paragraph, heading, push button, or bridge tag.

This is how yous use inline CSS. Inline CSS ways your HTML and CSS volition be placed together in the torso section of your HTML md. Then, technically, y'all'll exist changing font "in HTML."

Y'all used to exist able to but use the font tag to change the style of text in HTML. So say you wanted to change your font to Arial, size 20px, and a nice orange color. You would have written the post-obit line of HTML:

                                          
<font face="Arial" size="20px" color="#FF7A59">Your text hither.</font>

However, this font tag was deprecated back in 1998 so information technology doesn't piece of work with the latest version of HTML, HTML5. It has been replaced past a much more effective way to alter the appearance of text: namely, CSS. CSS text formatting is a more lightweight and flexible alternative to the HTML font tag — and it'southward not difficult to learn.

Permit'due south rewrite the example above using CSS to change the font type of a paragraph. Information technology's important to note that I'm using CodePen, which uses Times New Roman as its default typeface. I'm going to add the mode attribute to the first paragraph chemical element, which means only this paragraph will be styled. The other paragraph and headings on the folio will remain as Times New Roman.

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Type in HTML [Inline CSS]</h2>
                      <p style="font-family: Arial">This is dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'grand using the CodePen Editor, the default typeface is Times New Roman. That means changing the typeface of a paragraph will require me to employ a style aspect that contains the CSS font-family unit property fix to "Arial." The other elements on the page are not targeted by inline CSS and therefore remain Times New Roman.
                      </p>

Here's the result:

See the Pen oNBMjeB by Christina Perricone (@hubspot) on CodePen.

While inline CSS works perfectly for changing a single element on the page, other styles of CSS are recommended over inline CSS. For example, internal CSS tin be placed in the head section of the HTML doc to style multiple elements on the page.

Larn More than: The Beginner's Guide to HTML & CSS

html-css

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

For example, allow's say I want to change the font of every paragraph element to Arial. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the page.

Hither's the CSS:

                                                                   p {
                       font-family: Arial;
                       }

Hither'due south the HTML:

                                                                   <h2>How to Change Font Type in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'one thousand using the CodePen editor, the default typeface is Times New Roman. That means changing the typeface of all paragraphs on the page volition require me to use a CSS type selector and set up the CSS font-family unit belongings  to "Arial." The headings  on the page will remain Times New Roman.
                      </p>

Here's the consequence:

Run into the Pen GRrBpyQ past Christina Perricone (@hubspot) on CodePen.

Now that we understand how to alter font blazon using inline and internal CSS, let's turn our attending to font size.

How to Change Font Size in HTML

To change font size in HTML, use the CSS font-size property. Gear up it to the value yous want and identify it inside a style attribute. And then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.

To continue to rewrite the first example that used the obsolete font tag, allow's alter the font size of a paragraph to 20px with CSS. For this instance, I'm nevertheless going to use CodePen, but I'one thousand going to load Bootstrap CSS on the page. That means, in addition to the default font type existence Helvetica, the default font size of paragraphs will exist 16px, heading 2s will be 32px, and heading 3s volition be 28px.

Aforementioned as above, I'k going to start by adding the style aspect to the starting time paragraph element, which means only this paragraph volition be styled. The other paragraph and headings on the folio will remain their default sizes.

Here's the HTML with inline CSS:

                                                                   <h2>How to Modify Font Size in HTML [Inline CSS]</h2>
                      <p style="font-size: 20px">This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px. The default typeface is also Helvetica. That means changing the size of the first paragraph will require me to use a fashion aspect that contains the CSS font-size holding set to "20px." The other elements on the page are non targeted by inline CSS and therefore remain their default sizes.
                      </p>

Here'southward the result:

Meet the Pen How to Alter Font Size in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

Now let's say I desire to change the font of every paragraph element to 20px. Then I could use a CSS selector to target all paragraphs and place it inside the head section of the folio.

Hither'due south the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Here'south the HTML:

                                                                   <h2>How to Change Font Size in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor but loading BootstrapCDN, so the default font-size of the body and paragraphs are 16px, H2s are 32px, and H3s are 28px.  The default typeface is also Arial. That means irresolute the size of all paragraphs on the page will require me to use a CSS type selector and set the CSS font-size property  to "20px." The headings  on the page will their default sizes.
                      </p>

Here'south the effect:

See the Pen How to Modify Font Size in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

Alter Font Size Within the Aforementioned Paragraph

Another advantage of CSS over the deprecated font tag is that it provides you more granular command over your code so y'all tin can practise things like change the font size of text within the same paragraph.

If I'd like to continue the paragraph at its default font size, and so I'd but wrap the text that I wanted to change the size of in <span> tags. Then I'd add together a style attribute with the font-size property set to the value I want.

Hither's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size Within the Same Paragraph [Inline CSS]</h2>
                      <p>This is dummy text. This is more dummy text. <span  style="font-size: 22px">This is larger text.</span> This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'thou using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of text inside a paragraph, I will wrap the text in span tags. Then, I volition add a style attribute that contains the CSS font-size property set to a value other than 16px. In this example, it's set to 22px.
                      </p>

Here's the event:

Run across the Pen How to Change Font Size Within the Same Paragraph [Inline CSS] past Christina Perricone (@hubspot) on CodePen.

If I'd like to alter the font size of the paragraph and text inside that paragraph to two dissimilar sizes, then I'd be better off using internal CSS. I'd however wrap the text that I wanted to alter the size of in <span> tags. And then I'd add an ID attribute to both the paragraph and span element. Using the respective ID selectors, I'd set the paragraph and bridge element to 2 different sizes.

Hither's the CSS:

                                                                   #larger {
                        font-size: 18px;
                      }
                      #smaller {
                        font-size: 14px;
                      }

Hither'southward the HTML:

                                                                   <h2>How to Change Font Size Within the Same Paragraph [Internal CSS]</h2>
                      <p id="larger">This is dummy text. This is more dummy text. <span id="smaller">This is smaller text.</span>  This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                                            <h3>The Explanation</h3>
                      <p>I'chiliad using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of a paragraph and text within a paragraph, I will wrap the text in span tags and add ID attributes to both the paragraph and span element. Then, I will utilise ID selectors and set them to differnet font sizes in the caput section of the folio.
                      </p>

Here's the upshot:

Run across the Pen ow to Change Font Size Within the Aforementioned Paragraph [Internal CSS] past Christina Perricone (@hubspot) on CodePen.

For a more in-depth wait at the backdrop and values you can apply to modify the size of your text, read How to Alter Font Size in CSS.

How to Change Font Color in HTML

To change font color in HTML, use the CSS color holding. Set it to the value yous desire and place information technology inside a style aspect. Then add this way aspect to an HTML element like a paragraph, heading, push, or span tag.

Using the same example every bit above, permit's now alter the font color of a paragraph to Lorax orange (hex color lawmaking #FF7A59) with CSS. For this example, I'm going to apply the CodePen Editor and not load Bootstrap CSS. But if y'all exercise desire to use that framework, the default font color is the aforementioned (ie. blackness) and so is the process.

Aforementioned as above, I'chiliad going to start by adding the fashion attribute to the first paragraph element, which ways only this paragraph volition be styled. The other paragraph and headings on the page will remain the default color (black).

Hither's the HTML with inline CSS:

                                                                   <h2>How to Alter Font Colour in HTML [Inline CSS]</h2>
                      <p style="color: #FF7A59">This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'm using the CodePen Editor, the default font color is blackness. (This is unremarkably the case no matter what tool or framework you're using to build your web projects.) That means changing the color of a paragraph volition require me to apply a manner aspect that contains the CSS color belongings set to the hex colour code #FF7A59. The other elements on the page are not targeted past inline CSS and therefore remain black.
                      </p>

Hither's the consequence:

See the Pen How to Change Font Colour in HTML [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

At present let's say I want to modify the color of every paragraph element to maroon. Then I could employ a CSS selector to target all paragraphs and place it within the head department of the page.

Here's the CSS:

                                                                   p {
                       color: #FF7A59;
                       }

Here's the HTML:

                                                                   <h2>How to Change Font Color in HTML [Internal CSS]</h2>
                      <p>This is dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'm using the CodePen Editor, the default font colour is black. That ways changing the color of all paragraphs on the page volition require me to use a CSS type selector and set the CSS color property to the hex color code for orange (#FF7A59). The headings  on the page will remain black.
                      </p>

Hither's the result:

See the Pen How to Change Font Colour in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

To learn how to modify the background colour of your text, read How to Alter Text and Background Color in CSS.

How to Change Font in a Div in HTML

Changing font in a div is no different than changing font in a paragraph or bridge element.

A "div" in HTML is simply an chemical element that can separate your web folio into sections so yous can target them with unique CSS properties.

If you'd like to modify the font type, size, and color of text on a page, then you could wrap information technology in div tags and use a CSS selector to mode that chemical element. Let'southward look at an instance:

Here's the CSS:

                                                                   #example {
                        font-family: Arial;
                        font-size: 20px;
                        colour: #FF7A59;
                      }

Here's the HTML:

                                                                   <h2>How to Change Font in a Div in HTML [Internal CSS]</h2>
                                            <div id="example">This is dummy text. This is more than dummy text. This is smaller text.This is more dummy text. This is more dummy text. This is more dummy text. This is more than dummy text. This is more than dummy text.</div>
                                            <h3>The Explanation</h3>
                      <p>I'one thousand using the CodePen Editor and then the default font-type, size, and colour is Times New Roman, 16px, and black. To change all these properties of a department of text, I could wrap the text in a div and add an ID attribute to the chemical element. Then, I can employ an ID selector and set the font-family, font-size, and font-color properties in the head section of the folio.
                      </p>

Hither'south the result:

See the Pen How to Change Font in a Div in HTML [Internal CSS] by Christina Perricone (@hubspot) on CodePen.

Irresolute Your Font with HTML & CSS

With some basic spider web design knowledge, yous can change the type, size, and color of your font. This tin can enable you to customize every detail on your site and brand your content more than readable. If you're building with the Bootstrap framework, check out more ways you can override the default settings in Bootstrap CSS to create a truly unique website.

Editor's Note: This mail service was originally published in July 2020 and has been updated for comprehensiveness.

New Call-to-action