CSS3’s Color Property

Published June 20, 2016 by CSS Newbies.

I think it’s safe to say that almost every beginner developer knows that CSS’s color property is used to define the color of your HTML text elements. What many beginner developers might not know, however, is that the color property can also be used to define the color of other HTML elements as well.

In addition to text, the color property applies to:

  • Bullets or other list-style markers on an unordered list
  • Numbers on an ordered list
  • Borders applied to list items
  • The <hr> element
  • Alt text displayed when an image doesn’t load

It’s also worth noting that the color property takes several different types of color values. There’s the color name value, the hex code value, and the rgb or rgba value. See examples of each below:

/* name value */
p{
color: white;
}

/* hex value */
p{
color: #ffffff;
}

/* rgb value */
p{
color: rgb(255, 255, 255)
}

/* rgba value */
p{
color: rgba(255, 255, 255, 0)
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>