Html Question posted in
Some basic documentation can be found here.

CSS isn't styling my HTML file, even when it's linked properly

Before I start, I’m pretty new to this and I started a neocities site so I got my meta, title, and link elements from the default page’s html. I’m coding in VSCode and my HTML and CSS files are in the same folder. My problem is that even though to my knowledge, I’ve done it properly, my HTML file isn’t being styled by my CSS file at all. When I open my html file in my browser all I see is the element I put in with no styling. I’ll paste my HTML file and my CSS file below.

HTML:

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pierogi Lover's Personal Site</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>

  <body>
    <div id="flex-container">
      <div id="main">
        <h1>Welcome!</h1>
      </div>
    </div>
  </body>

</html>

CSS:

body {
  background-color: rgb(148, 68, 223);
  margin: 50px;
}
#main {
  background-color: rgb(198, 173, 221);
  border-radius: 20px;
  border: 3px solid rgb(165, 116, 211);
  margin: 30px;
}

I’ve linked to the CSS file properly and when I ctrl + click on the path in the link element it takes me to the correct file. I asked AI what I’ve done wrong and it’s not giving me anything and no matter what I try or how I look at it I can’t see anything wrong.

Thanks for taking the time to read my question.

Tags:

2

Answers


  1. 0

    the code works when running it as a StackOverflow snippet:

    body {
  background-color: rgb(148, 68, 223);
  margin: 50px;
}
#main {
  background-color: rgb(198, 173, 221);
  border-radius: 20px;
  border: 3px solid rgb(165, 116, 211);
  margin: 30px;
}
    <html>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pierogi Lover's Personal Site</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>

  <body>
    <div id="flex-container">
      <div id="main">
        <h1>Welcome!</h1>
      </div>
    </div>
  </body>

</html>

    thus, it may be an issue with file structure / import.

    if both files are in the same folder, then a way to import CSS can be:

    <link href="./style.css" rel="stylesheet" type="text/css" media="all">
    Login or Signup to reply.
  2. 0

    Change this <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    to this:

    <link href="style.css" rel="stylesheet" type="text/css" media="all">

    The leading forward slash "/" is causing the issue. It believes it is looking for a relative url instead of the file at the root. So unless you have the file in a folder other than the root, you won’t need the leading "/"

    Here is another SO post about it as well Starting with a forward slash in html for "href"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search