---
id: 684d11ffd15a531225d081e9
title: Step 17
challengeType: 0
dashedName: step-17
---

# --description--

Now that the styles have been applied to the `div` element, it is time to apply some styles to the `p` element. 

Currently, the text color for the paragraph element is black. But it would be nice if the color were a dark red instead.

In an earlier step, you learned how to work with background colors like this: `bg-red-100`. You can do something similar with text color by following this pattern: `text-color-shade`. 

Here is an example of how to apply a blue text color to an element:

```html
<p class="text-blue-500">This has blue text.</p>
```

Start by adding a class attribute to your `p` element. Then, apply the correct utility class for setting a red text color with the shade set to `700`.

# --hints--

Your `p` element should have a class attribute.

```js
const pEl = document.querySelector("p");
assert.isTrue(pEl?.hasAttribute("class"));
```

Your opening `p` tag should have the `text-red-700` utility class.

```js
const pEl = document.querySelector("p");
assert.isTrue(pEl?.classList.contains("text-red-700"));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Error Message Component</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>  
    <div class="bg-red-100 border-2 border-red-300 rounded-md md:w-1/2 p-4 mt-4 md:mx-auto flex gap-4 justify-center">
      --fcc-editable-region--
      <p>
      --fcc-editable-region--
        <strong>Error!</strong> Something went wrong. Please try again.
      </p>
      <button aria-label="Dismiss">
        <span aria-hidden>&times;</span>
      </button>
    </div>
  </body>
</html>
```
