How can I get my stylesheet to merge into my HTML file? - html

I'm working on an assignment for class and I cannot get my CSS to attach at all to the html. I'll upload files as well as give the text-format of what exactly is going on but I've tried a few different things. I am a beginner but I have checked and double checked file paths. When I ctrl+click on the link within svc I consistently open the file. Chrome dev tools shows it as unable to find though.
This is my current set up in html5 :
what I see on vsc
my files are located in the same folder - the wireframe_stylesheet.css is definitely spelled correctly in both places. I've tried doing a / in front of wireframe. I've tried moving the file around and then adding / and folders. I've tried doing a long rout (not sure if it's the name) but all the way from C:// down to the file itself, and nothing seems to want to link it. I've also tried adding style="text/css" that didn't work either. I've tried adding the (.) before and after the file name, I've tried adding the folder above it so that it will go back into the file, I've tried adding a / after the " - still nope.
My html
My Css (sort of, there's more but this is the gist)

Try this
<link rel="stylesheet" href="./wireframe_stylesheet.css">
But I believe you've done something wrong in HTML code, share the full code so I can figure out what's wrong in it.

Use this snippet in between the head tag
<link rel="stylesheet" href=".Your CDs file name.css">

Related

How can I organise my HTML and CSS files and still be able to access them across folders?

I have a project that contains multiple pages of HTML, which all have different CSS files to style them. I don't want to have all of the files under one project folder, completely unorganised and just a big mess of randomly ordered files. I have tried putting different folders for different pages, but when I try and use links to travel across pages, an error appears, saying that the file has been moved, edited or deleted. I have tried searching for ways to organise my files, but have found nothing useful. How can I organise my files and pages, while still being able to travel across them with links?
I believe you're trying to organize your files according to their type. As in, let's say you have a lot of CSS files. I'd suggest you bunch all of them under a folder called CSS. Now, go to your HTML files and change the CSS style, link ref, as you changed the destination. Use the following code to change the file destination.
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href"css/second.css">
I'm assuming your previous link href was "styles.css". When you changed the destination of those files, you got that error. You can even bunch HTML files. However, only shift the files except index.html.
Make a folder called 'pages'. Add all your HTML pages to go there except index.html and you're good to go. In all HTML pages, you need to use the following code to link the stylesheets -
<link rel="stylesheet" href="css/styles.css">
If you want to link another HTML file in some HTML file, then use the following code -
href="pages/second.html"
Till now, you were directly entering file names. Now, you will follow the procedure mentioned below -
"foldername/filename.html"
"foldername/filename.css"
"foldername/filename.js"
Let me know if you face any issues. I'll help you!

Why my sources are not available after I pushed changes to the production?

Something is wrong. When I open my site using localhost then everything is fine. What can be wrong here?
And when I click assets/css/style.css I got error like this:
When ew check Network tab, and click on style.css sotmething weird happens because html file is previewed:
As myself and Quentin mentioned in the comments, it is generally good practice (and the intended effect for most situations) to use /assets/path/to/resource instead of the relative path assets/path/to/resource.
Unless it is intended to leave out that slash (which it isn't in your case, as you said in the comments), you'll need to prefix all the asset links with slashes.
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/scregal.css">
etc.
There is only one possible causes of the problem I know although your question is not so clear.
1.》 Make sure the assets folder is in the same location as your html file.
》Prefix all your href link with a dot. Check the image to see
I faced a problem like this when I wanted to push one of my electron apps to production mode. The dot makes it easy for the packager to load the whole folder.

HTML not applying external styling

I am trying to practice some web development with a simple HTML file and some external styling. I have my HTML and CSS files saved in the same folder, and am attempting to link the CSS to my HTML file. When I go to view the page, none of the styling is applied. There is a file called "styles.css" loaded into the sources tab, but it just looks like my HTML file. The HTML included is from the file I want to link by the name of the file in the sources. You can see the link attempt (I've tried with and without specifying type, and I've tried putting a slash in front of the name of the file), and you can see the file included in sources:
I've looked at each element, I've looked at the computed styles, and nothing suggests that the file is properly loaded. I've looked through several questions and most of the solutions are things I've already tried. Thanks!
Make sure the index file is saved as a .html file.
If it's still not working try href="./styles.css"
try writing href="./style.css"

Making my html link to my css files correctly

I've been using w3schools for a long time and i've never had a problem linking css to my html until today. I have a whole bunch of files referenced as such:
<link rel="stylesheet" href="http://enviroptics.com/Matt/css/styles.css"/>
And I checked the url and when i go to the page everything looks correct in the css, but for some reason it isnt pulling the styles into the html the way it has been for the last 6 months for me... I tried using the chrome editor to see what the problem and it says that my file is not https. It never has been https and i have been using it for many months with no problem.
Does anyone know why it would stop working all of a sudden? Is there another editor that i might be able to use? jsfiddle also tells me i need https..
Any help would be greatly appreciated!
Thanks
open http://enviroptics.com/Matt/css/styles.css.
copy all.
open blocknotes or simple text editor
paste all
save file( name = styles.css )
insert this file in Matt/css in your web server ( ftp )
add <link rel="stylesheet" href="/Matt/css/styles.css"/> in your code html -> head

adding same style sheet to many html files

I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.