HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

The CSS color property defines the text color for an HTML element:

Example

This is a heading

This is a paragraph.

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

This is a heading

This is a paragraph.

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

This is a heading

This is a paragraph.

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Change Text Color in HTML – Font Style Tutorial

Joel Olawanle

Text plays a significant role on our web pages. This is because it helps users learn what the web page is all about and what they can do there.

When you add text to your web pages, this text defaults to a black color. But sometimes you will want to change the text color to be more personalized.

For example, suppose you have a darker color as the background of your website. In that case, you’ll want to make the text color a lighter, brighter color to improve your website’s readability and accessibility.

In this article, you will learn how to change the color of your text in HTML. We’ll look at various methods, and we’ll discuss which method is best.

How to Change Text Color Before HTML5

Before the introduction of HTML5, you’d use to add text to websites. This tag takes the color attribute, which accepts the color as a name or hex code value:

 Welcome to freeCodeCamp. // Or Welcome to freeCodeCamp. 

This tag got depreciated when HTML5 was introduced. This makes sense because HTML is a markup language, not a styling language. When dealing with any type of styling, it is best to use CSS, which has the primary function of styling.

This means for you to add color to your web pages, you need to make use of CSS.

In case you are in a rush to see how you can change the color of your text, then here it is:

// Using inline CSS 
Welcome to freeCodeCamp!
 // Using internal/external CSS selector

Suppose you are not in a rush. Let’s briefly dive right in.

How to Change Text Color in HTML

You can use the CSS color property to change the text color. This property accepts color values like Hex codes, RGB, HSL, or color names.

For example, if you want to change the text color to sky blue, you can make use of the name skyblue , the hex code #87CEEB , the RGB decimal code rgb(135,206,235) , or the HSL value hsl(197, 71%, 73%) .

There are three ways you can change the color of your text with CSS. These are using inline, internal, or external styling.

How to Change Text Color in HTML With Inline CSS

Inline CSS allows you to apply styles directly to your HTML elements. This means you are putting CSS into an HTML tag directly.

You can use the style attribute, which holds all the styles you wish to apply to this tag.

You will use the CSS color property alongside your preferred color value:

// Color Name Value 
Welcome to freeCodeCamp!
 // Hex Value 
Welcome to freeCodeCamp!
 // RGB Value 
Welcome to freeCodeCamp!
 // HSL Value 
Welcome to freeCodeCamp!
 

But inline styling isn’t the greatest option if your apps get bigger and more complex. So let’s look at what you can do instead.

How to Change Text Color in HTML With Internal or External CSS

Another preferred way to change the color of your text is to use either internal or external styling. These two are quite similar since both use a selector.

For internal styling, you do it within your HTML file’s tag. In the tag, you will add the tag and place all your CSS stylings there as seen below:

While for external styling, all you have to do is add the CSS styling to your CSS file using the general syntax:

The selector can either be your HTML tag or maybe a class or an ID . For example:

// HTML 
Welcome to freeCodeCamp!
 // CSS p

// HTML 
Welcome to freeCodeCamp!
 // CSS .my-paragraph

// HTML 
Welcome to freeCodeCamp!
 // CSS #my-paragraph

Note: As you have seen earlier, with inline CSS, you can use the color name, Hex code, RGB value, and HSL value with internal or external styling.

Wrapping Up

In this article, you have learned how to change an HTML element’s font/text color using CSS. You also learned how developers did it before the introduction of HTML5 with the tag and color attributes.

Also, keep in mind that styling your HTML elements with internal or external styling is always preferable to inline styling. This is because it provides more flexibility.

For example, instead of adding similar inline styles to all your

tag elements, you can use a single CSS class for all of them.

Inline styles are not considered best practices because they result in a lot of repetition — you cannot reuse the styles elsewhere. To learn more, you can read my article on Inline Style in HTML. You can also learn how to change text size in this article and background color in this article.

I hope this tutorial gives you the knowledge to change the color of your HTML text to make it look better.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

How to Use Font Color Tags in HTML

This article was co-authored by wikiHow staff writer, Jack Lloyd. Jack Lloyd is a Technology Writer and Editor for wikiHow. He has over two years of experience writing and editing technology-related articles. He is technology enthusiast and an English teacher.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 623,625 times.

This wikiHow teaches you how to change font color in your HTML document. While the HTML font tag is obsolete in HTML5, you can use CSS to add color to your HTML page’s text. If you’re working with an older version of HTML, you can use the HTML font color tag as needed.

Using CSS

• Go to https://www.w3schools.com/colors/colors_picker.asp in your computer’s web browser.
• Select the base color you want to use in the hexagon at the top of the page.
• Scroll to the shade you want to use on the right side of the page.
• Note the six-character code to the right of the shade.

Find the text you want to color. Scroll through your document until you find the paragraph, header, or other form of text that you want to color.

Note the text’s tags. For example, if the text is a header, you’ll see «» in front of it.

Add the «head» and «style» sections to the top of the document. You’ll do this by typing below the «» tag, pressing ↵ Enter , typing below the «» tag, pressing ↵ Enter twice, and typing in the closing tags for both. Your end result should look like this:

 html> head> style> style> head> body> 

Enter the «color» style tag. Click the space between the » » tags, then enter the following code (making sure to replace red with your color code and «» with the tag for the text you want to color):

 html> head> style> h1>  color: red; > style> head> body> 

Unify the body text color. If you want to make all of your document’s body text the same color, enter the following code with your preferred color substituted for black:

Using HTML Tags

• Go to https://www.w3schools.com/colors/colors_picker.asp in your computer’s web browser.
• Select the base color you want to use in the hexagon at the top of the page.
• Scroll to the shade you want to use on the right side of the page.
• Note the six-character code to the right of the shade.

Find the text you want to color. Scroll through your document until you find the paragraph, header, or other form of text that you want to color.

Add the open «font» tag. Click immediately left of the text you want to color, then type in the following (making sure to replace red with your preferred color): [1] X Research source

Close the «font» tag. Click the space to the right of the end of the text you’re coloring, then type there.

font color="red">This text is red!font> 

Sample HTML Code

Community Q&A

You can use hex codes (e.g. #ff00ff), rgb codes (e.g. rgb(255,100,309) ), or web safe colors (colors that are just their name like ‘red’ or ‘black’). You can use colorhexa.com to get color codes.

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

As long as you are using a normal editor such as notepad, you can just go in and replace the word ‘red’ with the word ‘blue’.

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Источник