Text background colors css

background-color

The background-color CSS property sets the background color of an element.

Try it

Syntax

/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset; 

The background-color property is specified as a single value.

Values

The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

Accessibility concerns

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Formal syntax

Examples

HTML

div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv> 

CSS

.exampleone  background-color: transparent; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Осваиваем свойство background color CSS

В этой статье мы рассмотрим свойства CSS , связанные с цветом. Прочитав ее, вы узнаете:

• как на веб-странице изменить цвет текста;
• как добавить цвет для фона или фоновое изображение;
• как добавить тени;
• как изменять прозрачность.

Цвет текста

Вы наверняка уже знаете о свойстве, используемом для изменения цвета текста – это свойство color . Мы рассмотрим различные способы указания цвета.

Указание названия цвета

Самый простой и удобный способ указать цвет — это ввести его название. Единственным недостатком этого метода является то, что существует только шестнадцать так называемых « стандартных » цветов.

На приведенном ниже рисунке показано шестнадцать цветов, которые можно использовать, введя их название:

Шестнадцать названий цветов, которые можно использовать в CSS

Чтобы изменить цвет всех заголовков на коричневый, нужно ввести:

Заголовок отображается коричневым цветом

Шестнадцатеричные обозначения

Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков .

К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28 . Это комбинация букв и цифр, которые указывают цвет.

Всегда нужно начинать с указания символа хэша (#) , за которым следует шесть букв или цифр от 0 до 9 и от A до F .

Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения ( которые являются компонентами Red-Green-Blue в цвете ), можно получить любой цвет.

Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.

Некоторые графические программы, такие как Photoshop , Gimp и Paint.NET , позволяют указывать цвета в шестнадцатеричном формате.

Вот, например, как можно применить белый цвет, указанный в шестнадцатеричном формате, к абзацам:

При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33 .

Метод RGB

Red-Green-Blue , сокращенно обозначаемый как « RGB ». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.

Это намного практичнее, и с помощью простой программы для рисования, такой как Paint , можно найти нужный цвет. Вот действия, которые необходимо выполнить:

1. Зайдите в меню « Пуск », найдите в нем программу Paint и запустите ее.
2. Перейдите в раздел « Редактировать цвета », как показано на рисунке, приведенном ниже.
3. Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки

Источник

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

Источник