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