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
Philip Schultz
11,437 PointsCascading Question.
How are we able to change the colors of the links? Under the page portfolio section we put this.
gallery li a p (line 105)
{ margin:0; padding:5%; font-size: 0.75em; color: #bdc3c7; }
but below that, under the colors category we put this (line 145) /* link color */ a { color: #143D66; }
I was under the impression that all links would have to be the #143D66, because it is after the color: #bdc3c7;. What am I missing? According to Cascading the last color would override the first color, right? Why is the color under rule (#gallery li a p) overriding all links?
1 Answer
nik
8,925 PointsHi Philip,
The color is being overridden because a new color property is being specified for all link elements found in
gallery li a p
That specificity basically says all links in the paragraphs located under the gallery list will be gray. Links outside of this element will default to #143d66.
Another example is I can set my default link colors for a page to green #00cc00
a {color: #00cc00}
But lets say I want all my links in my footer to be gray. I would then specify
#footer a {color: #c0c0c0;}
Philip Schultz
11,437 PointsPhilip Schultz
11,437 PointsThanks Hey Nik, So in other words if something is specified in CSS then cascading doesn't apply? Only if the names of the rules are exactly the same?
nik
8,925 Pointsnik
8,925 PointsYes you're correct. On a side note, I got caught up specifying too much and my css ended up looking like a tornado hit it so use conservatively :)