How To Change Font Color Onmouseover In Html

To completely customize the look of your website, you tin can't forget about typography — how you adapt and style text. Depending on your design, business niche, and audience, you may want to change the typeface, size, or color of your font.

Download Now: Free Intro Guide to HTML & CSS

For case, if you favor a dark gray over blackness in your color scheme, then you'll desire to change the default font color of your text. If yous're in media, and so you lot may opt for a sans serif font, which is considered the easiest typography to read. Merely if you're in the creative field, then you lot may opt for a decorative typeface like Morris Troy. These are just a few reasons you might want to style the font on your website.

Let'southward await at how you lot can alter font on your site with merely a chip of lawmaking. Nosotros'll encompass:

how to change font type in HTML
how to modify font size in HTML
- how to alter font size within the same paragraph
how to alter 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, apply the CSS font-family property. Set information technology to the value y'all want and place it within a way attribute. Then add this manner attribute to an HTML element, like a paragraph, heading, button, or bridge tag.

This is how you lot utilise inline CSS. Inline CSS ways your HTML and CSS will be placed together in the body section of your HTML medico. And then, technically, you'll be changing font "in HTML."

Yous used to be able to simply utilise the font tag to change the manner of text in HTML. So say you wanted to modify your font to Arial, size 20px, and a nice orange color. You would have written the following line of HTML:

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

However, this font tag was deprecated back in 1998 then it doesn't work with the latest version of HTML, HTML5. It has been replaced by a much more effective way to change the advent of text: namely, CSS. CSS text formatting is a more than lightweight and flexible culling to the HTML font tag — and it's not difficult to larn.

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

Hither'south the HTML with inline CSS:

                                                                   <h2>How to Change Font Type in HTML [Inline CSS]</h2>
                      <p fashion="font-family: Arial">This is dummy text. This is more dummy text. This is more than dummy text. This is more than 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 dummy text. This is more than dummy text. This is more dummy text. This is more dummy text.
                      </p>
                      <h3>The Caption</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 use a style attribute that contains the CSS font-family belongings set up to "Arial." The other elements on the folio are not targeted by inline CSS and therefore remain Times New Roman.
                      </p>

Here's the issue:

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

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

Learn More than: The Beginner'south Guide to HTML & CSS

html-css

Desire to learn more than about HTML? Download our gratis guide for best practices for getting started with HTML.

For case, let's say I want to alter 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.

Here's the CSS:

                                                                   p {
                       font-family: Arial;
                       }

Hither's the HTML:

                                                                   <h2>How to Change Font Blazon in HTML [Internal CSS]</h2>
                      <p>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 Explanation</h3>
                      <p>Since I'm using the CodePen editor, the default typeface is Times New Roman. That means changing the typeface of all paragraphs on the folio will require me to employ a CSS type selector and fix the CSS font-family belongings  to "Arial." The headings  on the folio volition remain Times New Roman.
                      </p>

Here'south the result:

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

Now that we understand how to alter font type using inline and internal CSS, let'south turn our attention to font size.

How to Change Font Size in HTML

To change font size in HTML, use the CSS font-size holding. Set it to the value you lot want and place it within a style attribute. Then add this style attribute to an HTML chemical element, similar a paragraph, heading, button, or span tag.

To go along to rewrite the first case that used the obsolete font tag, allow's change the font size of a paragraph to 20px with CSS. For this example, I'chiliad still going to use CodePen, only I'm going to load Bootstrap CSS on the page. That ways, in addition to the default font blazon beingness Helvetica, the default font size of paragraphs volition be 16px, heading 2s volition be 32px, and heading 3s will be 28px.

Same as above, I'm going to outset past adding the style attribute to the first paragraph element, which means merely this paragraph volition be styled. The other paragraph and headings on the page will remain their default sizes.

Here's the HTML with inline CSS:

                                                                   <h2>How to Change Font Size in HTML [Inline CSS]</h2>
                      <p mode="font-size: 20px">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 dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>I'chiliad 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 irresolute the size of the commencement paragraph will crave me to use a style attribute that contains the CSS font-size property prepare to "20px." The other elements on the page are not targeted by inline CSS and therefore remain their default sizes.
                      </p>

Here's the result:

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

Now let'due south say I want to change the font of every paragraph element to 20px. Then I could utilise a CSS selector to target all paragraphs and place it within the caput section of the page.

Hither's the CSS:

                                                                   p {
                       font-size: 20px;
                       }

Here's the HTML:

                                                                   <h2>How to Alter Font Size in HTML [Internal CSS]</h2>
                      <p>This is 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>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 besides Arial. That ways changing the size of all paragraphs on the page will crave 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>

Hither's the outcome:

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

Alter Font Size Within the Same Paragraph

Another advantage of CSS over the deprecated font tag is that it provides you lot more than granular control over your code so yous tin exercise things similar modify the font size of text inside the same paragraph.

If I'd similar to keep the paragraph at its default font size, then I'd but wrap the text that I wanted to change the size of in <span> tags. Then I'd add a style attribute with the font-size property fix to the value I want.

Hither'southward the HTML with inline CSS:

                                                                   <h2>How to Alter Font Size Inside 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 than 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 Caption</h3>
                      <p>I'grand using the CodePen Editor but loading BootstrapCDN, so the default font-size of paragraphs are 16px. To change the font size of text within a paragraph, I volition wrap the text in span tags. And then, I volition add a way attribute that contains the CSS font-size property set to a value other than 16px. In this example, it's ready to 22px.
                      </p>

Here'southward the consequence:

Encounter the Pen How to Change Font Size Inside the Same Paragraph [Inline CSS] by Christina Perricone (@hubspot) on CodePen.

If I'd like to change the font size of the paragraph and text within that paragraph to two different sizes, then I'd be better off using internal CSS. I'd still wrap the text that I wanted to change the size of in <bridge> tags. 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 span element to two different sizes.

Here's the CSS:

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

Here's the HTML:

                                                                   <h2>How to Change Font Size Inside the Aforementioned 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 than dummy text. This is more dummy text. This is more dummy text. This is more dummy text.
                      </p>
                                            <h3>The Caption</h3>
                      <p>I'g using the CodePen Editor just 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 bridge element. Then, I will utilize ID selectors and set them to differnet font sizes in the head section of the page.
                      </p>

Here'southward the result:

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

For a more in-depth look at the properties and values y'all can use to change the size of your text, read How to Change Font Size in CSS.

How to Change Font Colour in HTML

To change font colour in HTML, apply the CSS color property. Set it to the value yous want and place it within a style attribute. And so add this mode attribute to an HTML chemical element like a paragraph, heading, button, or span tag.

Using the same case as above, let'due south now alter the font color of a paragraph to Lorax orange (hex color code #FF7A59) with CSS. For this example, I'thousand going to use the CodePen Editor and non load Bootstrap CSS. Only if you practice want to utilize that framework, the default font color is the same (ie. black) and so is the process.

Same as in a higher place, I'one thousand going to first by calculation the style attribute to the first paragraph element, which ways only this paragraph will exist styled. The other paragraph and headings on the page will remain the default color (black).

Here's the HTML with inline CSS:

                                                                   <h2>How to Alter Font Color in HTML [Inline CSS]</h2>
                      <p fashion="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 dummy text.
                      </p>
                      <h3>The Explanation</h3>
                      <p>Since I'thou using the CodePen Editor, the default font colour is black. (This is ordinarily the case no affair what tool or framework you're using to build your web projects.) That ways changing the color of a paragraph will require me to use a style attribute that contains the CSS color property set to the hex color code #FF7A59. The other elements on the page are not targeted by inline CSS and therefore remain black.
                      </p>

Here's the outcome:

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

At present allow's say I want to change the colour of every paragraph element to maroon. And then I could use a CSS selector to target all paragraphs and place it inside the caput section of the folio.

Here'due south 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 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 dummy text. This is more than dummy text.
                      </p>
                      <h3>The Caption</h3>
                      <p>Since I'yard using the CodePen Editor, the default font color is black. That means changing the color of all paragraphs on the folio will require me to use a CSS type selector and fix the CSS colour holding to the hex colour lawmaking for orange (#FF7A59). The headings  on the page will remain blackness.
                      </p>

Here'due south the consequence:

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

To learn how to alter 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 span element.

A "div" in HTML is simply an element that can divide your web page into sections then you lot tin target them with unique CSS properties.

If you'd like to modify the font type, size, and color of text on a folio, then you could wrap it in div tags and utilise a CSS selector to style that element. Let's expect at an example:

Here's the CSS:

                                                                   #case {
                        font-family: Arial;
                        font-size: 20px;
                        color: #FF7A59;
                      }

Hither'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 dummy text. This is more dummy text.</div>
                                            <h3>The Explanation</h3>
                      <p>I'm using the CodePen Editor so the default font-type, size, and colour is Times New Roman, 16px, and black. To alter all these properties of a section of text, I could wrap the text in a div and add an ID attribute to the element. Then, I can apply an ID selector and ready the font-family, font-size, and font-color properties in the head department of the page.
                      </p>

Here'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 bones web pattern knowledge, you tin modify the type, size, and color of your font. This can enable yous to customize every detail on your site and make your content more 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 postal service was originally published in July 2020 and has been updated for comprehensiveness.

New Call-to-action