Skip to main content

AtoZ CSS Quick Tip: Utilizing the Color Property

By Guy Routledge

HTML & CSS

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
View the full screencast and transcript for color here.

Welcome to our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) beginning with a letter from the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the color property for you.

css-C2.jpg-01

C is for color

The color property is used to change the color of text on the page, but what about the color of selected text?

Using the ::selection pseudo element, text highlighted with the mouse can be styled. There are only a handful of properties that can be altered when styling the selected text. These are limited to:

  • color
  • background-color
  • cursor
  • outline
  • text-decoration
  • text-shadow

Even though you’re limited in the properties you can style with ::selection, you can still use the cascade to set different selection colors for different parts of the page.

See the Pen tip-c by SitePoint (@SitePoint) on CodePen.

Test out this feature by highlighting some text in each of the paragraphs in the Codepen result.

Vendor prefixes

In Firefox the ::selection pseudo element still needs a -moz prefix and due to the way pseudo elements are parsed, a separate selector and block of styles is required; comma separating the two selectors won’t work.

/* this won't work */
::selection,
::-moz-selection {
  color: white;
  background: green;
}

/* do this instead */
::selection {
  color: white;
  background: green;
}
::-moz-selection {
  color: white;
  background: green;
}

Color Generators

There are a couple of great places to find and create color schemes for your projects. The following are some that I’ve found useful in the past:

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!


Google, Netflix and ILM are Python users. Maybe you should too?