There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.
Agree with a comment or answer? Like () to up-vote the contribution!
For whatever reason when I move my CSS code into the CSS file and making sure everything is correct the paragraph doesn’t stay green. Must be some bug in the exercise.
What exactly, step by step, am I supposed to do in this exercise? There’s no line of code written out as “style.css” for me to save anything to. When I gave up and clicked “view solution,” the code just looks exactly the same but without the element. Where and what was I supposed to type?
So I removed the selector and declaration from my index.html and moved it over to stylesheet.css and I get stuck. Meaning I cant move on. I suspect that the style isnt supposed to be translated to my preview because i haven’t linked the two together and that this is what I am in the process of learning, however, i keep getting the error, “ Did you remove the ruleset from index.html and add it to style.css ?” I do suppose this could be an issue with my using an IPad to learn on, since i was unable to select the text to cut and paste as directed, however it seems unlikely. Especially considering I finished the initial sections on html without such issues.
After looking at the solution (something I’ve never done [smh]) I was able to fix this issue by removing the space I had left over from the previously removed style element as well as adding a space after my selector in my stylesheet. Hoping this helps someone else.
The order of selectors in your CSS file does matter to some extent, but it’s not strictly about left-to-right or top-to-bottom organization. The order of selectors determines the specificity of your rules, and more specific rules take precedence over less specific ones.
The more specific a selector is, the higher its specificity. For example, an ID selector (#example) is more specific than a class selector (.example), which is more specific than a tag selector (p). It can be written as such:
/* less specific rule*/
p{
color: blue;
}
/*more specific rule than above but less than below*/
#example{
color: green;
}
/*more specific rule than above*/
.example{
color: red;
}
If embedding the stylesheet with HTML as such:
<p id="example" class="example">This is a text with red color</p>
<p class="example">This is a text with green color</p>
<p>This is a text with blue color</p>
Note that in the CSS code, the less specific rule should be written before the more specific rule. This allows more specific rules to override less specific ones. If there’s a conflict between two rules with the same specificity, the rule that appears later in the stylesheet takes precedence.
/* less specific rule*/
p{
color: blue;
}
/* more specific rule than above but less than below */
.example{
color: green;
}
/* more specific rule than above */
#example{
color: red;
}
There’s a typo in your code example - the #example and .example need to switched, as per the above.
As you say in your explanation, the order of specificity goes from type selectors (e.g. “p”) (less specific than class selectors and ID selectors), to class selectors (e.g. “.example”) (higher specificity than type selectors, but lower specificity than ID selectors), and then to ID selectors (e.g. “#example”) (higher specificity than type selectors and class selectors).
) below.
) to up-vote the contribution!