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.
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!
I have a website with a multiple pages some of which are in a seperate directory. However, I can't seem to link pages in one directory to a css file in a separate directory.
I have tried the pasting entire directory and css/main.css.
//Here is the folder/directory structure of my project
home.html
css
--main.css
lines
--M51.html
--M50.html
--M53.html
Here is the HTML code I use to reference to the css in html file M51.html or any file in lines folder/directory:
< link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
When testing the html page in lines folder(M51 or M52 or M53), I see css is not applied and error "cannot resolve file css/main.css". How can I resolve this error?
It works fine on home.html but not on those inside the "lines" directory.
Since you have Css files stored in a different directory. Make sure you use relative file path to include css in the HTML:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
A relative file path points to a file relative to the current page.
Best Practice
It is best practice to use relative file paths (if
possible).
When using relative file paths, your web pages will not be bound to
your current base URL. All links will work on your own computer
(localhost) as well as on your current public domain and your future
public domains.
Copying an answer from the comments because it is the right answer:
Reference the file using this:
../css/main.css
for files in the "lines" directory (map). The two dots go up one level, where the "css" directory(map) is located relative to the current folder. Use the Relative Path for the external CSS file.
I am doing some HTML & CSS tutorials, and I am unable to get my CSS to appear when I load my web pages.
I linked my CSS to the HTML skeleton.
Can you help me figure out the error?
Screenshot of my HTML document:
Screenshot of my CSS:
Both of the files are stored in the same folder:
If anyone could let me know where I went wrong so I could continue my process, I would appreciate it.
The index.html and the styles.css are in the same folder, so you shouldn't point to a sub-directory for the css. Try this:
<link rel="stylesheet" href="styles.css">
as both index.html and css files are in same folder, you can use
<link rel="stylesheet" href="styles.css?v=1.1.2">
here, v is version declared, so whenever you make changes in your css file, simply change this version numbers to get refresh css and changes to take effect in browser without cleaning caches..
you can also move your css file in stylesheets folder and can keep index.html structure as it is.... basically it is good practice to keep files in subfolders so we can find them easily when searching... for e.g. all .css files in stylesheet folder, all images in images or img folder, all javascripts in js folder...
by the way, what is m.m in css file, in body styling ??
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 am attempting to use Bootstrap; I am downloading example pages to build off of from the Bootstrap website. When I launch them, however, they look quite crummy in my Chrome browser.
For example, when I load the narrow-jumbotron page, the jumbotron spans the entire screen... What am I doing wrong? I have the css, js, and font folders inside the folder that I've saved the narrow-jumbotron.html page in.
Any help would be much appreciated.
Please check the source url or path of the css and other files. Possibly this is creating problem.
Firstly ensure that you have downloaded bootstrap.min.css and jumbotron-narrow.css.
Place them in the folder you are having the html file.
After that find the following 2 statements in your html file.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
Replace them with these lines:
<link href="bootstrap.min.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet">
It looks like it's probably is a path issue. When you download the original bootstrap framework, you'll have a /css and a /js directory. How your new html files get access to those places depends on where you put those directories. I'm going to assume you have some bootstrap test area. Let's just call this your main bootstrap area or core file area, whatever.
After you set that up, you probably went back for the other download which has the /examples directory buried within it. The files in there are set up to deal with being a few directory levels down. When you went into the /examples directory folder, did you copy over the whole /examples branch? Or just one set of the example files?
Let's try this just as one example just to try to get things working. Then once you get it working if you want to mess with directory / folder organization and file paths, that's fine.
Go find the examples/theme directory, wherever you put it. In this /theme directory rename index.html to theme.html
Take the theme.html and theme.css out of your /examples/theme directory and put them in the root directory of wherever you have your bootstrap's root index.html file. Now your file paths to CSS files and such should be set to match what the index.html file is doing.
Go into the theme.html file and look for the lines with the ../../dist/css/ as suggested earlier.
But make them look like this... "css/bootstrap-theme.min.css"
This should now have these files getting called from the correct places. This alone should work for you.
There's still one issue though. You'll see in the theme.html file a link to "../../assets/js/ie-emulation-modes-warning.js"
You could just ignore this, but to really have things all in order, you need to get that path right. So, go find your original download of the examples and get the whole /assets folder and sub-folders copied into wherever you have your bootstrap root; that is /assets should be at the same level as /css and /js.
Once again then, fix the link to look like this "assets/js/ie-emulation-modes-warning.js"
This will hopefully get you going and give you a clear and obvious sense of how the file paths work. If you like going forward, put things into better directory / folder structures and re-do the paths. Remember if you wanted to on a real web server, (local or remote), you can always use virtual paths from the root so you don't have to keep track of the levels everyplace for such files.
In any case, I did just test this and ideally it will work for you as well.
Just place bootstrap.min.css and bootstrap.min.js in the same folder as carousel folder for example.
Then fix the path of the js file to this:
<script src="bootstrap.min.js"></script>
And fix the path of the css file to this:
<link href="bootstrap.min.css" rel="stylesheet">
Try to delete "integrity" part
Instead of this:
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Make:
<link href="css/bootstrap.min.css" rel="stylesheet">
As integrity attribute checks whether code was changed.
That might help.
As of 2022 and the BootStrap version v5.2 the way to fix it is to copy paste the bootstrap.min.css file you get when you download the ready-to-use compiled code to the example folder you want it in and then change these lines from
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
TO
<link href="bootstrap.min.css" rel="stylesheet">
This must do the trick