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.
Related
I have a project that contains multiple pages of HTML, which all have different CSS files to style them. I don't want to have all of the files under one project folder, completely unorganised and just a big mess of randomly ordered files. I have tried putting different folders for different pages, but when I try and use links to travel across pages, an error appears, saying that the file has been moved, edited or deleted. I have tried searching for ways to organise my files, but have found nothing useful. How can I organise my files and pages, while still being able to travel across them with links?
I believe you're trying to organize your files according to their type. As in, let's say you have a lot of CSS files. I'd suggest you bunch all of them under a folder called CSS. Now, go to your HTML files and change the CSS style, link ref, as you changed the destination. Use the following code to change the file destination.
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href"css/second.css">
I'm assuming your previous link href was "styles.css". When you changed the destination of those files, you got that error. You can even bunch HTML files. However, only shift the files except index.html.
Make a folder called 'pages'. Add all your HTML pages to go there except index.html and you're good to go. In all HTML pages, you need to use the following code to link the stylesheets -
<link rel="stylesheet" href="css/styles.css">
If you want to link another HTML file in some HTML file, then use the following code -
href="pages/second.html"
Till now, you were directly entering file names. Now, you will follow the procedure mentioned below -
"foldername/filename.html"
"foldername/filename.css"
"foldername/filename.js"
Let me know if you face any issues. I'll help you!
Web developers have to use <link> tag in embedding a CSS style sheet into a web page. Sometimes when managing styles, developers break down their style code into several style sheets to gain maximum code re-usability and efficiency.
However a html file or even a css file should reduce its size as possible as smaller files load quickly into user devices. When linking several style sheets, many tutorials show this way.
<link rel="stylesheet" href="stylesheet1.css">
<link rel="stylesheet" href="stylesheet2.css">
<link rel="stylesheet" href="stylesheet3.css">
But the size of the html file can be reduced if all 3 style sheets can be embed using one link tag like this.
<link rel="stylesheet" href="stylesheet1.css stylesheet2.css stylesheet3.css">
Is this possible? Does browsers support embedding several style sheets in one link tag?
No it's not possible to include multiple files in one <link> tag.
In your CSS-file, you can daisy-chain them into another file however using #import.
Lets say you have these files:
style.css
table.css
button.css
You can then in style.css do:
<!-- Including one css file into other -->
#import "table.css";
#import "button.css";
And in HTML import them all like this:
<link rel="stylesheet" href="style.css" />
However you can use popular and powerful bundling tools such as Webpack that will bundle both your Javascript and CSS files.
The short answer is: No. because href attribute of link tag must be a URL string so you can't reference multiple URL.
But this kind of optimization can take place into your build system. In these build pipelines you can have multiple css or js file in your development environment but in production you may have only one optimized (chunked or minified) file for each.
Check out Parcel as a beginner-friendly web application bundler
Also for more advance options you can use
https://gulpjs.com
or
https://webpack.js.org
I think it is not possible to define more than one file in a single "href" attribute.
Also for each "href" there is its own relation define in the "rel" attribute.
you can read more about the link attributes on the following link:
https://www.w3schools.com/jsref/dom_obj_link.asp
No, it is not possible to add two or more stylesheets with one link tag.
no it's not possible,
If you do, you will receive a link error you can see it in network tab in chrome
chrome screenshot
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
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'm developing a website and I need to use external CSS stylesheets.
The only drawback is I'm using a new Chromebook after migrating from Windows.
I'm using CDE, so how should I link an external stylesheet to an HTML file?
To be more specific, how do I find the full file path of a CSS file on a Chromebook?
For all of the noobs out there, I figured it out.
You have to link an external stylesheet (if on a Chromebook) using relative linking, so what you will want to do is this:
<link rel="stylesheet" type="text/css" href="name_of_stylesheet_in_same_folder_as_html.css">
Basically, keep your CSS file in the same folder as your HTML or Javascript file and it will most likely work when there is no standard full file path.
Can you view the css directly in the browser? If so, whatever url you're using should work. If not, perhaps something else is going on. Chromebook should be no different from any other browser.