I am working on relational selections in the The Ultimate HTML5 & CSS3 Series, and when I apply color to the text in the CSS file it doesn’t change. Here is my code.
HTML
My First Mosh ProjectLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametCSS
body {
margin: 10px;
}
#products2 p {
color: orange;
}
What am I missing? It’s driving me crazy.
Hi.
Should your HTML file indeed looks like what I see, no wonder the style is not applied.
There is no HTML at all.
You need to wrap the content in proper HTML tags to selects elements from the DOM.
Cheers.
Yes, the closing body tag and html tags were inverted, but I fixed it and the color still has not been applied. Any more suggestions?
can we see the code cause right now everyone is guessing. Is your code similar to this?
<body>
<p>My First Mosh Project </p>
<p id="products1">Lorem ipsum dolor sit amet </p>
<p id="products2">Lorem ipsum dolor sit amet </p>
</body>
Also, it should be just #products2 no p afterward. Remember # can only be used in one element in this case, the second paragraph.
Hi,
Yes, The selector is wrong.
You are telling “Style any p element within the element with products2 id”
But the element products2 is the p element itself.
The simplest is to remove the p for it is not needed here.
Another option is to write p#products2 which means “p with id products2”
It works.
Cheers.
I sense frustration, so I’m going to start over from scratch following the video step by step and if I don’t get a different result, I will ask for more help. Thank you for the help you have provided me so far.
Remeber, that this is not something you are going to learn over night, you have the course for a lifetime. The best way to learn is to keep starting over, you got this!
Treasure this.
I’ve lost more time in my life because I worried too much about learning (too) fast.
Don’t.
Build a solid ground and then over it.
Cheers.
Thanks for the encouragement. I started over with the basic selector lesson, and my color is still not being applied. I am doing the exact same thing that I see in the video. Could it be a setting in my text editor? Please take a look at my html and css code.I have include my result as an attachment, which is clearly not orange.
HTML
My First Selector GoogleCSS
body {
margin: 10px;
}
a[href=“https://google.com”]
{
color:orange;
}
we can’t see your html tags man. can you snip your code so We know what it is? Try this
HTML
<p> My First Selector <a id="google" href="https://google.com/">Google</a>
CSS
#google{
color:orange;
}
a[href=“https://google.com”] is wrong way to use selector. You are not selecting your code but trying to select google.com
Indeed.
This is something that everybody should learn to do.
Help others help you.
When you ask for help when there is code please take care to represent it well.
The comment editor is both WYSIWYM and WYSIWYG. (You may hover/tap those words if you need explanation)
For the 1st flavour it is essentially markdown fenced code blocks but you shall not precise the snippet language for proper syntatic coloration. So on 2 lines you add 3 back-ticks `. Then your code in between
The second means you can select a portion of test and just click the </> button in the toolbar on top of the editor.
<html>
<body attribute="value">.....
<html>
.my-css-class {
color:orange;
border-radius: 5px;
}
let myvariable = "my value"
console.log(myvalue)
You get the idea. In classic markdown on the top triple backtick it would expect the language name respectively html, css and js.
Cheers.
I remember learnng about this in the course! You have to be speccifc on the selector, the selector tells the browser excatky what took for, this may be what you are missing.