I am building a web application and trying to link a stylesheet to my app. Here is my code
<html>
<head>
<title>Bubble</title>
</head>
<link rel="stylesheet" href="./public/main.css">
<body>
The app is located in the direct DrDenver/blog. The full style sheet is located in DrDenver/blog/public.
Remove the dot and slash. you are looking above the dir instead of within.
Try This.
<link rel="stylesheet" href="public/main.css">
I added this line to my app.js
app.use(express.static(__dirname +"/public"));
And updated the code on my header.ejs to after moving the main.css to public/stylesheet directory.
link rel="stylesheet" href="/stylesheets/main.css"
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
First Grails (2.3.6) app here. Trying to add a custom CSS file to my views/index.gsp:
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/main.css" />
</head>
<body>
...
</body>
</html>
Inside my grails-app directory, where the views subdir lives, I would have expected to see a resources or css directory, but don't see anything. So I ask: where do I place main.css so that it's available to index.gsp at runtime?
Your css should not go under grails-app/views. It should be under web-app/css/. Then you can do something like this in your GSP...
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">