How to load CSS in the right way? - html

I am currently building a new website, I only got a css problem right now.
I ve got this between my head tag:
<link rel="stylesheet" type="text/css" href="css/style.css">
Only the problem is it doesn't load at all, tried things like: addin base url, put whole url in it.
Where I think the problem is, the .htaccess, when i remove it it works, but i still need the line for other things:
RewriteRule ^(.*)/(.*)$ index.php?region=$1&summoner=$2 [L]

Your css file is located at https://lds.gg/css/style.css, but your index.php file is not secure. You are likely going to have mixed content issues. Still, if you link to your css file like so:
<link rel="stylesheet" type="text/css" href="https://lds.gg/css/style.css">
you should be fine.

Related

I need help linking my external files on my websites server

Recently re-did all the files to my website, and uploaded them to the 000webhost server they're located on. It's just some basic HTML but is heavily reliant on the CSS to make it look good. So when I checked it out to see that it didn't work, I realized not only did the javascript not work but the CSS too. I think it might be an error in my code, seeing as all the other files work fine. Any help would be appreciated.
I've tried redirecting the file paths, adding the head tags, deleting and re-adding the file to the server, and waiting to see if it was a server issue.
Here is the first couple of lines to my index HTML file:
<html>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="images/amistufffavicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
I really just want to make the HTML pages look good, and an explanation in case it ever happens again I know what to do.
first, use the {} logo on the top of the text editor to make your code show up. all you have to do is highlight your code, then click the {} button and it will format it for you.
your CSS and JS code actually looks like the HTML tags for these imports.
One bit of advice, if you have issues making several files work, just write everything in your HTML file
instead of
<link rel="stylesheet" type="text/css" href="style.css">
<script src="functions.js"></script>
just do this:
<html>
<style>
/*write style here*/
</style>
<script>
//write script here
</script>
</html>

Referencing a CSS file from another local directory in a link tag HTML

I have a HTML file and a CSS file located in different directories in my PC.
in the head tag I use a link tag to reference my css file
<link href="C:\Users\UserName\Desktop\Web_testing\BGsample SS.css"
type="text/css" rel="stylesheet" />
this doesn't work
try using the file:/// protocol.
href='file:///C:\Users\UserName\Desktop\Web_testing\BGsample SS.css'
If that doesn't work (and you say it doesnt), then my guess is that it won't work at all due to it being prevented by security features in the browser.
It depends on where you are loading the main HTML content from, but if the main HTML is loaded from the internet then I can understand why the browser might object to loading the CSS from the client machine's local file system.
One final thing to try: You might try setting up a web server on your machine, putting the mystyles.css file into the web folder, and loading it into the page using:
href='http://localhost/mystyles.css'
I can't really suggest much else, I don't think.
Check your paths, Best practices is to always use a relative paths. Ex
If your stylesheet is called style.css the link should be:
<link rel="stylesheet" type="text/css" href="style.css" />
If you have the css file in a subdirectoy (and the subdirectory is called styledirectory) the link becomes:
<link rel="stylesheet" type="text/css" href="styledirectory/style.css" />
If the css file is in the parent directory of the html file the links becomes:
<link rel="stylesheet" type="text/css" href="../style.css" />
.. goes up 1 directory, if you need two you could do: ../../
Sample Folder structure
Assuming structure is like that then,
<link rel="stylesheet" type="text/css" href="styles/BGsampleSS.css" />
Name files without spaces too.
You should be using '../' to move back in your path, and then into the directory with the CSS file.
Please always follow the CSS External Style Sheet way. In your case the CSS file cannot be located. Try adding \ before SS.css
<link rel="stylesheet" type="text/css" href="C:\Users\UserName\Desktop\Web_testing\BGsample\SS.css">

Adding a favicon to website through HTML code

I'm just transferring all my files over from xampp's htdocs to my server and now I just need to add a favicon.
I have the icon saved as 'favicon1.ico' and it is a proper icon size 16x16, but I cant get it to work.
This is the code I have for it:
<html>
<title>Server Test</title>
<head>
<h1> Hello World </h1>
<link rel="shortcut icon" href="O:\Intranet\favicon1.ico"/>
</head>
<body>
</body>
</html>
That is the correct location of the icon in the href so I dont see why this shouldn't work.
I've never added a favicon to a site before so that is where my main problem of not knowing exactly what it should look like lies.
Your Favicon path uses a windows style File path as pointed out in the comments.
Ensure the following
favicon1.ico file is present in the package that you are transferring onto the server.
Ensure that the file is accessible over http (try using a browser to navigate to it). The path should be something like http://server:port/app-uri/favicon1.ico
After that as suggested in one of the comments use a relative path such as ./favicon1.ico in the HTML source.
Also I suggest reading up on the concept of favicon http://www.w3.org/2005/10/howto-favicon
Code below should work. Try this.
<link rel="icon" type="image/png" href="http://yoursite.com/favicon1.ico">
Notice that href points to the address of your icon depending where you put the icon.

Bootstrap CSS not loading

I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/ ) and I can open the file, but it is not loading the CSS.
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
index.html is located in the same folder as the CSS folder.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Please for the love of God help me before I destroy my Macbook.
Try using bootstrap.css instead of bootstrap.min.css. Also, make sure that it's in the correct path.
Another thing you can try as well is using media="all" instead of media="screen" in your link specifications.
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue.
Thanks a ton for the correct syntax.
I followed below steps to load or apply Boostrap css.
first check bootstrap available in node_modules?
If you don't see, Install bootstrap with below command
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules.
enter image description here
next open your project styles.css file and import below line.
#import '~bootstrap/dist/css/bootstrap.css';
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
I had the same problem and I solved it.
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
my file was saved in Unicode Encoding.
I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
you may also use notepad++ to change the encoding of a file.
good luck
I found this answer because it was the top google search yet I had this problem for a completely different reason.
For those who might have made the same mistake I have, remember to add
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
Sounds like this is just a simple directory issue.
You are saying you have the HTML file and the CSS file in the same folder right?
Then to load the file link it like this:
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else
If your css file is in a "css" folder then change the directory to:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

404 error handling with htaccess and css

hello i have a problem with my 404 error handling.
i added to htaccess:
ErrorDocument 404 /404.php
so in case of typing something like:
www.domain.com/abc
everything works fine with my php page. the problem will be when typing something like:
www.domain.com/abc/
means adding a slash to the url the 404 error page appears but doesn*t load the css file?
if there is someone who could tell me whats going wrong over here, i really would appreciate.
thanks alot.
Since the 404 page will be displayed from any URL, you will need to use absolute paths for any external page assets like CSS files, images, JavaScript files, etc.
So any relative paths...
<link type="text/css" rel="stylesheet" media="screen" href="site.css" />
will need to be changed to absolute paths...
<link type="text/css" rel="stylesheet" media="screen" href="/site.css" />