CODEWITHSUNDEEP
javascripthtmlcssreactjs
Maryam Naveed
Maryam Naveed

Reputation: 129

CSS styles not applying to React heading and paragraph

CSS styles not applying to React heading and paragraph. Under 1 div, 1 heading and paragraph is getting CSS but other is not ive tried giving them the same className and Different class names

If I put the heading and paragraph of : Meet Babish... and Im launching my... with the Stay in loop and Many products the styles is the same like where it is currently situated, but only the Stay in looop and more products.. area is not getting css.

CSS is working for all other things, im adding new styles for the same component

Result: I want the styles to be as in Meet babish cookware enter image description here

const Cookware = () => {
    

    return (
        <div className="CookwareMainDiv">

            <h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
            <p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
            <br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
           
            <button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
            <hr/>
            
            <h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
            <p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
            
                     
                </div>
            </div>
    )
}
export default Cookware

css


/*
Cookware
*/
.CookwareMainDiv
{
  width: 80%;
  height:500px;
  margin: auto;
  box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
  font-weight: 100;
  text-align: center;
  margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
  text-transform: uppercase;
  margin-top: 10%;
  font-size:large;
  letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
  margin-top: 5%;
  word-spacing: 5px;
  font-weight: 300;
}
.CookwareMainDivSubDiv1
{
  width: 50%;
  height: 400px;
  margin: auto;
}
.CookwareMainDivSubDiv1b1 
{
  height: 60px;
  width: 300px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 16px;
  letter-spacing: 2px;
  margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
  margin-top: 5%;
  margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
  width: 400px;
  height: 30px;
  border: 2px solid black;
  background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
  width: 100px;
  height: 50px;
  background-color: transparent;
  border:2px solid black;
  margin-left: 30%;
}
.CookwareisSubmitted input
{
  width: 90%;
  height: 50px;
  text-align: center;
  border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
  width: 30%;
  height: 50px;
  text-align: center;
  margin-bottom: 20%;
}

Upvotes: 0

Views: 1305

Answers (4)

Aman Sharma
Aman Sharma

Reputation: 964

Please add the "className" to both of the tags.

<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>

Upvotes: 1

Uttam
Uttam

Reputation: 776

You forgot to give the attribute of className to the Stay in loop and its below paragraph. And you are applying to give css styles as it is a class but it's not.

Your code

<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>

It has to be

<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>

Similarly in the paragraph section.

Upvotes: 0

Neo
Neo

Reputation: 29

This code is working. Delete that extra "</div>" at the end (It might have been a problem if it didn't already cause an error).

Upvotes: 0

Judia
Judia

Reputation: 101

Where is your stylesheet vs where you're importing it into? Is the stylesheet global or component specific? Typically, these issues usually mean the CSS file isn't recognizing the element because it wasn't linked properly to the file the element lives in. (Sometimes, I forget that I gave an element an ID rather than a class.)

Some frameworks don't like certain naming conventions. It helps to look up their official standard. Check out this article from FreeCamp. This article talks about adding a stylesheet with Create React App.

GetBEM did an excellent article on naming conventions, too.

Upvotes: 0

Related Questions