This question already has answers here:
Complete list of reasons why a css file might not be working
(25 answers)
Closed 10 months ago.
I'm trying to use .css files in my project but it doesn't work. The directory hierarchy is: /resources/static/css/style.css. In my html file I tried
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href = "/css/style.css" th:href="#{/css/style.css}" >
</head>
but it does not work. What to do to make the style work? I read several articles but did not understand how to solve the problem
When using / at the start of your href address you are addressing from the root. so you should change the CSS link to this:
<link rel="stylesheet" href = "/resources/static/css/style.css" />
or just link it relatively with ./
for more information read this :
having-links-relative-to-root
try to add type="text/css"
and adding dot to href="./your/location/style.css"
Related
<head>
<title> URL Practice </Title>
</head>
<body>
<img src = "./bloo/chicken.png">
</body>
I'm trying to learn how to do relative URL links and I've been trying to get it to link to an image from a folder that's inside the original file. It's not working and I don't understand why, I feel like I've tried every variation.
This is what I'm working with if that helps
Also I'm really new to this, so if you can explain it to me like you would a 3 year old, that would be awesome because that's probably where my level of expertise is.
I understand that the image is in the "bloo" folder. Your HTML file and the bloo folder are both children to the root folder. For you to link to link the image, you need to need to reference it like this
src="bloo/imagename.jpg"
it will reference it correctly that way.
So your code snipest will look like
<img src="bloo/chicken.jpg"/>
Good luck
No space shall be between "src", "=" and "bloo/chicken.png". Also u don't need that dot. you can install "VisualStudioCode" will be easier.
<!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>
</head>
<body>
<img src="MyImages/meme.jpg" alt="meme">
</body>
</html>
meme.jpg is inside MyImages folder
enter code here
HTML Input src Attribute
\
This question already has answers here:
Stylesheet link failure HTML/CSS
(4 answers)
Closed 2 years ago.
I am struggling linking the below html content with css style sheet but could not solve it.
I am using the Atom text editor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Globe Design Co</title>
<link rel="stylesheet" href="css/style.css">
</head>
Please follow the steps below:
Add <link rel="stylesheet" href="path/to/file.css"/> (replace path/to/file.css with path to css)
Check if the css is in the proper class
Check the path of css file in relation with html.
If you can, please provide the github repo.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have HTML file with <link rel="stylesheet" href="dist/css/style.min.css"> in head and my custom.css file.
Why my custom.css file is ignored - I cannot style image or padding while using devtools in the browser I can simply manipulate it (?)
It seems like I could only use inline styles which is unacceptable.
I have only two css files in head:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Zadanie 1</title>
<link rel="stylesheet" href="dist/css/style.min.css">
<link rel="stylesheet" href="dist/css/custom.css">
</head>
If your file is named 'custom.css' then you need to include that in the href.
<link rel="stylesheet" href="path/to/custom.css">
Did you include your css file in your header?
It should look like this:
<head>
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
Also make sure that the file is located in the same folder as the HTML file unless you change the href to point to a subfolder.
This question already has answers here:
Adding external CSS in an HTML file
(5 answers)
Closed 4 years ago.
Bit of a noob, but I'll stab.
I have used SoloLearn for most of my coding, so the CSS is a tab embedded into the file, and we can't see it. So.. how do I name a css file, and how do I point it to a html file in the same folder?
Thanks in advance.
Create a file called styles.css
Import the file in the head of your html document with
<head>
<link href="styles.css" rel="stylesheet" />
<title>Title</title>
</head>
To connect your CSS file to a HTML one you can use this sample:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
So you are pointing a CSS file in HTML by this line
<link rel="stylesheet" href="styles.css">
in head
You can call it whatever you want, but you include a link to it in your HTML, rather than point it at the HTML. If you called it "style.css" your HTML would start like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
This question already has answers here:
Failed to load resource: the server responded with a status of 404 (Not Found) error in server
(3 answers)
Closed 6 years ago.
Below is a snippet of my html code
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<link rel = "stylesheet" href="css/main.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
I am using chromium as my browser on Linux. My main.css file is not getting loaded for this page. it is inside a css folder and I think I am referencing it correctly in my html.
<link rel = "stylesheet" href="css/main.css">
Also, when I check the source inside the developer options in chromium, I do see a folder named css with main.css inside it. But "main.css" shows up empty.
I am unable to figure out what seems to be going wrong here.Thanks in advance.
Even though that snippet has a bit invalid html, my implementation of css worked just fine using only the snippet in my html file.
Firstly you should validate your html (if it isn't a paste error) and remove the redundant tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning D3</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
Then make sure that the css/ directory is in the same directory with your html file.
your-root-directory
├── css
│ └── main.css
├── your-html-file.html
There is also a possibility that you are editing a wrong file and that is the reason your css is empty (happens to me sometimes when there is multiple files with a same name).