LESS CSS CDN: ERR_INVALID_URL - html

I'm new to Less, so I'm assuming that this is my fault and not the CDN.
I've got a pretty straight forward html document (less.html)
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" >.
</script>
</head>
<body>
<h1>This is a test</h1>
</body>
</html>
I also created a basic Less file (styles.less)
#color: red;
.header {
color: #color;
}
h1 {
color: #color;
}
The HTML renders with no issue, however I'm receiving an error in the console: ERR_INVALID_URL. Thus the CSS isn't working.
I copy and pasted the link to the CDN directly from Lesscss.org, so I'm assuming it's correct. Any idea why I'm getting that error code in the console?

In your screenshot you can see that the file is being called as a local file which obviously doesn't exist in your computer. Change your file url to "https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" while you are working locally.

Related

HTML not connecting with CSS correctly

In my Django project, I attempt connect HTMl to CSS. I have looked online and at other related problems on stack overflow, and still cannot get html and css to link together. I am also a complete newbie to frontend development.
Here's my code (The css file is in the same directory as this file):
<head>
<link rel="stylesheet" href="signup.css" type="text/css">
</head>
<div id="signuptext" class="pb-0"><span>Sign Up</span></div>
CSS:
#signuptext {
font-size: 30px;
}
Error received:
Not Found: /accounts/signup/signup.css
UPDATE: CHANGE PATH(href):
/accounts/templates/users/signup.css
UPDATED CODE:
<link rel="stylesheet" href="{% static 'signup.css' %}" type="text/css">
UPDATED CSS(in main static folder):
#signuptext {
font-size: 30px;
}
I don't understand this error as my css file is in the same folder as the HTML file.
Does anybody know whats wrong? Thank you.
<link rel="stylesheet" href="/accounts/signup/signup.css" type="text/css">
Also, use classes, it is better because you can reuse them. Only use id when you need to use js.
<div class="signuptext" class="pb-0"><span>Sign Up</span></div>
css:
.signuptext {
font-size: 30px;
}

Downloading Google fonts to run it locally

I am currently creating a HTML document from scratch. I am using MAMP to host the site however when I link to a google font it doesn't work.
When I download it do I link it to my css file? and if so how do I call it?
Thanks
Its better to customize the font in your site, and for customization you need to download fonts in four formats (webfont.eot, webfonts.svg, webfonts.woff, webfonts.ttf) and then use them from CSS. Follow this url:
https://css-tricks.com/snippets/css/using-font-face/
Check this example for how to use online fonts.
<html>
<head>
<style>
#font-face{
font-family:fontName;
src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
}
body{
font-family:fontName;
font-size:2em;
text-align:center;
}
</style>
</head>
<body>
<h1>Title</h1>
</body>
</html>
Rather than downloading them and serving them 'locally' I'd suggest to check what the error might be and use the fonts delivered via Google API. They provide a getting started guide, so you can start with a basic example like the following and work your way up to what you need:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.fancy {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
Example for using
<span class="fancy">Tangerine</span>
</body>
</html>
You can also browse all available fonts here and let google generate a custom <link rel="stylesheet" ...> tag for you which serves only what you explicitly specified.

Can't load external css when in localhost

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.

HTML page will not respond to ID's in CSS

HTML and CSS noob running into my first problem.
I am using Notepad++ and I have my css and HTML files both saved in the same folder. But whenever I launch the HTML file in a browser the css ID that I am using is not doing anything specifically centering and changing color.
This seems like one of those easy fix kind of things.
Main.css
<style>
#change{color:red; text-align:center }
</style>
example.html
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p> //HERE IS WHERE THE ID IS
</body>
</html>
anyone have an idea what im doing wrong
To combine the two current answers:
If the directory structure of your website is simply the index.html and main.css in the same folder, than the path to link the two is:
<link rel="stylesheet" type="text/css" href"main.css"/>
The Style tags in your current css page are redundant and unnecessary. Style tags could be used in the html, though are rarely used.
Finally, not sure if this is just the code you have posted, but the html here is acting as if it is all a comment,and make sure to delete that if that is in your current code (/*).
Remove the <style> and </style> tags. Your main.css file should only contain CSS:
#change{ color:red; text-align:center }
check css path.
Are paths like below?
- example.html
- folder/
|- main.css
remove tag in main.css
In css files, any html tag MUST NOT be existed.
and welcome to the world of web designing! Things can get quite frustrating, but as long as you show your will to solve a problem, everything will go smoothly. I love the fact that you tried to solve the problem prior to posting. Even though it is a basic thing, let's go step by step:
main.css does NOT need <style> tags. Those are only required when editing CSS internally, inside of <head> element of HTML page. In *.css files, you just start defining CSS rules.
make sure that you follow proper spacing like #change { color: red; text-align: center; } (ALWAYS FINISH A CSS RULE WITH A SEMI-COLON)
you can also break them down like this:
#change {
color: red;
text-align: center;
}
Characters /* and */ are CSS comments syntax. ANYTHING between those characters shall be ignored by the browser.
<link rel="stylesheet" href="folder/main.css" /> might potentially be the cause of the problem, since you stated that html file and css file are in the same folder. If that is the case, you don't need "folder/main.css" but only href="main.css" /> Also it wouldn't hurt to add <link rel="stylesheet" type="text/css" href="main.css" /> to let the browser know the type of the file you're linking to.
Here is a working example.
#change {
color: red;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<Title>sample</title>
<link rel="stylesheet" href="folder/main.css" />
</head>
<body>
<p id="change">Sample sample sample </p>
</body>
</html>

External Stylesheet not working

I have added
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css/" />
in the index.html above tag. But my stylesheet is not working. my style.css code is:
body
{
background-color: #23314F;
}
main
{
margin: 0 auto;
width: 880px;
background: #FAFAFA;
}
What changes should be made?
The link provided is incorrect
href="http://blogsoc.org/mail1/style.css/
must be
href="http://blogsoc.org/mail1/style.css
without last /
Not too much discriptiv question.
But try removing last slash.
<link rel="stylesheet" type="text/css" href="http://blogsoc.org/mail1/style.css" />
"Not working" is a very vague description of the problem.
The only obvious issue is that main will select <main> elements which do not exist in HTML. We can't tell you what to change it to because can't see your HTML. I recommend reading selectutorial.
Since the question has been updated:
http://blogsoc.org/mail1/style.css/ gives me a 404 error. You need to provide a working URI to your stylesheet. http://blogsoc.org/mail1/style.css appears to be what you want.
I had that problem before. And I solved it. The problem was that I originally declared my page as a <frameset> in Eclipse. Even when I changed it, the problem persisted. I copy and pasted the page and tested in different browsers.
The source page was linking to the stylesheet on the browser perfectly. It was just not showing the style on my page.
I created a new page with no declaration and it works.
The `<link>` tag was not the problem.
<html>
<head>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Test Title</h1>
this is a test page.
</body>
</html>