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 .
Related
i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">
I have separated some HTML files other than index.html and CSS too. It is working well in VS code but on creating Git Hub pages only index.html file is running.
Here is my repository:- https://github.com/shashi-singh18/BlogWritingSite
please help!
Change you links to the following structure
src='./css/utils.css'
Your current paths force your index.html to search for a sub-directory "BlogWritingSite" which does not exist at that reference level.
I saw your repository and noticed some errors when linking your css file in index.html
<link rel="stylesheet" href="/BlogWritingSite/css/utils.css">
<link rel="stylesheet" href="/BlogWritingSite/css/style.css">
<link rel="stylesheet" href="/BlogWritingSite/css/mobile.css">
change for
<link rel="stylesheet" href="./css/utils.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/mobile.css">
and
change the name of your css folder to lowercase letters
after
CSS
fixer
css
I think the error is in the address of the CSS files
Here, you should have given the address of each CSS file, relative to the index.html file and not the project directory as a whole
Try changing these link tags to this and tell me if it works.
<link rel="stylesheet" href="./CSS/utils.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/mobile.css">
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.
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>
Im just learning how to do this and im struggling with something that is very simple. I started building a website and I want to sync my CSS with my HTML. On my computer I started a file in my documents called 'development' and inside that folder another folder called 'practise' and inside that folder is my index.html, css folder (with my main.css file) and then my img folder. Here is my HTML code so far. Can anyone out there let me know why the css and html aren't reading one another?
p.s.- Ive tried
and
HTML :
<!DOC TYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Boast | Blah Blah </title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<header>
<h1> Ashcroft & Rowe </h1>
<h5> Blah Blah </h5>
<nav>
<h3>Ad<h3>
<h3Br<h3>
<h5>St<h5>
<h5>De<h5>
<h5>Com<h5>
</nav>
</header>
<body>
<section>
</body>
</html>
Thanks :)
Your CSS link is pointing at "theme.css". If your css file is called main.css and is in a folder try changing it to href="foldername/main.css"
You need to reference the full path from where your html file is.
If your html file is practice folder and the css file is in the css folder within the practice folder your link tag should look like this:
<link rel="stylesheet" type="text/css" href="css/theme.css">
Sounds like your folder structure looks like this:
development/
practise/
index.html
css/
main.css
so, two problems:
Your HTML refers to theme.css, not main.css
the theme.css is in a subfolder, but you refer to it without a folder prefix, so the HTML thinks it's next to the HTML.
Change
<link rel="stylesheet" type="text/css" href="theme.css">
to
<link rel="stylesheet" type="text/css" href="css/main.css">
And, while you're at it, put the <header> element inside the body element as #Serlite noted.