I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
Related
I am working in VS code and I am beginner. I know how to write css in html style but css doesn´t work in external file.
My code:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>WHY</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="style" href="style.css">
<style>
</style>
<body>
<h1>rozkaz</h1>
<p>smiech</p>
<b>haha</b>
<em>hehe</em>
<mark style="background-color: blue;">hihi</mark>
<p>Das ist <del>ein</del> kein Hund.</p>
<p>Das ist <del>ein</del> <ins>kein</ins> Hund.</p>
<sup>hoho</sup>
</body>
</html>
CSS:
h1 {
color: bisque;
}
I tried lot of tutorials but it didn´t work.
<head>
<link rel="stylesheet" href="style.css">
</head>
rel="style" should be replaced with rel="stylesheet".
also, it is better to include stylesheets inside a <head> tag
You have an error in the link tag. The rel attribute should be "stylesheet" instead of "style".
<link rel="stylesheet" href="style.css">
I am trying to change background color of a web page.
To do so I am linking style.css externally to index.html using href:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<!-- <link rel="stylesheet" href="css/style.css" media=”screen”/> -->
</head>
<body>
<!-- body of...body -->
</body>
</html>
My CSS is simply:
body
{
background-color: aqua;
}
My project structure is:
Note index.html resides by itself on the project folder (freebookz), whereas style.css resides in a dedicated folder (css). Hence the reason for
href="css/style.css"
The problem is that the CSS is not linking.
I'm using Vscode and I've also tried replicating this project in Notepad++ and CSS still does not work.
I've tried force-reloading the page with SHIFT+CTRL+R to no avail.
Can someone point me to the error?
I've exhausted all attempts to make this work.
In your tag check your media attribute, instead of double quotation mark, you have used this Unicode character “”” (U+201D) .
Here is my code, paste it in your code, it would work.
<link rel="stylesheet" href="css/style.css" media="screen"/>
Let me know whether it is working or not ?
That's right, have you tried uncommenting it?
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" media=”screen”/>
</head>
<body>
<!-- body of...body -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hello this is paragraph</p>
</body>
</html>
This is my index.html file. This is head part of result.html and the name of css is result.css which is in same folder
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="./result.css" type="stylesheet" type="text/css">
<title>Document</title>
Your link tag should be like this:
<link href="./result.css" rel="stylesheet" type="text/css">
It seems you've accidently typed type="stylesheet" instead of rel="stylesheet"
Take a look at the reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
I am using these two links but not applying to my file.
Could you be more specific, what is not working? have you tried changing font-family of the element you want to change font of? Here is font applied to the body.
body {
font-family: 'Lato', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
https://jsbin.com/wotusas/
You can use them both at the same time, that should not be a problem.
To make the font getting applied to your site, you also need some CSS rules. these also need to have higher precedence than the ones from the boostrap file, or the same precedence but applied after the bootstrap file.
I am using Bootstrap to display a list and I am trying to customize its list-item-component.
I have the following code in my CSS file:
.list-group-item {
border:0 !important;
padding-top:2px;
padding-bottom:2px;
}
I reference the CSS file like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Restriction Lists</title>
</head>
<body>
<div id="tree"></div>
<script src="ListApplication.js"></script>
</body>
</html>
The Bootstrap code is in the following file(I am using React).
<script src="ListApplication.js"></script>
Another weird thing is that Chrome Developer Tools does not display the CSS file correctly.
Try with <meta> first:
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="list.css" rel="stylesheet" type="text/css">
and make sure jquery and bootstrap are coded succesfully in your ListApplication.js
it should work.
The problem was that I was opening the HTML file from within Webstorm. When I was changing the CSS file, the changes were not loaded into the browser upon refresh.