Why is my custom css file, which I have linked along with the bootstrap code, is not changing the page appearance or not working? - html

enter image description here
I am trying to create a website with bootstrap, but wanted to add some css of my own.
I have made a folder and have added my html file, not named index and in the same folder is my css file, and have linked it just after the CDN line of the bootstrap code, but the css file is not working due to some reason, and I can not figure out why.
Edit: So after I put the reference link just below the CDN line of the bootstrap code, of my own custom css. It should be working and my html should get updated, but I do not see the changes. Initially I thought it is because of the different folder, but even after putting it all into the same folder the webpage is not updating.

Try this:
<link href="~/FolderName/Petvrs.css" rel="stylesheet" />
Or drag and drop this css file inside HTML page it's must work.

Related

How do I use external CSS in an HTML document in VSC?

I'm practicing using HTML in VSC. I want to use external CSS, since I've already figured out inline CSS and internal CSS. However, when I try to use external CSS, the page doesn't change.
I've tried different documents, and I've tried copying the code from documents that already work. I've tried typing the code into different spots etc. But nothing seems to work.
Any ideas why this might be happening? enter image description hereenter image description here
enter image description here
First of all you need to save both the files with .html or .htm extension for html file and .css for css file
Second the path of the css must be correct if both the html and css path are on same directory then code this
<link rel="stylesheet" href="./styles.css">
I think it works if not can you post the screenshot of the directory you are working and the css and html file
Thank You!!!

CSS not linking to new HTML pages (Breaks on other pages except for index.html)

This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.

Problem with html and css linking them together

I just started using html and css and I have to do something with it but I am getting the error Unable to open 'style.css'. I don't know what the problem is since the path that I used is the same as the file path.
Make sure the CSS file and the HTML file are in the same folder.
based on your image it should be
href="mywebs\site\style.css"
if you want to link site/style.css to mywebs/smth.html you should go one folder back.
<link href="../site/style.css">
or put the site folder inside mywebs, because based on the picture the site folder is not inside mywebs folder.
Sometimes the file may missed directory. You can close and open the code editor and it will work. Also, make sure your html and css file is in same directory. If you css file is in a different directory then use the following code:
<link type="text/css" href=".../style.css"/>

Understanding how to link css with html file on one page in Wordpress

So I'm completely new to the world of coding, and I'm trying to make my website with Wordpress. So far I have a theme and all I want to do is tweak a few things here and there, learning how to manage the code. Something which I cannot seem to understand, even though I have looked for answers everywhere, is how to code CSS with wordpress on a specific page. I discovered the CSS code for the entire theme, but I would never find my way round that. All I want to do is link an external CSS stylesheet to the HTML code. I already know about
"link rel="stylesheet" href="style.css"
but this will not create a stylesheet out of thin air.
So my question is, this stylesheet, where will it appear if I have the right code? Will an extra sheet appear next to these ones?:
enter image description here
And if that's not possible, do I need to link to an external stylesheet in a program such as Notepad++? If that's the case, how do I do that?
I hope you understand my question and you will be able to help me. Thanks
you are better off using this to declare your css
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"/>
and your file will go into your theme directory/ folder no need for additional folders just inside your theme create a style.css file
your css will be in a simmilar adress to the following
wordpress > wp-content > themes > theme-name > style.css
What you need to do is create a Child Theme first. You can do that by downloading Child Theme Wizard plugin. Then after you activate your new theme hover over Appearance tab which is going to open sub-menu with options. Click on editor, and then there will be Stylesheet style.css file to the right. Click on it and put your new styles there.

Where and how to add CSS in a Dynamic Web Project in Eclipse?

I tried a normal test project to check if CSS is applying to the JSP page. But, no matter where I put my css file in the hierarchy, it is not working.
Where to place the css file and how to include the tag in JSP?
this is my Project hierarchy
I wrote a simple
<link href="css/grayscale.css" rel="stylesheet" type="text/css" />
to include css file.
my css file only consists of a test style to change paragraph style.
Please Help :(
In the same location of your JSP file, create a CSS directory (named css) in which you create your CSS file. To access it try using "/css/grayscale.css"