CSS TEXT COLOR


CSS provides multiple properties for styling and formatting text. One of them is changing the text color. Let's have a look on how we can achieve this:


Text Color

The color property can be used to change the text color. The color can be assigned in three ways:

  • NAME: color name, like "blue"
  • HEX Value: a value in hex like "#FFFF00"
  • RGB Value : A value in RGB like "rgb(100, 150, 110)"

To define a color for all the text within the body, we need to assign color to the body selector.


For Example:


body {
  color: gray;
}
Live Demo!


Output:

This is a sample paragraph. Paragraphs are used to display plain text on a webpage.


Using color property, all the text color will be gray as in the above example.


Background Color


In CSS, background color of an element can be specified using the background-color property. Here's an example:


body {
  background-color: red;
  padding: 10px;
}
p {
   background-color: black;
   color:white;
}
Live Demo!


Output:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


In the above example, all the p elements will get a black background and a white text color.