This is the HTML code, i don't know if i'm making a mistake in those < link/>
<! DOCTYPE html>
<html lang="es">
<head>
<title>Appicua</title>
<link href="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebStyle.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="test"></div>
<script src="C:/Users/DAVID NEGRETE/Desktop/web/js/jquery.js" type="text/javascript"></script>
<script src="C:/Users/DAVID NEGRETE/Desktop/Portal web - Base code/portalWebExt.js" type="text/javascript" </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And now this is the CSS code:
.test{
width:50px;
height:50px;
background-color:red;
border-color:black;
border-width:5px;
border-style:solid;
margin:5%;
}
As you can see is a simple red square, the problem is that all this code works perfect on Google Chrome and Internet Explorer, but on Firefox it's not even displayed on the screen.
Why is that happening?
Restructure your files into one directory:
- appicua
index.html
- css
main.css
- js
jquery.js
main.js
Then you can get main.css with href="./css/main.css", and main.js with src="./js/main.js". Relative paths are better here, and will probably work.
You also don't need to specify type="text/css" and type="text/javascript"; they're redundant as browsers pick CSS for style tags and JavaScript for script tags anyway, and there's confusion about the proper MIME type for JavaScript.
You can also remove the closing / before the > in the link tag. (Unless you're using XHTML.)
Your directory structure looks a little wonky. If I'm getting your links correct your working in a directory tree that looks like this:
If your HTML file lives in the web directory then you could create a css directory for your css (like the js folder that you already have) and reference the files relatively as suggested in other answers. The relative links would look like this:
<script src="/js/jquery.js" type="text/javascript"></script>
and
<link href="/css/portalWebStyle.css" rel="stylesheet" type="text/css" />
The linking style is called relative because the paths to the css and js files provided are relative to the position of the HTML file in the directory structure.
I'm guessing that firefox doesnt handle client-side files the same way. Try putting the css/js files as just src="portalWebStyle.css" as long as they are in the same directory as the file you have open.
I don't know if this will solve your issue, but you have forgotten a / at the end of your second link tag, and have also forgotten to close your second script tag.
Related
I'm very beginner to HTML and CSS. I tried to add css with my external file. But It's the error as unexpected token. Please find the error in image file. My code is as like below.
<html>
<head>
<title>Test Game</title>
<script src="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css"></script>
</head>
<body>
<div class='dvborder'>dsfssd</div>
</body>
</html>
css file code :
body {
background-color: lightblue;
}
You must use <link> instead of <script>.
<link> - is for embedding external CSS file while
<script> - is for embedding external JS file
<link rel="stylesheet" type="text/css" href="C:\Users\Pspl\Desktop\Sreekanth\TestGame.css">
Use <script> for .js files and <link> for .css files.
Try link tag instead of script tag.
<link rel="stylesheet" type="text/css" href="theme.css">
That's simply not at all how you link to css. The syntax for style sheets is
<link rel="stylesheet" href="(URL of your .css)" />
The browser is expecting a javascript file, and complaining that CSS doesn't look like javascript.
<link> tag is used to relate stylesheets or linked documents.
<script> is used to embed an executable script within an HTML.
If you are having local files, try to use relative path for stylesheets and script files. This improve portability.
I have several web development projects hosted online. I decided it was important to get the projects into source control, so I created copies of the files on my local machine. The way the projects are hosted online, the css and js are inserted by the website and they don't need to be added to the html code. To develop on my machine, I require the js and css files to be added directly to the html, but I don't want to add anything unnecessary to the code that will be placed back online. My solution is an abstracted html file called main. The css and js are added to the main.html file and the original html file is linked in. Like so...
<!-- main.html-->
<head>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<link rel="stylesheet"href="bootstrap.min.css">
This works great if the head section is added to the original html file. If the head section is removed, there is unwanted css that suddenly afflicts the original html file.
<!--original.html-->
<head>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body> ... </body>
works fine, but contains the code that I want to abstract.
<!--original.html-->
<body>...</body>
has messed up margins from unwanted CSS
in the main.html file, the original html is linked from a git hub page with
<div w3-include-html="github.com/original.html"></div>
Any Ideas?
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
If I try and link my CSS to my HTML page with either cssstyle2.css ||fifastream1.0/cssstyle2.css or even %fifastream1.0%/cssstyle2.css it wont display any of the CSS on the webpage. (FF, IE, Chrome). I've uploaded my CSS page to stackoverflow before and apparently its fine.
Obviously its no good if I can only get my webpage to 'properly' work on my drive. Soo any idea's why FF, IE or Chrome cant pick up my CSS?
Been working on this for a few weeks now, as a complete beginner. Would be great help if someone could find the answer! I've searched and tried everything.
This is the link in the of the HTML (if this helps at all)
<!DOCTYPE html>
<html>
<head>
<link href="C:///*****/******/Desktop/FifaStream1.0/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
<title> Fifa Stream </title>
</head>
<body>
When everything is in the same foldre you should use the following:
<link href="cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
When you're CSS file is in a different folder use:
<link href="folder/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
If your CSS file is one directory above the html file then use:
<link href="../cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
To have relative referencing, ur CSS needs to be in at least somewhat referential place. for example, if the page is in Users/whatever/index.html, your CSS would be in Users/whatever/css/style.css. Then your reference would be to "css/style.css"
A quick reference guide:
<!--
./filename or filename = same folder as page location
../filename = folder above that of page folder location
/filename = root folder of project
-->
If your CSS file is in a completely different location than your page file, it can't possibly be found unless you provide the full path as you had to.