Linking HTML to CSS - html

Ok im trying to link my index.html to mystylesheet.css but is isn't working? It works perfectly on CodeAcademy but doesnt seem to work when I run it in chrome. I'm using Notepad++ by the way. When I say isn't working, i mean that the styles in the css aren't coming up, like the background colour for example. here it all is, is there anything im doing wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="mystylesheet" href="mystylesheet.css"/>
<title>A$AP World</title>
</head>
<body>
<p>Please agree with the terms&conditions before entering.</p>
</body>
</html>
mystylesheet.css
body {
background-color: black;
}
p{
color:red;
}
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}

Your rel attribute should be rel="stylesheet":
<link type="text/css" rel="stylesheet" href="mystylesheet.css"/>
SitePoint explains it nicely:
The rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be "stylesheet", which means, not surprisingly, “the referenced document is a style sheet.”

Change the rel attribute value, to be rel="stylesheet"
Change this line
<link type="text/css" rel="mystylesheet" href="mystylesheet.css"/>
to be
<link type="text/css" rel="stylesheet" href="mystylesheet.css"/>

Try:
<link rel="stylesheet" type="text/css" href="mystylesheet.css">

Try this:
rel="stylesheet"
instead of
rel="mystylesheet"

<link rel="stylesheet" href="mystylesheet.css" />
As you're using an HTML5 doctype, you can also leave off the type declaration.

Related

HTML won't load linked CSS

I've been trying to learn HTML and have been following a tutorial online.(https://www.w3schools.com/html/html_css.asp) the tutorial does have some misinformation, so I've been looking on here for help as well. I have reached the point where you use external CSS files rather than using the <style> function.
My code is in /HTML/[ProjectName]/project.html, while my CSS is in /HTML/[ProjectName]/CSS/styles.css. Below are both files;
body {
background-color: powderblue;
}
h1 {
color: red;
}
p1 {
font-size: 200%;
}
<!DOCTYPE html>
<html>
<title> Linked CSS </title>
<head>
<link rel="style" type="text/css" href="/CSS/styles.css">
</head>
<body>
<h1> The CSS is in a separate doc </h1>
<p1> Let's see how this works out </p1>
<a href="/CSS/Styles.css" target="_blank">
<p2> Link to CSS file </p2>
</a>
</body>
</html>
From what I've read the css is properly linked to my file, and when I open the link it opens to the css page. What am I doing wrong?
Make sure you update your code to match your correct filename.
If your CSS is stored in the /HTML/[ProjectName]/CSS/style.css, then you should it like this
<link rel="stylesheet" type="text/css" href="CSS/style.css">
Try writing <link rel="stylesheet" type="text/css" href="CSS\styles.css">and check the spelling of your CSS file because they are different in question and in your code.
It`s easy. Take it
link rel='stylesheet' type='text/css' href='CSS/style.css'
and read W3School

How to link my CSS to my HTML in a github hosted site

My problem is that my website that I'm attempting to host with Github pages will not read the CSS that I have linked to it.
My HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
<body>
<h1>Hello World</h1>
<p>I'm under construction!</p>
<h6>Copyright MIT Licence 2018</h6>
</body>
</html>
My CSS looks like this:
body {
background-color: lightblue;
}
h6 {
color: navy;
margin-left: 20px;
}
Link repository: legoman8304.github.io
I'm guessing I linked the CSS wrong because when I using inspect element on the site itself it does show style.css but when opened it's empty. Any help?
You need to link your HTML to the github page rendered style.css and not the file itself in the repo.
Change this:
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
To this:
<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">
And move that stylesheet reference inside your <head> tag.
You can use some way:
Recommend: <link type="text/css" rel="stylesheet" href="style.css" />
Use from raw your css with href: https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css

My HTML isn't linking to my CSS in

I have some simple html and css code. Each file is in the same folder, so it is not a path error. I can't figure out what's going wrong when trying to link the css. When I run the code, the html runs fine, just without any formatting.
Here's my html:
<html>
<head>
<title>Libby Taylor</title>
<link rel="stylesheets" type="text/css" href="libby_css.css">
</head>
<body>
<h1>Libby Taylor</h1>
<div>
<ul class = 'tabs'>
<li>Research</li>
<lI>Writing</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
And here's my css:
body{
color: blue;
text-align: center;
font-size: 40px;
}
You have rel="stylesheets", but it should be rel="stylesheet".
<link rel="stylesheet" type="text/css" href="libby_css.css">
The correct rel value is 'stylesheet', not 'stylesheets', try this, please.
<link rel="stylesheet" type="text/css" href="libby_css.css">
<link rel="stylesheet" type="text/css" href="libby_css.css" />
Not stylesheets, stylesheet. Also make sure that you are using correct HTML syntax, because class = ' tabs ' is pretty weird. It might not cause errors now, but using conventionally correct notation is always a good idea.
You have an error in rel="stylesheets" it should be stylesheet (without s)
The full link would be <link rel="stylesheet" type="text/css" href="libby_css.css">
Just a small typo. Should be rel="stylesheet" not rel="stylesheets":
<link rel="stylesheet" type="text/css" href="libby_css.css">

Brackets won't let me change the background colour of even a blank document using external CSS

I have been using Brackets for a school image and was trying to move div tags next to each other but was experiencing no change in visuals of the code and I wanted to check if there is an issue with the external CSS so I tried to change the background colour to no successes and haven't even been able to change the background colour of a properly set up blank document.
I have been using the following to try to change the colour.
body {
background-color: green;
}
And this is the blank html for the purpose of testing
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="tex/css">
</head>
<body>
</body>
</html>
Am I missing something blindingly obvious or is there another issue?
Thank you very much. G. Ward
probably you have a mistake at <link rel="stylesheet" href="Untitled-2.css" type="tex/css"> try this <link rel="stylesheet" href="Untitled-2.css" type="text/css">
body {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="text/css">
</head>
<body>
</body>
</html>
Your code is just fine!
you are only missing 1 thing a 'text' instead of 'tex'
<link rel="stylesheet" href="Untitled-2.css" type="tex/css"
should be
<link rel="stylesheet" href="Untitled-2.css" type="text/css"

I can't find out what is wrong with my background

So I want to set the file wallpaper.png as the backgound of the page, the image is in the same folder with the html and css files.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheethome" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
And the css:
body {
background-image: url("wallpaper.png");
}
the problemi is with this-
rel="stylesheethome
change it to--
stylesheet... hope this works..
After changing it is working I tried it.
Your body is empty, that's the same for zero pixel height. You can try like this:
html, body {
height: 100%;
}
Good luck.
Try to set stylesheet for rel in your <link> and check your file names.
<link type="text/css" rel="stylesheet" href="stylesheethome.css" />
Try this. I changed the rel attribute value from stylesheethome to stylesheet.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
stylesheethome is not a valid rel attribute value.
Hope this helps.