How to use CSS to put multiple properties but for different words


I am going through the review on 18. And I know through span /span you can make the writing different colors, font size, etc. But if I had a sentence like;

((disclaimer, I know you have to use < /> but if i do, it obviously won't show up on the page so i have replaced them with " "))

"p" The dog jumped over the "span" brown "/span" fox but not over the "span" black "/span" cat. "p"

How, using CSS can i make the word brown, brown and the word black, black. The way I am writing it up now, everything i put into "span" it either brown or black. I want to have two different colors in one selector for two different words. Please help, anyone. Thank you.

Replace this line with your code.


You should put ids or classes on the spans!

For example, the HTML like would look something like this:

<p> The dog jumped over the <span id='brown'>brown</span> fox but not over the <span id='black'>black</span> cat. </p>

The CSS for the ids would look something like this:

#brown {
   color: brown;

#black {
  color: black;

Hope this helps!


@heartfeltabomination is right, you can use id's or classes, and i would classes, since you should id's only once, and you might have multiply words you want to make brown or black:

<span class="brown" >


.brown { color: brown; }

don't worry, this will be explained later in the course. For now, just see that class and id are attributes (remember the style attribute? (<p style="">)), and to use classes in css, your css selector should start with a ., for id's this is a number sign (#)