Here's my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="nav-container">
Hi
</div>
</body>
</html>
Here's my css code:
.nav-container {
height: 197px;
background: #24292d;
}
I've got a folder called 'main.css' which holds the 'style.css' file. The 'main.css folder is in the same directory as the html file but for some reason the css wont load onto the web page.
just make things simple.
have your folder set up like this
home/index.html
home/css/styles.css
then :
<link href="css/styles.css" rel="stylesheet" type="text/css" />
You wrote: "The 'main.css' folder is in the same directory as the html file". So the code to reference the CSS file from the html file should be:
<link rel="stylesheet" href="main.css/style.css">
But I wouldn't name a folder 'main.css' - this would typically be a name for a CSS file (including it's file extension .css), not a folder
If your HTML file is in the same directory as your /main.css/ folder, then change your file path to:
<link rel="stylesheet" href="./main.css/style.css" />
Related
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:
Instead of having to copy the css file over and over again when making a new subdirectory with a html file in it, I would like to have one css file that applies to all html files. How would I do this? I am managing my files through StackCP. My css file is in my public_html folder.
You can use a relative file path to link to your CSS file from other directories. Check out relative path to CSS file for more details on how to accomplish this.
Place
<link rel="stylesheet" type="text/css" href="https://example.com/stylesheet.css">
in your header.
Well, the way you do this is:
Step 1: Create your main.css (It shouldn't necessarily be main.css any name would work like style.css) file anywhere you want but it should be inside the public_html folder.
Step 2: Create your HTML files and include the link/path/URL of the CSS file in your head section of each HTML file. To do this you use the link tag
<link rel="stylesheet" href="main.css" />
The rel attribute in the link tag defines what type of file it is in your case you can put stylesheet and the href attribute defines the link/path/URL to your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- Content of the page -->
</body>
</html>
In the end, your HTML file should something like this.
I hope It helps.
Good morning guys,
I am playing around building a small website. In the html I have my link to my CSS file but for some reason the CSS is not being shown on the page.
The link tag looks as follows:
<link rel="stylesheet" href="./styles/style.css" type="text/css">
The site does not contain any styles that I have built. Am I doing something wrong here?
Folder Structure 1
index.html
styles (folder)
style.css
If this the folder structure then your link tag should be
<link rel="stylesheet" href="styles/style.css" type="text/css" />
Folder Structure 2
index.html
style.css
If your folder structure is like the above then the link tag should be
<link rel="stylesheet" href="style.css" type="text/css" />
Folder Structure 3
HTML (folder)
index.html
styles (folder)
style.css
If your folder structure is like above then the link tag should be
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
This might help you. For any error check the browser console.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try to include the code to head as I show above for mystyle.css rewrite your own css file make sure to have the same name as your css file is check if a letter is capital .
I saw also you write text/css instead of test.css which is correct .
I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
My Sinatra app has typical file hierarchy:
root contains:
file "hc.rb"
file "endpoints.yml"
dir "views"
dir "public"
"view" contains .erb files
public dir contains:
file "style.css"
dir "images"
in dir images I have favicon and 404 pictures.
here is part of the code:
not_found.erb
<center><img src="images/404.png" alt="404 Not Found"></center>
hc.rb
not_found do
erb :not_found
end
layout.erb
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="icon" href="images/favicon.ico"/>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<section>
<%= yield %>
</section>
</body>
</html>
When I type localhost:[port]/smthnonexisting
I get 404 image on the screen
But when I type additional level
localhost:[port]/smthnonexisting/andsmthmore
I do not see the image and I see only 404 Not Found and broken image ico.
What can be the reason?
Thanks
The reason for this is that you're using a path relative to the current folder. When you visit http://localhost/smthnonexisting your browser is looking for the styles.css file at /styles.css. When you visit http://localhost/smthnonexisting/andsmthmore, your browser is looking for the styles.css file at /smthnonexisting/styles.css.
This is solved by keeping your references relative to the 'root' folder, by a / before styles.css, like so:
<link rel="stylesheet" href="/styles.css">
You should also do the same with the favicon, and any other included files:
<link rel="icon" href="/images/favicon.ico" />