How To Change Only One Paragraph's Color In CSS?-CodePudding

I Was Using The p{} Function To Color In Paragraphs But I Wanted The Other Paragraph To Have Another Color, Like I Wanted 1 Paragraph To Be Green And The Other To Be Blue

I tried To Search It Up On Google And Here But I Couldn't Find A Answer So It Would Be Really Helpful If I Could (And Also I Want The Code To Only Be In CSS Not HTML)

CodePudding user response：

CSS combination! I mean combinator in CSS will help you to figure out the desired result.

Descendant Selector

Match all the elements that are descendent of a specified element.

div p {background-color:blue;}

Child Selector

Select all elements that are children of a specified element.

div > p {background-color: blue;

Adjacent sibling selector

Select all elements that are directly after another specific element. The adjacent sibling element must have the same parent element.

div p {background-color:blue;}

General sibling selector

Select all elements that are next sibling elements must have the same parent element

div ~ p {background-color:blue;}

CodePudding user response：

Ids are very useful for targeting specific elements on your page. In any tag, you can use the id attribute to target that specific element in CSS.

If you want to target a couple of elements the same way, use the class attribute instead.

#idtest{color:blue;}
.classtest{color:red};

<p id="idtest">Paragraph goes here...</p>
<p >A second paragraph...</p>
<p >A third paragraph...</p>

CodePudding user response：

You could do it a few different ways. You could give the paragraphs separate classes or IDs, and then associate styles with a different font-color attribute for each. Here's an example using classes:

<html>
    <head>
        <title>Green/Blue Demo</title>
        <style type="text/css">
            .green {
                color: green;
            }
            .blue {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p >
            This is some green text.
        </p>
        <p >
            This is some blue text.
        </p>
    </body>
</html>

CodePudding user response：

You can use an ID. This lets you select one HTML tag, and not all others.

In the HTML file, add an ID with id="id-name". Example:

<p id="lorem-ipsum">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Now, in the CSS file, you can select the ID. Example:

#lorem-ipsum {
  color: green;
}

You can only use ID's once though, so you can't have multiple paragraphs with the same ID. If you want to have multiple paragraphs with the same "ID" you can use classes. So it would be like this:

.red-paragraph {
  color: red;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p >First paragraph</p>
    <p >Second paragraph</p>
    <p>Third paragraph</p>
    <script src="index.js"></script>
  </body>
</html>