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">
Related
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
<html>
<head>
<title> HELLO </title>
<link rel="stylesheet" type="text/css" href="back.css"/>
</head>
<body>
<h1> WELCOME TO THE NEW WORLD </h1>
<p> This is the world of Oppurtunities </p>
</body>
</html>
the css file is below.
body{
background-color: darkslategrey;
color: azure;
}
h1{
color: coral;
}
You question is pretty vague but your path to the CSS is probably off.
Without more info on your dev environment this is my best suggestion.
Change your CSS link to...
<link rel="stylesheet" type="text/css" href="../back.css"/> Notice the ./back.css
This may not be the correct path to the file but your issue lies in your relative path. It all depends on your file structure.
Basic Examples
<link rel="stylesheet" type="text/css" href="/back.css"/>
<link rel="stylesheet" type="text/css" href="../back.css"/>
<link rel="stylesheet" type="text/css" href="/someFolder/back.css"/>
Perhaps putting the css file into a folder might work out.
<link rel="stylesheet" type="text/css" href="styles/back.css"/>
That usually does the trick, let us know ;)!
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"
Solution:
I asked this question way back with little knowledge in HTML and Javascript. I am sorry for that, anyway the solution here is to not use the same container name to prevent it overlapping other css containers.
Question asked way back ago with little knowledge in JS
How can I import an bootstrap.css file without overwriting other css files?? Is there any way to prevent this? I wish to safe time.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
</head>
Thanks in advance!
Change
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
to
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
Your issue after this lies with any !important declared tags in the bootstrap CSS, however anything you write into style.css will not be over-written by bootstrap otherwise, to ensure - if there's something that's important as you declare it in your style.css, add the !important tag, that overrules any previous declarations made by the bootstrap.css - it's a tag there to be used, great when working with UI frameworks.
Make sure to link to the bootstrap style sheet before every other one.
Should be
<link rel="stylesheet" type="text/css" href="style/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="style/shoppingcartstyle.css" rel="stylesheet" type="text/css">
The rules for CSS rule cascading are complex -rather than trying to paraphrase them badly, I'll simply refer you to the specification:
Using the !important tag is a sign of a not very well put together website, however you can use this to over ride all other style rules.
Example
p{
color:#FFF !important;
}
What I mean, for instance if I have .btn-primary both inside style.css and bootstrap.css, it will overwrite eachother.
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.