By reading this article, you can understand how to specify text color and background color in HTML. All methods for specifying colors are explained using sample code, so if you are a beginner who wants to learn by looking at the actual code or an advanced user who wants to copy and paste, please check it out!
Table of contents
- Color code for text and background
- How to specify HTML text color
- Specify font color and weight with font tag
- Specify text color with style attribute
- Specify text color with style tag
- You can specify the color of only part of the character with HTML span tag and CSS
- How to specify font color and bold at the same time
- How to specify background color in HTML
- How to specify color for outer frame in HTML
- How to specify color for HTML textbox
- Recommended color code list for HTML color specification
- Color code list
- ITSakura Color Code List
- Home page introduction site CSS color code list
- color sample
- summary
Color code for text and background
A color code is a code used to express colors on a web page .
By using color codes, you can specify a wide range of colors, from single colors such as red and blue to colorful colors.
There are mainly three types of notation methods for color codes.
- Color name: Specify the color with a proper noun such as “red” or “blue”
- Hexadecimal color code: Specify the color using hexadecimal numbers with the three primary colors of light (red, green, and blue)
- RGB (decimal) color code: Specify color in decimal using the three primary colors of light as with hexadecimal
Hexadecimal color codes and RGB color codes specify colors in the order red, green, and blue, and express each color with two digits of alphanumeric characters.
Let’s take a look at a sample code that specifies red with each color code.
sample code
How to specify HTML text color
I will explain various ways to specify the text color of HTML.
Specify font color and weight with font tag
Font is a tag used when displaying characters on HTML, and it is also possible to adjust the color and thickness of the characters.
When specifying a color, add the color attribute to the font tag and specify the color code as the value . Specify the size attribute to change the thickness.
The sample code explains how to change the character color displayed by the font tag.
Sample code to change text color
Sample code to change font thickness
The size attribute can have values from 1 to 7, with a default thickness of 3. 1 is the thinnest and 7 is the thickest.
Specify text color with style attribute
The style attribute can be specified in HTML tags to add CSS. The usage of the style attribute is as follows.
sample code
Specify text color with style tag
The style tag can enter CSS in the HTML file. CSS is not reflected in the HTML elements entered before the style tag, so it is recommended to specify the style tag inside the head tag so that the style is reflected in the tag inside the body.
How to specify the style tag is as follows.
<head>
<style>
</style>
</head>The sample code explains how to specify the text color with the style tag.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.test1{
color:red;
}
.test2{
color:#ff0000;
}
.test3{
color:rgb(225, 0, 0)
}
</style>
</head>
<body>
<p class="test1"></p>
<p class="test2"></p>
<p class="test3"></p>
</body>
</html>Specify the selector of the HTML tag or class attribute you want to specify the color, and enter the color in the color property.
You can specify the color of only part of the character with HTML span tag and CSS
“I want to make only the part I want to emphasize in the text displayed in HTML red.”
In the above case, you can do this by enclosing the text you want to specify the color in span tags and specifying the color with CSS.
Since the span tag is an inline element, it does not cause a line break even if it is specified in the sentence.
Specific usage is as follows.
Execution result
How to specify font color and bold at the same time
The color of the text entered in HTML uses the color property, and the thickness of the text uses the font-weight property.
I will explain how to change to red and set bold as an example.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
p{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Enter “color: red;” in the p tag to specify red, and set it to bold with “font-weight: bold;”.
How to specify background color in HTML
To specify the HTML background color, use the CSS background-color property.
The background-color property is responsible for specifying the background color of the specified HTML element.
Set the background color by entering the color you want to specify as the value of the background-color property.
background-color: I will explain how to use it with sample code.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
p{
background-color: red;
}
</style>
</head>
<body>
<p>style
<p style="background-color:red;">style
</body>
</html>The background color can be specified using the style tag and style attribute in the same way as specifying the text color.
How to specify color for outer frame in HTML
The border-color property is used to specify the color of the border of an HTML element.
border-color is a CSS property that specifies the color of the border lines on the top, bottom, left, and right of an HTML element.
The border-color is effective when the HTML element’s border (border) is displayed, and is not reflected when there is no border.
I will explain how to use it using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
p{
border: 1px solid;
border-color: rgb(238, 47, 47);
}
</style>
</head>
<body>
<p>テスト</p>
</body>
</html>As above, if there is no border, use the border property to display it.
Also note that entering the border-color property before entering the border property will have no effect .
How to specify color for HTML textbox
When specifying colors for text boxes created with HTML, use the color and background-color attributes just like other HTML tags.
I will explain how to specify colors for the input tag and textarea tag that create a text box using sample code.
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
input{
color: red;
background-color: rgb(231, 233, 233);
border-color: rgb(238, 47, 47);
}
textarea{
color: red;
background-color: rgb(231, 233, 233);
border-color: rgb(238, 47, 47);
}
</style>
</head>
<body>
<input type="name" value="
<textarea rows=5 cols=20>
</body>
</html>When specifying multiple styles for a single HTML attribute, specifying them in the style tag or CSS file makes them look nicer and easier to maintain.
To color the border of the text box, use the border-color property and enter the color code in the value.
Recommended color code list for HTML color specification
Color codes are used to specify colors in HTML, but it will be difficult to create your own colors if you only understand how to enter them.
Therefore, I will introduce a convenient site that intuitively selects the color you care about and outputs it as a color code.
Please refer to it when specifying colors in HTML!
Color code list
A website with a wide range of color schemes, from the basic 16 colors of the W3C standard to browser-independent safe colors. There are three types of input codes: color name, hexadecimal color code, and RGB color code.
If you hover the mouse over the displayed color, the background color will change to that color, so it is easy to imagine how it will look on the browser.
In addition, the color scheme of the function that is standardly installed in the OS called the system color of the OS is also posted. Since the system colors of the OS are familiar colors, usability can be improved by using them according to the function.
This site is recommended for those who are unsure about which color to choose or who want to use the OS system color.
ITSakura Color Code List
ITSakura’s color code list has the following features.
- Contains a list of color names and how to specify them with color codes
- Use the slider function to create colors in RGB color code format
- You can use the color picker to create colors in hexadecimal format
As mentioned above, in addition to selecting a color, it also has a function that allows you to create a color code using a slider or color picker.
Recommended when you want to find your favorite color while moving the tool.
Home page introduction site CSS color code list
On the home page introductory site, you can choose from two types of colors: basic colors and extended colors.
An extended color is a color that expands the saturation and brightness of the 16 colors that are the basis of color specification . For example, in the case of reddish colors, orange and pink are extensions of red.
In addition, there are extended colors such as green and blue, so it is recommended when you choose a color close to the basic color.
color sample
In the color sample, a wide range of color codes are posted, from primary colors that can be specified by color name and hexadecimal color code, to pastel colors and vivid colors.
The color sample has a particularly large number of listings in the color code list, and you can set the saturation and brightness in detail. In addition, Japanese colors, which are traditional colors of Japan, and Western colors, which summarize the traditional colors of the world, are also posted. This site is attractive for its wide range of genres and colors.
It is recommended when you want to look at many colors and choose the perfect color from among them.
summary
This time, I explained how to specify the color of text and background in HTML. How was it?
Here’s how to specify colors in HTML:
- How to color HTML text: use the CSS color property
- How to specify a color for the HTML background: using the background-color property
- How to specify the color of the text box: Same specification method as other HTML tags
Also, when choosing a color code, you can specify the color smoothly by referring to the recommended color code list introduced in this article.
