VS Code HTML and CSS preview not linking

HTML-CSS
1

Hi all,

I have been staring at this for two days now, but struggling a lot for CSS code file to show up on HTML preview when using VS Code.

(I really like VS Code and don’t really want to switch to Brackets or other code editor - tried Brackets but not a huge fan).

This is my code:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">

<head>
    <title>Maria Bielik</title>
    <link rel="icon" type="image/x-icon" href="Screenshot%202023-05-09%20at%2014.12.32.jpg">
    <link href="css/index.css" ref="stylesheet">
</head>

This is a screenshot of my working space on VS Code - I have checked that all folders/docs are correctly linked. I have followed a few forums and Youtube Videos, so added a CSS folder, which didn’t help either. Have also tried to do a :
<link href="css/index.css" ref="stylesheet" type="text/css"> But didn’t help, as well as using a live server extension on VS Code.

Screenshot 2023-05-12 at 13.19.29
Screenshot 2023-05-12 at 13.19.291920×1248 158 KB

I tried a few online web apps where I can see live preview of my work with html and css, but it is not a long term solution, and I am scared of losing my work on there. I am sure there is someone who can help me with this.

Thanks a lot!

2

One point to note is that it should be rel="stylesheet" (rather than ref).

3

Oh thank you so much! It finally works. Thanks once again

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.