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


#1



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.


#2

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!


#3

@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" >

css:

.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 (#)