CSS file wont link with HTML - css

https://imgur.com/a/Hw2ThMR --Webpage
https://imgur.com/a/73H0bpR --CSS file
cant seem to link css file I have tried ALOT and it just wont work. i feel like its a directory issue somehow but i never had such a issue like this before. I have troubleshot quite a bit. and its getting pretty frustrating considering i should be studying, but I'm stuck here with this issue i know i need to fix and understand.

You wrote <link rel="stylesheet.css" href="stylesheet.css"> but correct
<link rel="stylesheet" href="stylesheet.css">

Related

Putting Custom CSS into Laravel 6

I put my css in the public folder and linked to it in my template, but the css won't work. When I run the file out of Laravel using HTML index, it works fine. But, when I put it in Laravel it won't see the css.
This is my code in the template:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
Do I need to add anything to make it blade/laravel specific?
use asset like this:
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/media.css')}}">
read this for more info!
Turns out, it was a browser issue. All of my css and links were correct and the files were in the correct location. It worked in Safari, but not in Firefox. I had to correct a few things on my preferences in Firefox.
can you confirm the CSS files are not reached by the browser ?
If not, maybe the css folder is not in your public folder :
public/css/style.css
This way it should works fine.

Fixing render blocking CSS on WP

Hello I am trying to fix render blocking CSS recommendation from Google Page speed.
<style>here goes critical path</style>
<link rel="preload" as="style" media="all" href="wp-content/cache/autoptimize/css/autoptimize_fb3761d5ff1bb5dcb1bc273f35788f8e.css" onload="this.rel='stylesheet'" />
<noscript id="aonoscrcss">
<link type="text/css" media="all" href="wp-content/cache/autoptimize/css/autoptimize_fb3761d5ff1bb5dcb1bc273f35788f8e.css" rel="stylesheet" />
</noscript>
I use Autoptimize for this purpose, so I inserted critical path and checked defer CSS. However Google doesn't count this as a fixed recommendation.
From this code part, is there any issues that causing it, or it something else? Any hints on how to troubleshoot this issue?
And also Google shows 2 blocking css files with the same name and url.
Well, to be honest, I've been dealing with these kind of stuff for ages. The only thing I manage to do is to add "inline" css to all pages... Yes, it's a pain in the *ss. but after all... google is ok with it..
the solution would be to get ALL css rules for EACH page and add it as an inline-css in your html (minimized of course.)
not sure if that's the best way to go, however, that's what solved the issue for me..
cheers
With Autoptimize, you can enable the Inline all CSS? option, the problem will gone.
Your "critical css" is likely considered insufficient by GPSI #Eng80lvl, you'll have to look into that (regenerating it elsewhere or tweaking it yourself).
"inline all" fixes the "render blocking"-warning, but will (except is you have very little CSS) see GPSI complaining about "prioritize visible content" (as the amount of inlined CSS will cause your actual content to be available later, even if part of the same response).

404 Error Document not found - CSS stylesheet not loaded in erb file with absolute file path on localhost

I am trying to apply a css style sheet to an erb file in sinatra, but when loading on localhost with rack I keep getting a 404 error telling me the file cannot be found.
It feels like I have tried everything from changing file paths to adding type, rel, media to the html tag but nothing seems to work. I am really stumped.
My HTML Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://localhost:9292/public/styles/home.css">
</head>
<body>
<h1> I am working </h1>
</body>
</html>
My CSS
h1 {
color: red;
}
Any help would be majorly appreciated. Thanks in advance!
I solved the issue
As almost suspected, the file path to my css wasn't resolving properly. For the longest time I had no idea why, but it seems that shotgun/sinatra wasn't serving up the files properly.
I'm still not entirely sure what's going on but there is a really good bit of help which I found here:
Github Repo
With a bit of a tutorial here:
Ruby/Sinatra Framework
Kudos to the guy. It's 1:30am and it finally worked.

Import more than one css file to html page

I trying to import 2 css files as follows:
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bootstrap.css">
And for some reson its doesnt working, What would be the problem?
The order of loading css really matters, I think the bootstrap.css file has some class or id which has the same id as you have in general.css. The last css file will cover the previous one.
Correct! The order of loading css really matters. Please check the order you are loading and could you please post your exact issue? Like which part are you not able to get in your html page? #user11001

Linking to External Stylesheet

Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.

Resources