Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
When we run the above code, it will generate an output consisting of the text applied with CSS and displayed 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
element {
background-color property
}
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;
}
</style>
</head>
<body>
<div class="tutorial">TUTORIALSPOINT</div>
</body>
</html>
On running the above code, an output window will pop up consisting of the text along with a background color applied to the text displayed 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-value;
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;
height: 60px;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial">WELCOME.!</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the text that is applied with borders displayed on the webpage.
10 Views
