I'm just starting out with HTML and CSS and I can't figure out why my CSS won't link to my HTML template.
Index.html and style.css are in the same folder currently, and the css works fine when it's internal. Am I missing something obvious?
<!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" type="text/css" href="style.css">
</head>
<body>
<div class="header">
header
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
test
</div>
</div>
{% block content %}{% endblock %}
<h5>footer</h5>
</body>
</html>
Edit: the problem seems to be some sort of compatibility issue. In safari a selected my own style sheet in preferences and it worked properly (I couldn't figure out how to do it in chrome). This doesn't seem like a permanent solution though?
you can try with putting the path of the file by using "./path" and see if it works also check whether your webserver takes your css files as text as you have given type as text/css.
Related
lately I've been having a problem, where I try to open my html file in any browser but it doesn't display and it's stuck in a state of loading, i've tried opening another html file and putting the same code but it doesn't display. I suspect it's a problem with the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="learn.css" />
<script src="learn.js"></script>
<link rel="icon" href="data:image/png;base64,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">
<title>Jordan Jana</title>
</head>
<body id="b0dy">
<nav class="crumble">
<ol class="crumb">
<button class="butt" style="color: #64ffda;">
<a style="text-decoration: none" href="me.html">About me</a>
</button>
</ol>
</nav class="nav">
<p id="potsu">
Hi, I'm
</p>
<br>
<div id="para"><p>Jordan</p>
</div>
<div id="surname"><p>Jana</p></div>
<div id="me"><p>I love making stuff(online not in real life)<br>
I'm currently learning Web Development and a bit of bash on the side.<br>
I also have a Github,Twitter,
and discord(senpai-kun#3773) where I'm most active and you're more likely to reach me</p></div>
<div id="and"><p>And</p></div>
</body>
</html>
I've tried changing browsers and changing some of the code but the problem persists
I Checked your code in multiple browsers it is working fine, Try to refresh the webpage by CTRL+F5. if issue still persists then there is an issue with your javascript.
and also don't use classes on endings of tags like you did with
</nav class="nav">
I'm currently having problems with linking things on VS Code. I created a folder for a project and put all files really organized inside, linked everything right and still get nothing.
Folder with all the files
The code is this one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
<script src="/assets/scripts/card-hover-animation.js"></script>
<title>Spider-Man | Multiverse</title>
</head>
<body>
<nav class="s-menu">
<ul>
<li class="s-menu__item">
Homepage
</li>
<li class="s-menu__item">
Tobey Maguire
</li>
<li class="s-menu__item s-menu__icon">
<img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
<li class="s-menu__item">
Tom Holland
</li>
<li class="s-menu__item">
Andrew Garfield
</li>
</ul>
</nav>
And the CSS is huge but a preview is This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this..
I've also tried extremely simple codes like this HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/test/style.css">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
with this CSS:
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
And if I link it as a style.css file, I get no stylization. And the problem is not with CSS because if I put like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
</style>
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
It works perfectly. AND if I link an external link like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
<img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>
It also works. (the external link, the internal still nothing).
I've looked for this problem everywhere but didn't find a solution and tried some answers like this one, this one and adding the dot before the direction (like ./folder/file.css instead of /folder/file.css) and I even reinstalled VS Code but it didn't work :(
Please help!
Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./, like this:
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../ as many times as needed depending on how deep the folder goes like this:
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
But the first approach is the more understandable one.
In the same manner, the link and script files should be referenced this way:
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>
As this answer states you must use ../ before picking any images and on vs code you don't need to write the whole file name just use ../ and it will show you all folder and file in that particular folder. you just need to pick it.
or the simple solution to this problem is that just copy the image in the same folder as the main html file is and just write the image name vs code will identify it, just pick it from there.
<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
According to your shared screenshot i assume your index.html is in the same directory like your images folder. Then this will work localy.
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">
In this tutorial:
https://www.youtube.com/watch?v=Zz6eOVaaelI
They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.
Which, it does not seem to be doing; here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.scss"/>
<title>Sassy</title>
</head>
<body>
<header>
<h1>Hello!</h1>
<button>Hello--again!</button>
</header>
<div class="contact">
<button>Submit</button>
<div class="info">
<h1>Our contact info</h1>
<p>This is our info</p>
</div>
</div>
</body>
</html>
Here is the SASS:
header {
background: lightblue;
};
However, when I open a live server, the background does not appear light blue; just basic white.
Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.
<link rel="stylesheet" href="style.scss"/>
You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.
<link rel="stylesheet" href="style.css"/>
Very simple task that doesn't seem to be working for some reason. I am getting no results when I view in the browser, my styles are not being applied to my HTML. My style sheet is in the same folder as main document with the html. I am previewing the code in chrome on a localhost. Not sure what is going wrong here, any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyles.css">
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
My styles are placed in a separate document called mystyles.css
<style>
.main {
color: blue;
}
</style>
Test in one file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="meta description placeholder example.">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
.main {
color: blue;
}
</style>
<title>Web Start</title>
</head>
<body>
<h1 class="main">test</h1>
<header>
<nav>
<ul>
<li>Home</li>
<li>Home1</li>
<li>Home2</li>
<li>Home3</li>
</ul>
</nav>
</header>
</body>
</html>
Or as Tushar said: remove <style> and </style> from your css file
Where is the location of your CSS file?
For your code to be correct, they need to be in the same folder, otherwise you will need to tell the computer which directory to look in by using ../ for each directory back, and then you need to tell it where to look after, ie.
../STYLES/main.css
u just need to remove the opening and closing style tag as it predefined with the link tag.
update your mystyles.css
Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file.
.main-content {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">Hello
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div> <!-- .site -->
</body>
</html>
I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.
Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.
As you don't have content inside your main tag, the styling is not visible. Add some content to it and you will see the styles which you have applied.
And also you mentioned that you want to style your div and I see only one. You can style it as follows using its class name.
.site {
background-color: red;
}