HTML not connecting with CSS correctly - html

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;
}

Related

I'm trying to connect CSS to HTML, but it's not working

I've looked for problems in both my folder and in my code, but I can't see the problem. I put my CSS and HTML in the same folder. index.html0 is the name of my folder.
my code is:
<link rel="stylesheet" type="text,css" href="style.css">
I've also tried:
<link rel="stylesheet" type="text,css" href="index.html/style.css">
it still doesn't work. I'm at a loss.
<link href="cssFileName.css" type="text/css" rel="stylesheet"/>
You put a "," between text and css, it is a "/".
Another form of importing css is the use of
#import "styles.css"; Using a string
or
#import url("styles.css"); /* Using a url */
For further information pls refer to w3schools documentation https://www.w3schools.com/cssref/pr_import_rule.php
But Ideally try not to use the #import method for css try
<link rel="stylesheet" href="./style.css">
If the path of the stylesheet is entered incorrectly, this problem could arise. Use the following code in the HTML file if your stylesheet and HTML files are both in the same folder:
<link rel="stylesheet" type="text/css" href="style.css">
Make sure the names of the CSS file and the HTML file exactly correspond. Additionally, make sure the file is in the same location as the HTML file and has the.css extension rather than.css0.
You must give the right path to the stylesheet if the files are in different folders. For example:
<link rel="stylesheet" type="text/css" href="folder_name/style.css">
Update
CSS file (style.css):
body {
background-color: lightgray;
}
h1 {
text-align: center;
color: darkblue;
}
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/index.html0/style.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a sample HTML and CSS code.</p>
</body>
</html>
Output:

Background Images not showing on Github Pages for Website

I've looked at some other threads on Stack Overflow regarding this problem, but for some reason they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct.
Here's a link to my repo for the website on github pages: https://github.com/lawrencecheng123/lawrencecheng123.github.io
In my repo there is a "Seattle.jpg" image that I'm trying to set as the background of the first page of my website, which is referenced by the "fstPage" class on line 81 of the "index.html" file and line 321 of the "index.css" file in the repo.
Thank you for the help!
It fails because you named your file wrong. Inside of your index.css, you wanted to use a file named Seattle.JPG.
Your file is named Seattle.jpg. Fix the ending and add https://.
Here's the right link: https://lawrencecheng123.github.io/Seattle.jpg
Complete CSS:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
Working snippet:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
<div class="fstPage"></div>
first import index.css file in your index.html file like
change (1) :
<link rel="stylesheet" href="index.css">
and then you have to update your class as mentioned below
change(2):
.fstPage {
background-image:url("Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
and I hope it will work fine for you also
I was searching for all the forums. But none of which worked for me.
Only workaround for me was to change the order of stylesheets in the head
I mean , if you are using multiple stylesheets, including those from bootstrap cdn with the locally saved one, always keep the local stylesheet on top.
Like this
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"

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>

Problems linking stylesheet to html doc

I'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />