Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rishit Shah
4,975 Pointscolor of anchor element not changing
I want to change the color of text links below images in my web page. However the links remain in the dark blue default color. My code is as follows: The changes for color for this particular element are under "PAGE PORTFOLIO" section.
/*this is a list item having image and its description*/
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01" alt ="">
<p>Experimentation with color and texture</p>
</a>
</li>
my css is as follows
/**************************
GENERAL
****************************/
body
{
font-family:'open sans' , sans-serif;
}
a
{
text-decoration:none;
}
#wrapper
{
max-width: 940px;
margin: 0 auto;
padding: 0 5%
}
img
{
max-width:100% /*instructs to fill parent container*/
}
/**************************
HEADER
****************************/
/**************************
NAVIGATION
****************************/
#logo
{
text-align:center;
margin:0;
}
h1
{
font-family:'Changa one',sans-serif;
margin: 15px 0;
font-size: 1.75em; /*1em= current font size = 16 px by default. it is relative unit.*/
font-weight:normal;
line-height:0.8em;
}
h2
{
font-size:0.75em;
margin:-5px 0 0;/*negative margin pulls elements closer*/
font-weight:normal; /*unbold text*/
}
/**************************
NAVIGATION
****************************/
nav
{
text-align:center;
padding:10px 0;
margin:20px 0 0;
}
footer
{
font-size:0.75em;
text-align:center;
padding-top:50px;
color:="#ccc"
}
/**************************
PAGE PORTFOLIO
****************************/
#gallery
{
margin:0;
padding:0;
list-style:none;
}
#gallery li
{
float:left; /*makes elements appear side by side*/
width:45%;
margin:2.5%;
background-color:#f5f5f5;
color:#5cb8e6;
}
/**************************
COLORS
****************************/
/*site body*/
body
{
background:#E8E9EC;
color:#999;
}
header
{
background:#5cb8e6;/*cyan header*/
border-color:#566a68;/*grey border*/
}
/*nav background on mobile devices*/
nav
{
background:#566a68;
}
/*logo text*/
h1,h2
{
color:#fff;/**/
}
/*nav link background*/
nav a, nav a:visited
{
color:#fff;
}
/*selected nav list item*/
nav a.selected , nav a:hover
{
color:#89abed;
/*any anchor in nav which has selected class applied to it will get these atributes*/
/*hover is a pseudoclass which highlights the tab when hovered over*/
}
3 Answers
max cyril
11,713 PointsHey Rishit if you want to change the paragraph text color you need to use this syntax
P{color:red;} if you want to change the anchor color here is the syntax a{color:gold;}
Ted Sumner
Courses Plus Student 17,967 PointsI edited this to be an answer because that is what it is, not a comment.
Ted Sumner
Courses Plus Student 17,967 Pointsmax cyril is correct except that the p in p{color:red}; should be lower case. Also, if you only want to change the color in the anchor elements you would use:
a p {
color:red;
}
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 PointsI does some of the experiment with my this code...and i applied---- li{ color: red; } i,e I applied red color to "<li>" element instead of "<a>" element as "<a>" is within "<li>". The color doesn't change. Why???????
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 Pointsedited to format quotes. Please click edit post to see how I did it for future reference.