🎉 Before you dive into this article...
🚀 Check out our vibrant new community at CoderLegion.com!
💡 Share your knowledge, connect with like-minded developers, and grow together.
👉 Click here to join now!
Color is an integral part of the means of expression. When writing a website, it is natural to add color to it in the formatting. With CSS , there are many ways to add color to HTML elements in order to achieve the desired result. This article is a detailed introduction to the different methods of applying CSS colors in HTML.
Adding color to an HTML document is pretty straightforward and allows you to color almost anything.
We'll cover most of the points you need to know when working with colors, including a list of what you can color and the CSS properties involved , how to describe a color , and how to use both colors in color sheets. style and in scripts . We will also see how to allow the user to choose a color .
Then we'll end with a brief discussion of using colors wisely : how to select the right colors while keeping in mind the needs of people with color blindness, for example.
You can apply a color to each HTML element. Instead, let's see what are the things that can be drawn on the elements: the text, the border, etc. For each of these things, we will see the list of CSS properties that allow coloring them.
Generally speaking, the property is colorused to set the foreground color for the content of an HTML element and the property is background-colorused to set the color used for the background of the element. These properties can be used on almost any HTML element.
Text
When an element is displayed on the screen, the following properties determine the color of the text, that of its background, and that of the decorations.
Color
This property will correspond to the color used to draw the text as well as its decorations (such as underline, underline, stripes, etc.).
Background-color
This property will correspond to the color used in the background of the text.
Text-shadow
This property allows you to add a shadow effect to the text. Among the options of this shadow, we have the base color of the shadow (which contributes to the blur and which is merged with the background according to the other parameters. See this paragraph for more information.
Text-decoration-color
By default, text decorations (underline, stripes, etc.) use the property colorfor their colors. However, it is possible to override this value and provide a different color with the property text-decoration-color.
Text-emphasis-color
This property will match the color used to draw emphasis symbols used next to text characters. These symbols are mainly used in texts written in East Asian languages.
Caret-color
This property will correspond to the color used to draw the text entry cursor in the element. This property is only relevant for elements that are editable (for example
and
or elements with the attribute contenteditableenabled).
Boxes
Each item is a box with content. This box has a background and a border, regardless of the content it contains
Borders
See the Borders section for a list of CSS properties that can be used to color the border of a box.
Background-color
This property will match the background color, used in areas where the element does not have foreground content.
column-rule-color
This property will correspond to the color used to draw the line that separates columns of text.
Outline-color
This property will correspond to the color used for the outline of the element. The outline is different from the border because it occupies a space around the box and can then overlap the contents of another box. The outline is generally used to indicate that the element has the focus and thus show which element receives the input events.
Borders
Any element has a border drawn around it. A simple border is represented by a line drawing a rectangle around the content of the element. You can read the formatting of borders with CSS to deepen this topic.
It is possible to use the shortened property borderwhich allows you to configure all the characteristics of a border in a single rule (including the characteristics that are not related to the colors such as the width , the style (solid line, dotted lines, etc.) and so on).
Border-color
This property will correspond to the color that will be used for each side of the border.
border-left-color, border-right-color, border-top-color,border-bottom-color
These properties allow you to specify a different color for each side of the element's border.
Border-block-start-color and border-block-end-color
These properties allow you to define the colors used for the sides of the border in the axis orthogonal to the writing direction. So if the text is written in French (left to right), border-block-start-colorwill define the top side of the border and border-block-end-colorthe bottom side. These properties are supplemented by the properties border-inline-*which act on the other axis.
Border-inline-start-color and border-inline-end-color
These properties allow you to define the colors used for the borders for the sides on the axis of the writing direction. Impacted sides therefore depend on the properties writing-mode, direction, and text-orientationwhich enable, most of the time, to adjust the directionality of text depending on the language used. If the text is written from right to left, will border-inline-start-colormatch the color applied on the right side.
How to describe a color
In order to represent color in CSS, it is necessary to find a method to "translate" the analog concept of color into a digital format that a computer can use. To do this, we break down the color into different components. This can be the share of each primary color or the hue and brightness of the color. In short, there are different ways to describe a color in CSS.
Hope it helps.
Top comments (0)