This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
Related
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
Very simple task that doesn't seem to be working for some reason. I am getting no results when I view in the browser, my styles are not being applied to my HTML. My style sheet is in the same folder as main document with the html. I am previewing the code in chrome on a localhost. Not sure what is going wrong here, any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
My styles are placed in a separate document called mystyles.css
<style>
.main {
color: blue;
}
</style>
Test in one file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
.main {
color: blue;
}
</style>
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
Or as Tushar said: remove <style> and </style> from your css file
Where is the location of your CSS file?
For your code to be correct, they need to be in the same folder, otherwise you will need to tell the computer which directory to look in by using ../ for each directory back, and then you need to tell it where to look after, ie.
../STYLES/main.css
u just need to remove the opening and closing style tag as it predefined with the link tag.
update your mystyles.css
i have main.html page where i have 3 href link.
and i have my data in excel file with 3 columns.
what i want to do is when i click on the link in main.html it should fetch data in excel file by using python and display it in html page on browser.
this is what i have written now:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="HOME.css" />
<meta charset="UTF-8">
<title>Racdm GUI</title>
</head>
<body>
<div id="navigation_bar">
<ul>
<li><a class="active" href="HOME.html">iDRAC</a></li>
<li>System</li>
<li>Life Cycle Controller</li>
<li>BIOS</li>
<li>NIC</li>
<li>STORAGE</li>
<li>FC</li>
</ul>
</div>
</body>
</html>
I'm having some trouble connecting my CSS file to my HTML file. This is my code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class =“links”>
<ul>
<li><a href=“#”>ABOUT</a></li>
<li><a href=“#”>PROJECTS</a></li>
<li><a href=“#”>CONTACT</a></li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
and this is my CSS file so far:
.links li{
display:inline;
}
I'm just trying to get the lists (about, projects, contact) to be presented in a straight line on the top of my page. However, even after applying the css code, the format doesn't change on my webpage and is instead presented on three separate lines. I was wondering if someone could help me figure out what I'm doing wrong?
BTW my CSS file is called styles.css
You're not using the quotes for the href.
<link rel="stylesheet" href=“styles.css">
<!-- ^ -->
This is the reason the CSS file is not loaded.
Use normal double quote.
<link rel="stylesheet" href="styles.css">
The same thing is done in complete code. Change this in all the occurrences.
.links li {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>BLAH BLAH | Portfolio</title>
</head>
<body>
<div class="links">
<ul>
<li>ABOUT
</li>
<li>PROJECTS
</li>
<li>CONTACT
</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
I'd recommend you to validate your HTML from W3
<link rel="stylesheet" href=“styles.css"> assuming that the file name of your stylesheet is styles.css AND that file is located in the same file as your HTML page you are referencing this correctly.
Additionally you can try adding the type to your link tag (example below)
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
just change the “ with "
because of this syntax error: browser generates the following error:
GET file:///C:/Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND
the following snippet will work fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title> BLAH BLAH | Portfolio </title>
</head>
<body>
<div class ="links">
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
<h2> BLAH BLAH </h2>
</body>
</html>
I am getting this error when validating my html code
element head is missing a required instance of child element title
<!DOCTYPE html>
<html lang="en">
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>
Well.. try removing
<div id="head">
<link rel="stylesheet" href="stylesheet.css">
</div>
And replace it with
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
This will surely work well. Trust me.
Your head also needs a title tag.
<title> My website </title>
The whole thing should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My website</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
Your page content
</body>
</html>
An html tag requires a head tag, which in turn requires a title tag. You're missing these things. Instead, you're trying to use a div as a head, which is very invalid. I think you meant this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some Page Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
...
it mut look like this:
<head> is a tag.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>All Posts</li>
</ul>
</nav>