0

As of right now all I want to do is change the color of my <p> paragraphs and for some reason in CSS it won't let me or it's not allowing it.

<body>

<div class="con"> <!--where you want the image/text-->
    <h1 class="colors">why build muscle?</h1> <!--color/text/height etc-->
</div>
<p class="pj">
    <ul>
        <li>You are healthier, and you'll live longer.</li>
        <li>Keeps that heart pumping, your mind is clearer.</li>
        <li>you have to drink water and it rids of toxins in the body.</li>
        <li>You will become stronger over time.</li>
        <li>More self confidence as you enjoy the way you look more.</li>
        <li>Meet and socialize with people in the gym and learn new things.</li>
        <li>It will make you hotter and appeal to more people physically.</li>
    </ul>
</p>

And in CSS I have:

.colors { 
   background: linear-gradient(90deg, rgba(255,184,115,0.65) 
0%,rgba(255,124,189,0.65) 50%,rgba(108,0,153,0.65) 100%);
   border-radius: 50px;
   color: #fff;
   font-size: 15px;
   letter-spacing: 12px;
   padding: 16px 20px;
   text-decoration: none;
   text-transform: uppercase;
}

.pj {
   color: blue;
}

.con,
.con1,
.con2,
.con3,
.con4 {
   display: flex;
}

I don't know if it's because my paragraphs are below a <div> or what.

This is what it looks like https://s29.postimg.org/ehfu3kxxz/themspot.png https://s29.postimg.org/ndqm7iok7/themsspot2.png

rpadovani
  • 7,101
  • 2
  • 31
  • 50
chrysaron
  • 11
  • 3
  • 1
    You cannot have `ul` inside `p` tag . Refer [this](http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside) – Sandeep Nayak May 21 '17 at 05:32
  • Possible duplicate of [ul element can never be a child of p element](http://stackoverflow.com/questions/10601345/ul-element-can-never-be-a-child-of-p-element) – Nisse Engström May 21 '17 at 18:51

3 Answers3

0

First - next time use codepen or similar to post the code, it would be easier to help you.

Example for the fixed code is: https://codepen.io/anon/pen/OmazJK

The answer is that the list is not allowed inside a paragraph. See here:

Should ol/ul be inside <p> or outside?

In the link above I have moved the color in the CSS file to ul instead of the pj class and you can see that the list is now blue.

Community
  • 1
  • 1
Igal S.
  • 13,146
  • 5
  • 30
  • 48
0

Change paragraph tag to div. and also follow this link:- Should ol/ul be inside <p> or outside?

<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="style.css">
 -->
<style type="text/css">

.colors { 
background: linear-gradient(90deg, rgba(255,184,115,0.65) 
0%,rgba(255,124,189,0.65) 50%,rgba(108,0,153,0.65) 100%);
border-radius: 50px;
color: #fff;
font-size: 15px;
letter-spacing: 12px;
padding: 16px 20px;
text-decoration: none;
text-transform: uppercase;
}

.pj {
color: blue;
}

.con,
.con1,
.con2,
.con3,
.con4 {
display: flex;
}


</style>
 <meta charset="utf-8">
</head>

<body>
    <div class="con"> <!--where you want the image/text-->
    <h1 class="colors">why build muscle?</h1> <!--color/text/height etc-->
    </div>

    <div class="pj">
    <ul>
    <li>You are healthier, and you'll live longer.</li>
    <li>Keeps that heart pumping, your mind is clearer.</li>
    <li>you have to drink water and it rids of toxins in the body.</li>
    <li>You will become stronger over time.</li>
    <li>More self confidence as you enjoy the way you look more.</li>
    <li>Meet and socialize with people in the gym and learn new things.</li>
    <li>It will make you hotter and appeal to more people physically.</li>
    </ul>

    </div>

</body>

</html>
Community
  • 1
  • 1
Sachin Kumar
  • 3,001
  • 1
  • 22
  • 47
-1

ul element can never be a child of p element

can have only inline elements as childs and no block elements

Community
  • 1
  • 1
pep30cula
  • 21
  • 4