Home > Mobile >  How to change colour of a <p> inside a <div>
How to change colour of a <p> inside a <div>

Time:05-24

I am making a little about me website just for fun. I am trying to change the colour of a p tag which is inside one of my divs. From what i have found on the internet, the css should look like this:

.(div name) p {
color: black;
}

however when I do this, the colour of the font does not change. Could there be something else I'm doing wrong?

/* Header/ navigation bar formatting starts here */

header {
  font-family: 'Akshar', sans-serif;
  font-family: 'Poppins', sans-serif;
  font-family: 'Raleway', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  position: absolute;
  background: black;
  width: 100%;
  top: 0;
}

header h1 {
  text-align: center;
  color: white;
  font-size: 40px;
}

body {
  margin: 0;
}


/* Image Formatting Begins here */

#facebookLogo,
#instagramLogo,
#linkidinLogo,
#twitterLogo {
  margin-right: 10px;
}

.navImages {
  position: absolute;
  top: 50px;
}


/* Header, navigation and image formatting finishes here */


/* body content formatting begins here */

.AboutMe {
  position: relative;
  top: 100px;
  margin-left: 5em;
  margin-right: 5em;
  width: 100%;
  background-color: grey;
  opacity: 50%;
}

.AboutMe p {
  color: black;
}

#aboutme {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 6em;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;400;500;600;700&family=Poppins:ital,wght@1,200&family=Raleway&family=Roboto Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">

<header>

  <div >
    <a href="https://www.facebook.com/jan.smajdor"><img src="images/facebookLogoE.png" alt="Facebook Logo" id="facebookLogo" height=30 width=30></a>
    <a href="https://www.instagram.com/jansmajdor/?hl=en"><img src="images/instagramLogoE.png" alt="Instagram Logo" id="instagramLogo" height=30 width=30></a>
    <a href="https://www.linkedin.com/in/jan-smajdor-13a7071a3/"><img src="images/linkedinLogoU.png" alt="Linkedin Logo" id="linkidinLogo" height=30 width=30></a>
  </div>

  <h1>Jan Smajdor</h1>
</header>

<img src="images/AboutMe.gif" height=150 alt="About Me" id="aboutme">

<div >
  <p>My mame is Jan Smajdor, I am 20 years old and I study <a href="https://www.cardiff.ac.uk/study/undergraduate/courses/course/computer-science-bsc">Computer Science</a> at Cardiff University. </p>
</div>

CodePudding user response:

div.AboutMe > p {
     // Add your styles here
}

CodePudding user response:

.AboutMe {
opacity: 1;
}
.AboutMe p {
 color: #e32929; 
}
  • Related