HTML background color
 
In this lesson you will have color codes at the end of this page
 
 
 Here we have a strong Paragraph 
 
 Here we have an italic Paragraph 
 
Visit our HTML tutorial - this is a link 
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS
Note: HTML colors supports 140 standard color names.

HTML text color — using inline CSS

To put a text in a certain color can be done in several ways, as:
1. inside a paragraph

,
2. inside a box

Let’s have an example using:

 
 
 
  

 
 
Colored HTML text
 
 
your description here colored in green
 
 
your description here colored in red
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

More examples for a better understanding text color

 
 
 
  

 
 
Colored HTML text
 
 
your description here RGB colored
 
 
your description here HEX colored
 
 
your description here HSL colored
 
 
your description here colored in red
 
 
 

HTML border color — using inline CSS

To put border color to a text can be done in several ways, as:
1. border inside a paragraph

,
2. border for a box

Let’s have an example using:

 
 
 
 
 
 
HTML border color - using inline CS
 
 
your text here red color
 
 
your text here green color
 
 
 

Note: In the above example I used inline CSS, but it is better to avoid and use external CSS

HTML colors, Text color, Border Color, background color
HTML colors, background, text and border color — html tutorial

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.

Источник

CSS Font Color: A How-To Guide

The CSS background-color property applies color to a text element. You can specify a CSS built-in color keyword, a hexadecimal value, or another color value with the background-color property. The syntax for this property is: color: yourcolor;.

How to Apply a CSS Font Color

Setting the color and background color of text on a website is an essential part of web design.

That’s where the CSS color and background-color properties come in. The color property lets you set the color of HTML text. The background-color property lets you define text background colors.

Find Your Bootcamp Match

• Career Karma matches you with top tech bootcamps
• Access exclusive scholarships and prep courses

Select your interest
First name

Last name

Email

Phone number

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

This tutorial will discuss, with examples, how to set the color of text in CSS. We’ll then talk about how to set the background color of a text element.

CSS Font Color

A CSS font color is set using the color property. The color property sets the color of text, not the background of the element. You can use CSS color keywords or color values like hexadecimal strings to set a color.

The syntax for the color property is:

This rule sets the color of all

tags in an HTML document to red.

We used a CSS color keyword. These keywords are convenient if you want to refer to a standard color, like “red” or “paleblue”. But, these keywords do not describe every color on the spectrum. If you want to use a specific color, you may want to use another type of color label.

The color property accepts any one of the following values:

By default, the text color used by a web page is text color that applies to the tag on a web page. Unless otherwise specified, this will be black.

You could use the color property to define link colors in your style sheet.

Let’s walk through an example to illustrate how the color property works.

Change Font Color CSS: An Example

Suppose we are designing a website for a local grocery store, Peterson and Sons. The owners want the website to display a certain block of text in gray font. We can set this using the following code:

Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.

p

Our code returns: Click the button in the code editor above to see the output of our HTML/CSS code.

«Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!»

Venus, Software Engineer at Rockbot

We use a HTML tag to define a paragraph of text describing the Peterson and Sons grocery store. Then, in our CSS code, we create a style that sets the text color of all tags to gray. To do so, we use a color name value (“gray”).

We could specify “rgb(128, 128, 128)” in place of “gray” if we wanted to refer to an RGB color value. Alternatively, we could have set the text color to gray using a hexadecimal value or an HSL value.

We are not using a CSS file for our styles. Our CSS styles are enclosed within a tag in our HTML document.

CSS Text Background Color

The CSS background-color property sets the background color of an element. The background-color property accepts any of the color values discussed earlier (color name, HEX, RGB, HSL). This property can set the background color of text.

The syntax for the background-color property is:

This code sets a blue background color for all

tags on a page.

CSS Text Background Color Example

Suppose we want to add an orange background color to one of the sentences in the paragraph of text in the example above.

The sentence we want to highlight is “Today, Peterson and Sons operates five stores across the Seattle area.” And, as before, we want all the text in the paragraph to appear in gray. We can apply this text decoration using the following code:

Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.

p < color: gray; >span

Our code returns: Click the button in the code editor above to see the output of our HTML/CSS code.

In our HTML file, we defined a paragraph of text by enclosing that text within tags. Then, we enclosed the last sentence in an HTML tag . Doing so allowed us to apply a specific style only to that particular sentence in our code.

In our CSS code, we specified two rules. The first rule set the color of all text within the tags to gray. The second rule set the background color of all text within the tags to orange.

As you can see above, the final sentence in our code—the one enclosed in tags—has an orange background color. This is the result of the second style rule we wrote.

Conclusion

The CSS color property lets you set the color of text on a web page. The background-color property lets you set a background color for text on a web page.

This tutorial discussed, with examples, how to accomplish these tasks. Now you’re equipped with the skills you need to change font colors and text background colors like an expert web designer!

Are you interested in learning more about HTML? Check out our How to Learn HTML guide . You’ll find expert learning tips and guidance on top coding resources in this guide.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What’s Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.

Related Articles

Источник

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.

Источник