I used the #import at-rule, and it's located in the <head> of my HTML:
<style>
#import url('https://googledrive.com/host/0B4nfVqlTfnTzam45bnFnTXUyOEU');
</style>
This shows up in Firefox but not the latest version of Safari. Can anyone explain why? Is it because the file is in a Google Drive?
If it's just the actual CSS that's the problem, then I don't mind because it's only a test to see if the #import works, but is this method for importing style sheets good for most browsers?
While this should be a functioning method of linking styles to your website, it's not best practice. It basically tells the browser that you are providing an internal style sheet, then tells it to import an external style sheet to nest within this element. I wouldn't be surprised if this were to yield inconsistent results across different browsers. Try skipping the tags and including this instead:
<link rel="stylesheet" href="https://googledrive.com/host/0B4nfVqlTfnTzam45bnFnTXUyOEU/yourfilename.css">
Now, you should consider implementing this method either way, but notice I also changed the file path. Replace "yourfilename.css" with your style sheet's file name. Even if the directory linked contains only one style sheet, you must explicitly define that file in order for the browser find it.
Related
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
While making a personal website I've encountered a problem with adding a CSS Style Sheet.
That Style Sheet was a local one (in the same folder has the .htm file) called "Rodrigo.css".
Here is the HTML Link tag with the CSS in the hrc:
Here is a screenshot of the CSS Style Sheet (only the beginning part):
As you can see there are not HTML Tags.
Note: The CSS that I'm using in the style sheet was previously in an internal style sheet and worked, so I don't know why it isn't working.
While making the website I used the w3schools tutorials. To do this part specifically the "CSS How to... Three ways to incert CSS".
Solved
I've found what the problem was, the HTML file was encoded in a format that wasn't supported by some browsers, and was a different format to the one of the external style sheet.
I downloaded both your HTML file and CSS file, placed them in the same folder on my desktop and the CSS file took proper effect on the HTML file. I confirmed this by removing the CSS file from the folder, observing the difference in appearance and verifying the appearance was back to normal when I copied the CSS back in.
Your code appears to be correct. Try clearing your cache, trying a different browser or open the html file in incognito mode.
Edit: Another thing you can try is replacing
<link rel="stylesheet" type="text/css" href="Rodrigo.css">
with
<link rel="stylesheet" type="text/css" href="./Rodrigo.css">
Notice the addition of ./ before your file name. This forces the browser to look in the same directory as the CSS file. I could be making this up but I think I remember having problems with either links, images or hyperlinks in older browsers when I omitted the ./
So, I've found the problem. It turned out I encoded it in UTF-8 Bom( I'm not sure that's the name of the enconding type) and that was causing problems with the browsers and the external style sheet, witch wasn't enconded in the same format. I'm going to mark this awnser had having solved my problem.
The solution is enconding the HTML source file in UTP-8, or other files that are supported and enconding the HTML and CSS source files in the same format.
Thank you for anwsering, tough.
I'm trying to get the content of css files of a website....
<link href="/files/includes/templates-css-main.css" rel="stylesheet" type="text/css" />
For example, it's the link of css ref of http://paceoil.ca/. When I tried to send a request for getting a css file to this url http://paceoil.ca/files/includes/templates-css-main.css, I got an unexpected result.
Any help? Thanks in advance.
On the particular website in question, the reason you're not seeing what you expected is because they've used an uncommon technique called #import to load several stylesheets into one. In general, your method is correct -- http://paceoil.ca/files/includes/templates-css-main.css is indeed a link to their stylesheet.
Inside that stylesheet, you'll see the following statements:
#import 'templates-css-reset.css';
#import 'templates-css-layout.css';
#import 'templates-css-type.css';
#import 'templates-css-nav.css';
#import 'modules-mod_superfishmenu-tmpl-css-superfish.css';
These lines simply load the contents of other .css files all together. The other CSS files can be found at:
http://paceoil.ca/files/includes/templates-css-reset.css
http://paceoil.ca/files/includes/templates-css-layout.css
http://paceoil.ca/files/includes/templates-css-type.css
http://paceoil.ca/files/includes/templates-css-nav.css
http://paceoil.ca/files/includes/modules-mod_superfishmenu-tmpl-css-superfish.css
It should also be noted that on some websites (most commonly on huge websites like facebook), CSS files are not necessarily statically generated. Some servers run "CSS-preprocessing" which allows them to embed code in CSS that is executed and translated before your browser ever sees it. In cases like this, it is impossible to view that code unless the owner shares it with you.
press F12, resources. then you should see the css file of a site
I've been playing with Polymer recently and finally I think I have my head around the shadow boundary, at least to the extent that I know where I need to include link tags to make my CSS work.
This is fine and dandy but I can't use Google fonts. If I use an #import inside my stylesheet, then as soon as that stylesheet is included in a Polymer custom element I get CORS issues:
XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Maven+Pro:400,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64000' is therefore not allowed access
There's an XMLHttpRequest involved here, probably because of how Polymer fetches resources and custom elements in the first place, which I suppose is axing the header mentioned in the error message.
However, if I only use the link method
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
This doesn't cross the shadow boundary, and I still don't get my fonts.
Am I missing something obvious? How do I get Google fonts inside the shadow DOM? I tried downloading the zip file from Google Fonts itself but I only got TTF files.
What we typically do with fonts on the Polymer team is to create an HTML import that loads the font(s), and include that import as a dependency in your element's import. This puts the font definitions in the main document (so they can be used by any components) but also guarantees that the fonts will be available in your element's shadow dom.
Here's a quick example: http://jsbin.com/cefawali/1/edit
We do this with the RobotoDraft font. Here's the import: https://github.com/Polymer/font-roboto/blob/master/roboto.html
The other approach is to use no-shim and use #import:
<polymer-element>
<template>
<style no-shim>
#import url('http://fonts.googleapis.com/css?family=Maven+Pro:400,700');
</style>
...
Note There's currently a bug preventing this latter approach from working.
I have been using html with internal style sheets for a while now until my friend told me about external css style sheets. How can I link an external style sheets to CSS? Also what are the benifets of external style sheeting?
To link your external style sheet put this code in the head:
<link rel="stylesheet" type="text/css" href="css/style.css">
The Benifets of using an External Style Sheets is that you can change the look/style of your website with only editing one file. With internal style sheets you need to type the code for every page.
Other's have answered the how-to part. As for benefits:
(as Jabel states) you can reuse the same CSS on every page (which you typically need to do for a web site)
(as jaydx49 states) you have one central place to edit all the CSS (much easier to update one file than 50, for example)
If all your CSS is in one file, and it's used on every page, that means the browser only has to download the CSS information once, and can then cache it for every other page. This makes your web site download faster.
It's easier to compress (minify) your CSS if it's all in separate files, again making the site download faster.
You have to add to your <head> in your HTML the following line:
<link rel="stylesheet" type="text/css" href="PATH/TO/YOUR/FILE">
The benefits are that you have more clear an clean code. And you can use it in all your HTML files that you want, and if you change your CSS code you will affect all the files that are using it.