my html is not linking with my css on chrome os-CodePudding

my code is not linking with my css

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="slylesheet" text="text/css">
<title></title>
</head>
<body>
    <header>
        <div >
            <img src="beens.jpg" alt="logo" >
            <nav>
                <ul>
                    <li><a href="#">about</a></li>
                    <li><a href="#">games</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </nav>
        </div>
        
    </header>
</body>
</html>

it worked on my flash drive but not localy

.container {
    width: 80%;
    margin: 0 auto;
}
.header {
    background: rgb(51, 146, 153);
}
li {
  color: rgb(142, 15, 15);
}

my background is still white plz help

i tryed rewriting my link code and checking here

CodePudding user response：

You have a typo here: <link href="main.css" rel="slylesheet" text="text/css">

It is supposed to be stylesheet

Also you are calling your header as a class .header But since you didnt give it a class and want to call the tag you need to set it to

header {
    background: rgb(51, 146, 153);
}

CodePudding user response：

try like this,

.container {
    width: 80%;
    margin: 0 auto;
}
header {
    background: rgb(51, 146, 153);
}
li {
  color: rgb(142, 15, 15);
}

<!DOCTYPE html>
<html>
<head>
    <link href="main.css" rel="slylesheet" text="text/css">
<title></title>
</head>
<body>
    <header>
        <div >
            <img src="beens.jpg" alt="logo" >
            <nav>
                <ul>
                    <li><a href="#">about</a></li>
                    <li><a href="#">games</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </nav>
        </div>
        
    </header>
</body>
</html>

CodePudding user response：

That's standard code:

li a {
  color: RGB(142, 15, 15);}

CodePudding user response：

This should be your HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title></title>

</head>
<body>
    <header>
        <div >
            <img src="beens.jpg" alt="logo" >
            <nav>
                <ul >
                    <li><a href="#">about</a></li>
                    <li><a href="#">games</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">blog</a></li>
                </ul>
            </nav>
        </div>
        
    </header>
</body>
</html>

This should be your css:

.container {
    width: 80%;
    margin: 0 auto;
}
.header {
    background: #1abc9c;
}
.li {
  color: rgb(142, 15, 15);
}