Different color for different paragraph


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


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


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)?


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; }


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


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