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>
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've tried everything! My CSS file is in my root folder, every HTML file works fine.
<!DOCTYPE html>
<html>
<head>
<title>Kyra Moonrae Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
There is a HTML error. Just add > after initial-scale=1.0".
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">
I am very new to html and css. I am trying to include an image in a project.
The html file has the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> AirTable GUI For Arcade </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1> GUI Test </h1>
</header>
<img src="full_recycle_bin-512.png"/>
</body>
</html>
The image file full_recycle_bin-512.png is in the same folder as the html file itself so I shouldn't have to use the full path for the image but, even with the full path, the image won't appear. When I run the project with ngrok, I only get the broken image icon. Any help is appreciated!
I suggest you to right click on the broken image and copy the image address, so that you can know if the image path is correct.
Hello I am trying to set an image as a background using a css file in an index.html, however I use the css declaration the image will not be displayed even if you put it on html, can you please help me figure it out, thank you
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<style>
body{
background: url("img/notarde.png")
}
</style>
</head>
<body>
HI
</body>
</html>
CssFile
body{
background: url("img/notarde.png")
}
If you have your style in <style></style> it is not needed to add the same content in a CSS file to do it.
However, if you wants to use an external CSS file you can add this line between the <head></head> :
<link rel="stylesheet" type="text/css" href="THE_PATH_OF_YOUR_FILE">
Your code works, it must be the path of the image that went wrong.
See it here
You need to include the stylesheet in the index.html file.
<link rel="stylesheet" type="text/css" href="[your css file path]">
I hope that helps :D
Have you referenced the CSS file in your HTML Page?
<link rel="stylesheet" type="text/css" href="mystyle.css">
Specify the CSS file name and path in href like href="CSS/filename.css"
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Solution</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
HI
</body>
</html>