Different color for different paragraph


#1

how to make different paragraphs of different color using id attribute and stylesheet?


#2

I would personally use classes for this, well you could make a couple of classes:

.red { color: red; }
.green { color: green; }
.blue { color: blue;}

and then give the classes to the paragraphs you want to have a certain color. You can make more classes,and use hexcolors instead.

Also, depending on your layout, a little math and nth-child can work some magic as well


#3

As, i am a beginner and not very much comfortable with the concept of classes in html. Can you please tell how to use it using attribute id(which helps in differentiating between different paragraphs)?


#4

in the same way, you give an id to a paragraph:

<p id="red">i am red</p>

and then in css:

#id { color: red; }

So, we got id an classes which in roughly the same fashion we can add to a paragraph:

<p id="red">i am red</p>
<p class="red">i am red</p>

now, normally if you want to target a paragraph in css, you would use p as css selector, so the general syntax would be:

selector { property: value;}

which, then we can fill in:

p { color: red; }

now, if you want to target a id in css, you should start the css selector with a number sign (#) or a dot for classes (.):

#red { color: red; }
.red { color: red; }

#5

Got it. So what is the difference between class and id?


#6

ids are used once a page, classes can be used multiply times. Ids overwrite classes. That is the short version, the long version you can find here