I am building my first website and I'm trying to attach an external css file...
Both my index.html and test.css are in the exact same folder/directory, but for some reason my test.css file isn't being linked...
Question: Does anyone know why my test.css isn't being linked?
//HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<title>Page Title</title>
</head>
<body>
<h1>header of type 1</h1>
<p>standard paragraph</p>
<hr>
<p>HTML stands for Hyper Text Markup Language</p>
</body>
</html>
No need to worry, there's nothing wrong with your css code.
You just have to make sure that the 'href' part of your stylesheet link contains the name of the file your want to include, which in your case would be:
href="CSS Test.css"
Windows will hide the file extensions by default though, so make sure your file isn't actually called "CSS Test.css.css" after you added the extension a second time. To show all file extensions, do the following:
Open Folder Options by clicking the Start button Picture of the Start button, clicking Control Panel, clicking Appearance and Personalization, and then clicking Folder Options.
Click the View tab, and then, under Advanced settings, clear the Hide extensions for known file types check box, and then click OK.
Ok, thank you for all the quick responses, I have cleaned up my style thanks to both replies and I have kind of found the solution. I think "user5375312" was on the right track with the .css.css idea, that by adding .css I was somehow adding it twice. I don't think that's "exactly" what happened, but by creating a new css file, when I made it .css I also unchecked the "hide extension" box, which revealed a .txt, making my final file "Test.css.txt"
I removed the .txt keeping only the .css, saved the file to the same location, updated my page and the css file loaded in fine.
I'm still not sure what exactly went wrong or where, but I know it was either when I created the file the .txt was somehow still present when with previous files it was overridden or removed (something unique to creating css files maybe) or it was after I made the file, that some other setting caused it, but unchecking the hide extension box and making sure it saved correctly solved the problem, and I hope if anyone else encounters the issue that this helps.
Thanks again for the responses, it probably would have been days before I thought figured this out on my own, it was the mention of the .css.css possibility that drew that checkbox to my attention on my4th attempt at making a css file :D
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
What is the quickest/smartest way to include a JS file into code ?
I tried to drag and drop a JS file to source code, but it opens a new tab with the JS file.
(Same question for CSS link including)
This functionality is available since version 2016.2, it's just not working in your case as you work in a PHP file.
Open a HTML file and drag'n'drop a JS or CSS file to see it working.
PhpStorm will add in case of a JS file automatically:
<script src="main.js"></script>
In case of a CSS file:
<link rel="stylesheet" href="main.css">
For the case of an empty document it will just be inserted in the current line.
If you have an <html> tag it will be included within and before a <body> tag and if available even directly in the <head> tag - no matter where you leave your mouse button.
To your actual case: In order to make it work you could theoretically handle *.php files like *.html files. You can do that in Settings -> Editor -> File Types. But of course that's not useful as you will loose all the PHP features like auto-completion for the language etc. I guess you would need to write a feature request so that they maybe implement this for PHP files too.
BTW: drag'n'drop of images to a wished position in a <body> tag of a html document does also work.
EDIT: Here the link to the JetBrains blog where they explain this feature:
https://blog.jetbrains.com/webstorm/2016/07/webstorm-2016-2-drag-files-into-html-and-quotes-style/
Thanks to LazyOne for sharing!
I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
So I have been following the courses on CodeAcademy (lame I know but it's a step) and now feel comfortable writing my own HTML/CSS. However, I found when I started doing so (I have been using sublimetext 3) and I open my html file, the css is not applied. I tried again using some code from codeacademy that worked and again Chrome just displayed the plain html. Here is my code from files
template.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Strut Your Stuff!</title>
</head>
<body>
<p>I'm about to become a lovely shade of teal.</p>
<p>Me, too!</p>
<p>I think I'll do the same.</p>
<div>
<p>We're going to become a truly striking scarlet!</p>
<p>I was thinking more vermillion.</p>
<p>No, crimson!</p>
</div>
</body>
</html>
and stylesheet.css
p{
color:#00E5EE;
}
div p{
color:#CC0000;
}
*{
border:1px dashed #3A5FCD;
}
Both files are located in the same directory. If you guys could share any insight as to what is happening it would help me out a lot. Thanks in advance.
Update: I discovered that simply reloading a page would not work. I needed to open a new tab and type the directory back in.
The issue was reloading the page simply wouldn't work. I would create the stylesheet, then hit the reload button. What I needed to do was open a new tab and paste the directory of the html file again. Thank you for all insights
As a beginner, you need to learn that the "developer tools" are your best friend when debugging issues like this.
If you press the F12 key in Chrome, this will open the Developer Tools, which are useful in so many ways for debugging web issues.
If you click the "Network" tab of the developer tools, and refresh your screen, you can see all the requests your page is making, and what is returned. From the description of your problem - it is very likely that you will see "404" under the status for the .css file - meaning that it couldn't be found, most likely because you have the filename wrong, or the wrong path.
If you click on the elements tab, you can see a hierarchical view of the elements on the page. You can select one of them, and see the styles applied to it on the right. This will let you see which (if any) css rules are applied to a given element.
Try embedding your stylesheet into your html file on the head section
<style TYPE="text/css">
<!--
p{
color:#00E5EE;
}
div p{
color:#CC0000;
}
*{
border:1px dashed #3A5FCD;
}
-->
</style>
If this works (which will work... ) then you will need to check the path of both your html and css files.
Run your html on a browser and check the url. Then replace the template.html with stylesheet.css and see if your stylesheet shows up. If it doesn't that would be a filepath problem.
Let us know how this went