Colors in CSS (and other Injustices?)
I find that I’m in a melancholic state. I find that I’m thinking about things like injustice and lovers that go missing and bodies that get burned. I’m thinking about how rigorous the process of learning is. Or even how more rigorous wearing the ‘learner’ tag can be. This feeling is probably as a result of learning Angular 2. While I slept, in my dream a white woman came to me and said, “Angular 2 is much easier than Angular 1 once you get the hang of it.” and I felt less anxious afterwards. I think she was God. I’m also wondering about whens. When do I become ‘good’ at a thing? What does it mean to be good at a thing? Good and Unrelentless, perhaps these are synonymous in a kinder Universe.
I remember sitting at a desk months ago and fumbling over coloring in CSS, over color and background color to be more specific. I had written text in a div and I wanted the div, which was the header to be a different color from the text. I wanted the header to be red and the text to be white. I tried guessing my way though it but it didn’t work. CSS can sometimes deceive you into thinking you can guess your way through things — a blind thing grappling onto anything. It was not until I asked Ire who was seated beside me and she said, “color: is for the text and background-color: is for the background”. I said “oh” and many lightbulbs popped up in my head — an epiphany. Then I said thank you.
color: refers to the element color.
background-color: refers to the background color.
For example if we have markup like this:
<h1 class="title">Welcome to the New Age</h1>
And we want the color of the text to be different from the background-color of the div, we can write the css like this:
It’s that simple. Sometimes we can use the “background” property to define the background color because the “background” property is shorthand for all the other background properties. For example:
background: aqua, url('image.png'), no-repeat center;}
Here we have used the background shorthand to define the background-color, the background image, whether the background image should be repeated or not (background-repeat) and the position of the background image respectively. We can also write them out in long form if we want to.
This example would have the same effect as the code snippet above. It’s just the longform version of it. There are different types of values that the style properties “color” and “background-color” can take. Some of them are:
- Keyword values: These are color values that we know and use to define colors in our everyday language. They are values that our computers understand as well. In the example above, we used “red”, “white” and “aqua”. In the same way, we could also have used blue, green, pink, beige, burlywood, coral, dark magneta etc. There’s quite an interesting array of keyword values for colors that we can use because our computer understands them.
- Hexadecimal values: A computer works with light. And so if you mix the colors, Red, Green and Blue (which are not its primary colors but its additive colors), you get the color white. For these values, we use the hexadecimal notation where Zero is the smallest value and F is the largest. So you can mix three two-digit codes to represent each of the colors(Red, Blue and Green). For example:
- The RGB values: These values are based on the RGB color model as well. You can liken this model to all the possible colors that can be created from a combination of these colors. Each parameter (red, green, blue) is used to define the intensity of the color between 0 and 255.
background-color: rgb(255, 255, 128);
- HSLA values: Hsla stands for hue, saturation, lightness and alpha. It makes creating your own colors much more flexible. Hue is measured in degrees between 0 degrees and 360 degrees where around 0 degrees and 360 degrees are for red. 120 degrees are greens and 240 degrees are blues. For saturation, 0% is grayscale while100% is full color. For lightness, 0% is completely black while 100% is completely white. Alpha is for opacity or Transparency value. 0 is fully transparent while 1 is fully opaque. Here’s an example:
background-color: hsla(320, 70%, 50%, 0.5);
5. Global Values: These are values such as inherit, inital and transparent. “Inherit” takes the color value of the parent element. “Initial” takes the default value and “transparent” specifies that the background should be transparent which is the default value.
This morning I woke up and read Alice Walker’s collection of essays “Living by the Word”. I got to this essay titled “Nobody was supposed to survive: THE MOVE MASSACRE” and learned about the way a group of black radicals called MOVE (short for movement) was bombed by the US government in their home. Recently, I have become too engrossed in self and the makings of her to bother (too much) about certain isms. My theory is that the individual is the most important bit of society, take care of her and other things might(?) fall into place. But somehow I was concerned with this story or the sheer genius that Alice Walker is. “Nobody was meant to survive”, they said. It got me thinking (once again) about colors, how unimportant they can pretend to be but how important they actually are. How they can demarcate a people (or things) from each other so that they are treated entirely different from another set of people regardless of what lies underneath. We’re moved by visuality of what we see even before we interact further with it. We’re wired this way and as designers and developers, I’m happy to see that these are things we pay acute attention to. But more can always be done and perhaps, this is why I chose to write about colors in CSS today.