About the HTML-CSS category

About the HTML-CSS category

I tried everything that I could think of, stared at the code for a while, searched google, and tried some more. Could someone please offer a little advice?

  :root {
    --red-color: red;
    background-color: #FF0000;        
  .red-box {        
    background: var(--red-color);
    height: 200px;
<div class="red-box"></div>

You put background-color: red: in the wrong block.
The root is where you set the variable. The variable is called in .red-box but if a browser doesn’t recognize the variable you need to provide an alternative.

If you reset the code you’ll notice that in the .red-box block there’s a empty space before the background: var(--red-color); for you to put in the answer.

Oh, and btw, it’s just background…it told you that. NOT background-color

While this doesn’t entirely cover what you reported in 404 Error Reported about there not being a Hint page it at least answers the problem you’re seeing.
Read the instructions and guides carefully. HTML and CSS do what you tell them. It can be hard and frustrating when you don’t see the error you’ve made at first glance so take a step back. Get a sammich and then try looking again with fresh eyes.

1 Like

Yeah, I probably inserted code there about 25 times it was just bad code on my end. Thanks for the help! I got it sorted. ‘#F00’ to the rescue.

Hello, I have a doubt for my website, that if I want to insert h1, h2, h3, h4, h5 and h6 in random sequence but according to HTML this header tags should be in increasing sequence…?
Please help me…

Hi Sunny,
not sure if I got your question right. You can use and insert the header tags as you wish and set them as you prefer in terms of the feel and look.

Normally the h1 it’s the main title, but that doesn’t mean that has to be strictly “bigger” than the h2 or before it, jut prioritize them in terms of search results importance.

Hope this helps!

Hi people!
I need help understanding the behaviours of <div> when applying margin.

I have two <div>, both with {margin: 24px auto} .
When I inspect them I can see that the second it’s stacked after the previous one, but the bottom margin (24px top and bottom) it’s not affecting this second one, which is actually touching the first <div> with its “box content”.

Which CSS class could be affecting this behaviour? What it could be wrong in my code?


Hello RaniFloat, I’m currently trying to solve this problem as well. How were you able to get through this please?

dont know what to do for Nest the existing img element within an a element.

Posting the actual code would help others evaluate what you have going on. When you reply, simply press the button in the tool bar that looks like “</>” then paste your code in the highlighted area.

Excellent coding.and can i start html,css and java script with online and study online.


@DJB24 please make sure the spelling of “color” in background attribute.

i want help
basic html and html5

hey there, i have a bit of problem understanding my mistake in introduction to html5 elements. it says that the main element should have 2 para. elements as children. sooo, i need help

Freecodecamp. Introduction to the Applied Visual Design Challenges: Create a Graphic Using CSS exercise. You are asked to change the background-color of an element to transparent. I’m out of ideas. Please Help.

include one main element before p element and /main after p element

img element is self closing so there is no need to put a / . if you see the description about every tag in the box aside of your output page! then it is written there.

i can’t what you want to ask please provide codes you have written so far.

Hi, I am not sure I understood your problem but maybe the “a” flag can help you, for instance:

<a href="www.myImageUrl.com">
    <div class="myButton"> Click here </div>

It will open the url whenever you click on the element you will put inside it.

Sir i am going through the Responsive web design course on freecodeCamp and the compiler is showing error .

Hello, it looks like you should only have one .red-box class. Try adding the padding property below the red-box margin element. Also remove the space between padding and the :
Hope that helps :slight_smile: