Viewed: 3652

Manage text colour with ease

Code in one minute

When designing a website you can have varied text colours depending on the background colour. This can be an area of frustration due to the unknown elements that could potentially be contained within an area. Here’s a simple technique for overcoming that.

Your CSS may look similar to this

.panel h1,
.panel h2,
.panel p,
.alltheselectors {
  color: #444; }

This is quite tedious to do when it happens in a few situations and can be frustrating when you want to differ one colour. However a better way I have found to set this up is:

body {
  color: #444; }

h1, h2, h3, h4, h5, h6 {
  color: inherit; }

.panel {
  color: #c0ffee; }

Each of your headings and other elements will inherit the colour of the parent element. If you want to change the colour of a specific element, then that can be done by applying the colour by a class. This continues to keep the specificity low and in turn adds more convenience.

It’s a stupidly simple technique and probably why it’s taken the time to discover.

If you found this article useful or it’s saved you time, I would be grateful for your support.

Next to read

Why you should use tachyons to make CSS easier

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.