Hit enter after type your search item

CSS color property: 2 demos of text color animation and links

The CSS color property

The color property is used to define the color of the text in CSS. You may set colors for different sections or elements separately. For example, you may set different colors for paragraph text, text in div elements, anchor text etc.

You may set the color by using the color names like green, blue, red etc. You may also use HEX code of the color or RGB values. For example:

Setting by color name:

color: green;

Setting by HEX code:

color: #804040

Setting by RGB value:

color: rgb(64, 128, 128)

See the following demos where color CSS property is used in text animation and links.

A demo of text color animation

In this demo, the CSS color property is used for multiple times as per duration. The div text will show in different colors. The color property is set in the keyframes:

CSS color

See online demo and code

The CSS:


 

The simple markup:


 

An example of using color with link

In this demo, the HTML links are given a color by using the color property of CSS. The colors for the normal state are different than the hover state. Also, visited links can be shown differently as compared to the unvisited links, as shown in the demo below:

CSS color link

See online demo and code

The CSS used for the menu where color property is used:


 

The markup for the menu containing links:


 

You can see, the CSS class .color-demo ul li a specifies the color of links while underneath that is the color-demo ul li a:visited class that specifies the color for the visited links. Yet below it are the color-demo ul li a:hover and color-demo ul li .current classes that set the color in hover state along with the current link.

This div height required for enabling the sticky sidebar