What color should the text be? (A CSS Quiz)
Tags: css, webdev
Published: 2023-05-29 05:23:20

---
title: What color should the text be? (A CSS Quiz)
published: true
description: Running a couple of polls about CSS selectors, specificity, and !important... and most people are getting it wrong.
tags: css,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnmtzz16bc2r7gxuh6g4.png
canonical_url: https://alvaromontoro.com/blog/68036/what-color-should-the-text-be
---

Today, I ran two quick polls on [Twitter](https://twitter.com/alvaro_montoro/status/1662984822220812289) (they may still be running) and then reshared them on Reddit (on r/css: [initial](https://www.reddit.com/r/css/comments/13uj3a7/what_color_is_the_text_inside_the_div/) and [follow-up](https://www.reddit.com/r/css/comments/13uj6l1/what_color_is_the_text_inside_the_div_followup/)), [Mastodon](https://front-end.social/@alvaromontoro/110449491116370770) (front-end.social), and LinkedIn (on the HTML5/CSS3 group: [initial](https://www.linkedin.com/feed/update/urn:li:activity:7068759315616055296/) and [follow-up](https://www.linkedin.com/feed/update/urn:li:groupPost:2071438-7068761203438727168/)). As I write this article, results are still coming in, so feel free to answer on your favorite social media before continuing.

## Poll 1

The question is simple: **without running the code** –that part is essential as if you run it, you'll know the answer immediately and would be cheating–**what color is the text inside the `<div>`?** 

This is the HTML code:

```html
<div>Hello World</div>
```

And this is the CSS:

```css
div {
  color: blue;
}

div {
  color: red !important;
}

div {
  color: green  !  important; /* notice the spacing */
}
```

There are four possible answers:

- Blue
- Red
- Green
- None of the above (Black)

---

## Poll 2

Then, there's a follow-up question... which is genuinely the same question, just changing a little bit the code: **without running the code, what color is the text inside the `<div>`?**

This time, the HTML code is:

```html
<div id="div" class="div">Hello World</div>
```

And the CSS:

```css
#div {
  color: blue;
}

.div {
  color: red !important;
}

div {
  color: green   !   important; /* notice the spacing */
}
```

And again, there are four possible answers:

- Blue
- Red
- Green
- None of the above (Black)

---

I added the code into two demos, where you can see the answers and a short explanation (don't worry, I'll add both at the end of the article so you don't have to go outside):

- Poll 1: https://codepen.io/alvaromontoro/pen/VwENJXE
- Poll 2: https://codepen.io/alvaromontoro/pen/RweOzMv

Now I will add a picture to have some space before adding the solutions and explanations, so you can't see a spoiler while looking at the code or thinking about the questions.


![Sphere over a grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96fx8yucm1s2ydkjyma8.png)
Photo by [Michael Dziedzic](https://unsplash.com/@lazycreekimages) on [Unsplash](https://unsplash.com/).

.
.
.
.
.
.
.
.
.
.
.

---

## Answers

### Poll 1

The text will be **Green**. If you answered Red, don't worry, you are in good company, as most people answered that color.

Why though? Doesn't Red have an `!important`? Yes, it does, and so does Green. We add the `!` delimiter followed by the `important` keyword to indicate that a declaration is important. But there is no requirement for them to be together! White spaces are allowed between the delimiter and the keyword: `!important` is the same as `! important`. As we have two `!important` declarations and their rules have the same specificity, the one appearing last prevails: the color will be Green.

### Poll 2

The text will be **Red**. If you answered Blue, you went with the most common answer on Twitter.

Why though? The id selector is more specific and sets the color to Blue... Right? Wrong! Because the other two rules have important declarations for colors (as explained in the previous section) even when less specific than the id selector. So we look at the relative specificity: `.div` has a class (1–0) and `div` is just an element/tag selector (0–1). `.div` is more specific. Thus the text will be Red.

---
Poster photo by [Towfiqu barbhuiya](https://unsplash.com/@towfiqu999999) on [Unsplash](https://unsplash.com/).