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
Related
Is it possible to somehow automatically download all CSS files under a directory and its subdirectory without providing actual css file names
I have many css files, more specifically 12.
All are under a directory styles and its subdirectories (only 1 level of subdirectories).
Following syntax doesn’t work to load all css
<link href='https://xxx/styles/*/*.css' rel='stylesheet' type='text/css’/>
Is there a workaround to load all css or I’ve to add 12 lines in HTML to download these.
NOTE:
I’m ok to tradeoff performance for maintenance, and to have 12 different request instead of one. Its my personal webite and files are hosted from ny GitHub Pages.So I can not do any post processing to convert all file into one.
If you do not mind having multiple requests to the server, you can create a main CSS file and inside it add #import to the other files.
main.css
#import url('/css/file_one.css');
#import url('/css/file_two.css');
#import url('/css/dir/file_one.css');
And in your HTML file
<link rel="stylesheet" href="/css/main.css" />
Just do not remember if in import need to add the complete URL.
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 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.
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.