Linking Sytle.css sheet with our HTML

HTML/CSS
1

I could some help, I feel like im missing something so simple here. I amtrying to add my style.css sheet to my HTML Here is my code below. When I do this the CSS I added for the image does not reflect.

I saw in this article how do this, looks like the syntax is correct - How to link your CSS file with your html document sheet?

What am i missing please?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <link rel="stylesheet" href="style.css" />
  <body>
    <img src="images/cloudlinux-icon (1).png" />
  </body>
</html>

CSS 

<style>
      img {
        width: 25px;
        background-color: red;
      }```
2

this is what chat gpt gave me if it dosn’t work i can think of 2 reason, if your style sheet isn’t in the same folder you might have to change it to “…/style.css”/> or if your not properly applying your styles to an img property and it might help to give it an id or class and try to apply to that instead.

<link rel="stylesheet" href="style.css" /> <!-- Move the link tag here -->
<style>
  img {
    width: 25px;
    background-color: red;
  }
</style> <!-- Place the style tag here -->
1 Like
3

Thanks for the response, you were correct it it was the wrong path - I have it now, ty!

2 Likes
4

A classic since 1989. :wink: :+1:

5

Three little additional things to keep an eye on:

  1. Put your CSS link element(s) into the header section.
  2. If you have linked your css to an external file it is best practice to delete your style tags. But keep in mind that they can be useful for debugging (like in this case).
  3. Opt for file names with no spaces and/or special characters. Use underscores, dashes or camelCasing to name your files and folders to avoid errors with URLs and filepaths.
    Cheers.
1 Like