Local CSS won't even show up in Inspector - html

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.

Related

Why CSS is not taking effect on my simple HTML page?

The CSS file is not able to take effect in the HTML files. What could be the reason if I ask please?
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\Desktop\Header\header.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="header">
</div>
<div class="inner_header">
<div class="logo_container">
<h1>MY<span>APP</span></h1>
</div>
</div>
<ul class="navigation">
<a><li>Home</li></a>
<a><li>About</li></a>
<a><li>Portfolio</li></a>
<a><li>Contact</li></a>
</ul>
</div>
</body>
</html>
Am I making mistake to include CSS file?
The issue is in the path where your css is being called from.
Replace this
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\code\hussain\src\header.css">
with
<link rel="stylesheet" type="text/css" href="header.css">

HTML ignores link directive, and makes no request

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"/>

Styles not loading in firefox

I have a simple html page
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Firefox title</title>
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="test/css" href="static/music/style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://127.0.0.1:8000/music/">Viberr</a>
</div>
</div>
</nav>
<h3>Here are all my albums:</h3>
<ul>
<li>Master of puppets - Metallica</li>
<li>Black album - Metallica</li>
</ul>
</body></html>
The problem is that firefox doesn't load css styles. It works well in chrome. I tried to run this page on two different pcs with same result.
Why firefox doesn't load styles?
You can check out the page here
There had been a few issues:
1) typo here text no text:
instead of :
<link rel="stylesheet" type="test/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
it should:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
Another typo:
use:
<link rel="stylesheet" type="text/css" href="static/music/style.css">
IMPORTANT type="text/css" is deprecated so you don't need it.
This is not correct either:
I hope that helped.
Take away the type attribute from both links, and it should now work.

Simple HTML doesn't work - need assitance

Does anyone know, why when I try previewing my site, it doesn't show anything? Something wrong with my code?
When I check the source code, it won't tell me accurately enough what the problem is?
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
Try to close explicitly the script tag
<script src="script.js" />
Should be
<script src="script.js" ></script>
If you need more explanations you can check this question.
You are missing the <HTML> and the <!DOCTYPE> tags. Your code code should be like this:
<!DOCTYPE html>
<html>
<head>
<title>My Coursera Site</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js" />
</head>
<body>
Home
About
Contact
<hr>
<div class="container">
<h1 id="title" onclick="alert('Hello');">This is a heading or title</h1>
<div class="row">
<div class="col-md-6 thin_border">
some content for panel 1
</div>
<div class="col-md-6 thin_border">
some content for panel 2
</div>
</div>
</div>
</body>
</html>
Note that you also have a wrong div tag <div="row">, which I'm assuming might be the div class property that's why I set it as class attribute on the above example.
It is also recommended to add the type attribute and explicit closing tag on the JavacScript import, like this:
<script type="text/javascript" src="script.js"></script>

Can't disable responsiveness of Bootstrap

I just want to ask how can I disable responsiveness of Bootstrap. I currently followed the instructions in the tutorial but I can't make my page non-responsive.
What I did in my code is:
1. I removed the viewport in meta tag
2. Set a width in the class .container
When I resized my windows the 3 columns are became responsive.
Here's my sample fiddle
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chuosenko</title>
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="./third_party/bootstrap/dist/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./third_party/jqueryui/jquery-ui.theme.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./third_party/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="./third_party/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="./third_party/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="./js/packery.pkgd.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-4">
<h1>COL 1</h1>
</div>
<div class="col-md-4">
<h1>COL 2</h1>
</div>
<div class="col-md-4">
<h1>COL 3</h1>
</div>
</div>
</body>
</html>
Here's my css:
.container {
width: 1280px;
max-width: none !important;
}
Can you help me with this?
use col-xs-* class for grid. Like suggested in the tutorials.