Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add a specific color to an element using CSS?
A basic way that people express themselves is via the use of color. Before they even have the manual skill to sketch, children play with color. Perhaps for this reason, when learning to create websites, people frequently wish to play with color as one of the initial elements.
There are several ways to add color to your HTML elements using CSS to get the exact look you desire. You may manage the appearance of your HTML elements with CSS (Cascading Style Sheets), including their colors, fonts, sizes, and positions. Let's look one by one on adding a specific color to an element using CSS.
CSS Color Property
To specify the text color of an HTML element, we use the CSS color property. It gives you the option to specify the color using a variety of methods, including named colors, hexadecimal values, RGB values, or HSL values. It's a fundamental property for managing how your site content appears visually.
Syntax
Following is the syntax for CSS color property
color: color|initial|inherit;
Example
In the following example we are going to apply the color to the text using the CSS color property
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #DE3163;
}
</style>
</head>
<body>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
</body>
</html>
The paragraph text appears in a pink color (#DE3163) on the webpage.
CSS background-color Property
In CSS, the background-color property is used to define an element's background color. With the exception of margin, the background spans the entire size of the element. It makes the text really simple for the user to read.
Syntax
Following is the syntax for CSS background-color property
background-color: color|transparent|initial|inherit;
Example
Considering the following example, we are going to create a div tag with the class name "tutorial" and use the background-color property
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #E8DAEF;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="tutorial">TUTORIALSPOINT</div>
</body>
</html>
A light purple rectangular box (200px × 100px) with centered text "TUTORIALSPOINT" appears on the webpage.
CSS border-color Property
The border of an element can be colored with the border-color property. The border-style property, which is used to define the borders, must be defined first in order for the border-color property to work. This property cannot function by itself. The top border, right border, bottom border, and left border can each take one to four values. If this attribute is left unset, the element's color will be used instead.
Syntax
Following is the syntax for CSS border-color property
border-color: color|transparent|initial|inherit;
Example
Let's look at the following example, where we are going to add the border color using the CSS border-color property
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
border-color: #DE3163;
border-style: solid;
border-width: 3px;
height: 60px;
width: 200px;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="tutorial">WELCOME.!</div>
</body>
</html>
A rectangular box with a pink solid border and centered text "WELCOME.!" appears on the webpage.
Conclusion
CSS provides multiple properties to add color to elements: color for text color, background-color for background fills, and border-color for border styling. These properties give you complete control over your website's visual appearance and color scheme.
298 Views
