Link HTML file with CSS file in Visual Studio-CodePudding

Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.

I also try to do this, nothing happen :

<link href= "CSS\index.css" rel="stylesheet" type="text/css">

CSS code :

style
h1 {
    background-color: blue;
}

CodePudding user response：

I am also new but I think I can help. You have two options, that I am aware of.

The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).

(index.html)

<!DOCTYPE html>

<html>
    <head>
        <title>yourwebsite.com</title>
        <link rel="stylesheet" type="text/css"
        href="style.css">
    </head>

    <body>
        <img src="your.jpg" alt="Handsome Man" width="100" 
height="100">
    
        <h1><b>your name</b></h1>
    
        <p>your tag line</p>
    
        <a href="https://twitter.com/yourtwitter"</a>
    </body>

</html>

(styles.css)

body{
    background-color: #f4f4f4;
    color: #555555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;

    /* Same as above */
    /* font: normal 12px Arial, Helvetica, sans-serif; */

    line-height: 1.6em;
}

h1{
    color: #00ff00;
}

p{
    color: rgb(0,0,255);
}

The second and worst option is to include your css within your main html file.

(Copied from https://ryanstutorials.net/css-tutorial/css- 
including.php)

<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>

CodePudding user response：

you should use the h1 tag in your html to see the result

CodePudding user response：

Make sure the index.css file is inside the CSS folder, then add the below link tag.

<link rel="stylesheet" href="./CSS/index.css">