Can someone tell me why my CSS works internally but when i put it as a comment a
ID: 3813420 • Letter: C
Question
Can someone tell me why my CSS works internally but when i put it as a comment and try it externally, it does not change at all.
html document
<!DOCTYPE html>
<html>
<head>
<title>Web Development</title>
<link rel="stylesheets" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="description" content="Web Development">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Destiny Taylor">
<meta http-equiv="refresh" content="30">
<!--<style>
ul
{
list-style-type: none;
margin: 300;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li
{
float: center;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111111;
}
</style>-->
</head>
<body>
<header>
<nav>
<ul>
<li><a href="home.html" target="_self">HOME</a></li>
<li><a href="portfolio.html" target="_self">PORTFOLIO</a></li>
<li><a href="contact.html" target="_self">CONTACT</a></li>
</ul>
</nav>
</header>
<article>
</article>
<footer>
</footer>
</body>
</html>
CSS document
ul
{
list-style-type: none;
margin: 300;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li
{
float: center;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111111;
}
a:link
{
background-color:transparent;
text-decoration:none;
}
a:visited
{
color:blue;
background-color:transparent;
text-decoration:none;
}
a:hover
{
color:yellow
background-color:transparent;
text-decoration:underline;
}
a:active
{
color:red;
background-color: transparent;
text-decoration:underline;
}
My html is folder Website 1 labeled home.html
And the CSS is labeled style.css in the same folder.
Explanation / Answer
In the above program every thing is write for accessing externally css.
There you had do small mistake in link of the css directive
Previous:-
<link rel="stylesheets" type="text/css" href="style.css">
Replace the Previous link to Below link:-
<link rel="stylesheet" type="text/css" href="style.css">
home.html:-
<!DOCTYPE html>
<html>
<head>
<title>Web Development</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="description" content="Web Development">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Destiny Taylor">
<meta http-equiv="refresh" content="30">
<!--<style>
ul
{
list-style-type: none;
margin: 300;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li
{
float: center;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111111;
}
</style>-->
</head>
<body>
<header>
<nav>
<ul>
<li><a href="home.html" target="_self">HOME</a></li>
<li><a href="portfolio.html" target="_self">PORTFOLIO</a></li>
<li><a href="contact.html" target="_self">CONTACT</a></li>
</ul>
</nav>
</header>
<article>
</article>
<footer>
</footer>
</body>
</html>
Style.css
ul
{
list-style-type: none;
margin: 300;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li
{
float: center;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111111;
}
a:link
{
background-color:transparent;
text-decoration:none;
}
a:visited
{
color:blue;
background-color:transparent;
text-decoration:none;
}
a:hover
{
color:yellow
background-color:transparent;
text-decoration:underline;
}
a:active
{
color:red;
background-color: transparent;
text-decoration:underline;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.