I am making a login screen, and trying to attach css to my file, but the CSS is not being loaded, as in no request is made, no errors are thrown, the link tag is ignored
<!doctype html>
<html>
<head>
<!-- This doesn't work -->
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
<script src="/static/js/login.js"></script>
</head>
<body>
<h1>Login</h1>
<form>
<input id="email" type="email" placeholder="Email">
<input id="password" type="password" placeholder="Password">
<button type="button" onclick="loginClick()">Login</button>
</form>
<p id="errorMessage"></p>
</body>
</html>
I am running a web server that handles redirection by itself, but here is my hierarchy
The link tag uses href instead of src, all you need is to substitute the attribute name.
Before:
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
After:
<link rel="stylesheet" href="/static/css/skeleton.css"/>
<link rel="stylesheet" href="/static/css/normalize.css"/>
<link rel="stylesheet" href="/static/css/main.css"/>
All you need to do here is replace
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
With this code :
<link rel="stylesheet" href="/static/css/skeleton.css"/>
<link rel="stylesheet" href="/static/css/normalize.css"/>
<link rel="stylesheet" href="/static/css/main.css"/>
you cannot use src for including files to your HTML in header. you need to replace all the src with href. Also consider following standards and adding the type type="text/css"
in the end you should have this;
<link rel="stylesheet" type="text/css" href="/static/css/skeleton.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
Related
So I'm building a website with Bootstrap and I also have a local CSS stylesheet I'm using for specific cases. It has worked alright so far, but for some reason, new classes I'm adding won't work. I've tried a number of things already and nothing gives. The class is not even showing up in the inspector (see picture).
What I've tried:
Clearing cache
Trying to be more specific than Bootstrap
Adding type text/css and media all
Here's the basic CSS:
p.description {
color: red;
}
And here is a snippet of the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../public/css/auto-complete.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../public/css/style.css?rnd=28" media="all" />
<link rel="stylesheet" type="text/css" href="../public/css/all.css" media="all" />
</head>
<body class="bg-light">
<div class="container">
<main>
<div class="row g-5">
<div class="col-md-8 col-lg-12">
<form class="needs-validation" action="dbcmds/ajout-outil.php" method="post" enctype="multipart/form-data" name="activity" autocomplete="off">
<div class="row g-3">
<div class="col-sm-6">
<p class="description">Description</p>
</div>
</div>
</form>
</div>
All suggestions welcome! I could inline the CSS but I'd rather do it properly... and understand what's going on!
Many thanks!
Edit------
Here's the structure of the project. The current page is in the admin directory.
Go straight for the route method:
<link rel="stylesheet" href="/public/css/auto-complete.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/public/css/style.css?rnd=28"/>
<link rel="stylesheet" type="text/css" href="/public/css/all.css"/>
Also, I have never seen the media="all" used before, try without.
My CSS file won't load in.
I've tried it with style tags but I don't like that
<link rel="stylesheet" href="style/scss">
<link rel="stylesheet" type="text/css" href="{{ url('style/scss.css') }}">
<link rel="stylesheet" type="text/css" href="path/to/file.css">
Hi there I would like to import a stylesheet import from another folder/ file when I put it on the other file and import it, it seems to have appear nothing...
folderpath:
app/css/stylesheeta.css
app/css/stylesheetb.css
app/css/stylesheetc.css
app/css/stylesheetd.css
app/module/module.js
app/lib/module/abc.js
In the html page,
app/views/stylsheet.html:
<link rel="stylesheet" href="../css/stylesheeta.css" />
<link rel="stylesheet" href="../css/stylesheetb.css" />
<link rel="stylesheet" href="../css/stylesheetc.css" />
<link rel="stylesheet" href="../css/stylesheetd.css" />
<link rel="stylesheet" href="../module/module.css" />
<link rel="stylesheet" href="../lib/module/abc.css" />
In the main index.html
/index.html:
I include the stylesheet.html:
<head>
<link rel="import" href="app/views/stylsheet.html" />
</head>
<body>
//some other stuff here
</body>
however there isn't any output of the stylesheet at all.. im wondering if what I do is permissable
I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.
I am getting 404 error while loading css in webapp.
My html content is like below:
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="ISO-8859-1"> -->
<meta charset="utf-8">
<title>PSL Inter App</title>
<meta name="description" content="PSL Inter app for accounting"/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="WEB-INF/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="WEB-INF/css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="WEB-INF/css/assets/demo.css" rel="stylesheet" type='text/css'>
<!-- <link rel="shortcut icon" href="img/favicon.ico"> -->
</head>
<body>
<div class="col-xs-3">
Please Login!!
<div class="form-group">
<input type="text" value="" placeholder="Username" class="form-control">
</div>
</div>
</body>
</html>
My directory structure is like below:
Can anyone help here?
Thanks!!
You need to find what folder is the root of your app.
I think <link href="/css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'> this can help you.
your css path should be
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.css" rel="stylesheet" type='text/css'>
I moved css folder from WEB-INF to WebContent and included it like below and it WORKED!!
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type='text/css'>
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet" type='text/css'>
<link href="css/assets/demo.css" rel="stylesheet" type='text/css'>