.no-js img.lazyload { display: none; } Viewed: 2121
Code

Manage text colour with ease

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.

Next to read

Why you should use tachyons to make CSS easier

Get article updates & your free template

It’s my aim to help you be a better designer. I want you to focus on designing, so I’ve made a blank starter template for Illustrator. I guarantee this will save you at least 20 minutes starting a new design. Subscribe and I will send you the starter template and update you each time an article is posted.