I can't seem to link html to css - html

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="designpage" type="text/css">
<title> Viktoria Niemann </title>
</head>
<body>
<h1>Dear Vik</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/-LOVE-love-36983825-1680-1050.jpg">
</body>
</html>
I am not sure why html is not linking to css. I think i have written a code correctly


Try this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title> Viktoria Niemann </title>
</head>
<body>
<h1>Dear Vik</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/-LOVE-love-36983825-1680-1050.jpg">
</body>
</html>


change your link tag(rel property) to
<link href="style.css" rel="stylesheet" type="text/css">


Make sure your style.css is in the same folder as your HTML file.
since you are using directly the filename as path.


make your rel "stylesheet" like this ------> rel="stylesheet"
<link href="style.css" rel="stylesheet" type="text/css">


to achieve this you would change the rel to stylesheet instead of designpage.
The rel is required because it specifies the relationship between the document you are working on and the document
<link href="style.css" rel="stylesheet" type="text/css">

Related

Why CSS is not taking effect on my simple HTML page?

The CSS file is not able to take effect in the HTML files. What could be the reason if I ask please?
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\Desktop\Header\header.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="header">
</div>
<div class="inner_header">
<div class="logo_container">
<h1>MY<span>APP</span></h1>
</div>
</div>
<ul class="navigation">
<a><li>Home</li></a>
<a><li>About</li></a>
<a><li>Portfolio</li></a>
<a><li>Contact</li></a>
</ul>
</div>
</body>
</html>
Am I making mistake to include CSS file?

The issue is in the path where your css is being called from.
Replace this
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\code\hussain\src\header.css">
with
<link rel="stylesheet" type="text/css" href="header.css">

HTML wont link with CSS. they are both in the same folder

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.

Styles not loading in firefox

I have a simple html page
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Firefox title</title>
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="test/css" href="static/music/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://127.0.0.1:8000/music/">Viberr</a>
</div>
</div>
</nav>
<h3>Here are all my albums:</h3>
<ul>
<li>Master of puppets - Metallica</li>
<li>Black album - Metallica</li>
</ul>
</body></html>
The problem is that firefox doesn't load css styles. It works well in chrome. I tried to run this page on two different pcs with same result.
Why firefox doesn't load styles?
You can check out the page here

There had been a few issues:
1) typo here text no text:
instead of :
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
it should:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Another typo:
use:
<link rel="stylesheet" type="text/css" href="static/music/style.css">
IMPORTANT type="text/css" is deprecated so you don't need it.
This is not correct either:
I hope that helped.

Take away the type attribute from both links, and it should now work.

Error when validating the head tag

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>

Why is my HTML page's title showing up as plain text on the page?

The title does show up in the browser's title bar as expected, but it also shows up as text on the first line of the Web page. Here's the HTML. What gives?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
<title>User pics</title>
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg">
</body>
</html>

Try
<!DOCTYPE html>
<html>
<head>
<title>User pics</title>
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<img src="http:/blah.s3.amazonaws.com/1xrfnyf08goxpsda1mhs.jpg" alt="" />
</body>
</html>
You can not define link tag outside html tag.

If you have
*{
display:block;
}
in your CSS file make sure to remove it because that will cause the title to show up

remove css reference and check it once.. may be the issue with css

You need to properly close the link tag above.
You have
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8">
it should read
<link rel="stylesheet" href="admin.css" title="" type="text/css" media="screen" charset="utf-8"/>