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>
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" />`
I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scarface</title>
<link rel="stylesheet" href="normalize/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>The World Is Yours</h1>
</header>
<nav>
<li>Home</li>
<li>Pictures</li>
<li>Contact</li>
</nav>
</div>
</body>
</html>
Is it okay if I put my nav tag outside of the header tag? I know many people/developers like to have the navigation "wrapped" inside of their header tags. Thank you in advance for any help with my question.
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>