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.

Источник

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:

Value	Description	Examples
Color name	A color name	blue, hotpink
HEX color	A hexadecimal color. Identifiers are six characters long.	#f7f7f7, #0000ff
RGB color	RGB stands for red, green, and blue.	rgb(0, 50, 28), rgb(0, 0, 255)
HSL color	HSL stands for hue, saturation, and lightness.	hsl(0, 50%, 50%), hsl(180, 50%, 25%)

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

Источник

Text & Background color

In this article, we’ll discuss just how easy it is to apply both text and background colors to your web pages. Let’s start off with the text color.

Changing the text color

If you have already read the chapters on text and font in CSS, then you might be tempted to take a guess at the name of the property used for controlling text color — how about font-color or text-color? No, actually, because what we’re changing is often referred to as the foreground (text) and background, the CSS property used to control the color of text is simply called color.

So, how can we use it? It’s very, very simple — just have a look at this example:

And that’s all you need. As you can see, I’m using so-called named colors. CSS has a whole bunch of these, but of course not every color in the world is covered by a name — more on that later on.

Changing the background color

Working with the background color is just as easy. For that purpose, we have a property called background-color. It allows us to change the background color of an element just as easy as we changed the text color, and the two properties can of course be combined:

As you can see, the two properties goes well with each other, but they don’t have to be used simultaneously, if you are already happy with the current background or text color. Since both text and background colors are inherited from their parent element, you can easily be in a situation where you would only need to use one of them:

 
This is red text and and this text has a darker background.
 

Notice how the span element keeps the red text color inherited from the parent paragraph element, while we override the background color with a darker variant of the silver color.

Summary

Changing both text and background color is very easy with CSS. So far, we have only shown some basic examples, but to go beyond that and use more advanced color combinations, you need to know a bit more about the way color values are constructed with CSS. We’ll discuss that in the next chapter.

Is your preferred language not on the list? Click here to help us translate this article into your language!

Источник