I am using the elm-live dev server but I do not know how to use an external CSS file. According to documentation, I can use the following code below, but where do use that snippet of code? If i use it in the index.html it still gets overwritten on when i save my *.elm files.
Thanks
elm-live states:
$ cat <<——— > index.html
<!doctype html>
<link rel="stylesheet" href="style.css" />
<body>
<div></div>
<script src="elm.js"></script>
<script>Elm.Main.embed(document.querySelector("div"));</script>
</body>
———
$ elm-live Main.elm --output=elm.js --open
Related
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
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'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!
It has been working... But I don't know why it is not working anymore. I am using Django to set up a local server (?) and I use MySQL for something else. The .css file is into a folder where the .html file is located, and like I said before it has been working.
My code inside the head:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8" />
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
</head>
<body>
<div class="header">
...
My .css is not worth mentioning, is it?
Solved
The problem was: indeed a wrong reference to my .css file. I was scrolling in my Terminal to some MySQL command from the moment there was not yet an 404 fault. It had to be:
/static/main.css
Thanks a lot
If the CSS file is in External server the code is
<html>
<head>
<style>
#import url(stile.css);
</style>
</head>
<body>[...]
</html>
Likely an error in the CSS file. Run it through a validation checker. Also ensure you are referencing the correct elements within that css file.
And as others has said, check the browser console for errors loading either resources.
This is the most silliest question but I dont know why I can't find the problem! Below is the code but css file is not loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
</head>
<body>
<section id="mainWrapper">
Hello
</section>
</body>
</html>
I checked the source in the browser, it cannot find the file specified! I tried to move file in the root and removed the folder name still the same. It is just the basic template that I was designing and I can't get CSS working!!!
Check the file name,sometimes when you rename via PC it tends to add layout.css.txt change the file name to just .css.
Move the file to the root where you have you HTML don't create any sub-folders for time being.
Please mention if your trying to upload to a server or just practicing,so we can give you precise instructions.
Try with full path
<link rel="stylesheet" type="text/css" href="http://domainname/css/layout.css" />
Also make sure file is accessible.
Another tip would be to check that the element ids that the CSS file is using are the same as those outlined in your index.html. If they are different the CSS will not be applied.
You can do it with specifying the path for it,
if you are using windows : go to your css file and click on properties where you will find the path for your css file, just copy and paste it in the below code.
Now confirm that with the path you have added the name of your file. Sometimes the relative paths are not working, you would need the full path. So, above is the procedure.
<link rel="stylesheet" type="text/css" href="add your full path here" />
Note: must see the name of file is included in the path you have copied if not do write it by your own.