About the HTML-CSS category

Use the image tag:

After src=, you add the link to the image, wrapped with quotation marks of course. “Link”.

Remember that the image tag is one of those HTML elements that are self-closing, so you don’t need a separate closing tag. You can also use the width and height attributes to control what size the image will display. For example, in the image I used above, if you wanted to let it display as 640px in width by 480px in height, you would do the following:

alt=“Forest picture.” width=“640” height=“480”>

The width and height attributes defines the image using pixels by default, so you don’t need to write “640px”. It’s a good idea to set a width and height to any image you use on your website, otherwise the image may flicker when the page loads.

In HTML5, though, it’s recommended that you use the “style” attribute when setting a width and height for the image. So, instead of the above, you will use:

alt=“Forest picture.” style=“width:640px;height:480px”>

As you may have noticed, when using the “style” attribute, you now have to add the “px”. A benefit of using the style attribute is that it prevents the style sheets from changing the size of the image.

You will need to correct the link. You’ve written “” after the link. Remove that.

1 Like

You need to add the tag to your code. That’s what’s missing. Before your first

tag, which is on line #2, under your

tag, add . Then, at the end of your code under the final closing tag, add . The main tag needs to have a closing tag. This is what they mean by wrapping up your

tags in the tag.

1 Like

Tank u QuincyLarson in this still have good peolpe like u!!

2 Likes

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?

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

1 Like

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.

6 Likes

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.

2 Likes

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…

1 Like

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!
Ciao

1 Like

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?

Thanks!

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

1 Like

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

1 Like

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.

1 Like

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

Thanks,

2 Likes

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

1 Like

i want help
basic html and html5

1 Like

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.

1 Like

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.