How to Include All CSS Kept in a Directory

How to include all css kept in a directory?

You could create a master stylesheet that you include in every page, and within that css file you can use @import to include the others.

This doesn't solve the problem of having to manually include each individual css file, but at least it encapsulates it within the master stylesheet so you don't have to repeat all of the references in every html file. If you add additional css files you will only need to add a reference in the master css and all pages will get access to it.

Example HTML CSS Reference:

<link href="master.css" type="text/css" />

Example Master CSS (master.css):

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

Read more about when to use @import and its compatibility with older browsers.

PHP function that auto imports all CSS files from a certain directory

Use absolute URL instead of relative URL.

Replace

$css_out .= '<link rel="stylesheet" href="'.$css_path.'">';

with

//$assets_url = "http://example.com/assets/css/";
$css_out .= '<link rel="stylesheet" href="'.$assets_url.'.'.$css_path.'">';

Link CSS from another folder?

If your current folder is /current/folder/location/index.html, and your .css file is in /current/second/folder/style.css, then use this as an example:

<link rel="stylesheet" type="text/css" href="../../second/folder/style.css">

or alternatively:

<link rel="stylesheet" type="text/css" href="/current/second/folder/style.css">

However, if the second file is in `/current/folder/second/style.css, then use:

<link rel="stylesheet" type="text/css" href="../second/style.css">

Link a .css file in another folder

I dont get it clearly, do you want to link an external css as the structure of files you defined above? If yes then just use the link tag :

    <link rel="stylesheet" type="text/css" href="file.css">

so basically for files that are under your website folder (folder containing your index) you directly call it. For each successive folder use the "/" for example in your case :

    <link rel="stylesheet" type="text/css" href="Fonts/Font1/file name">
    <link rel="stylesheet" type="text/css" href="Fonts/Font2/file name">

Why have all CSS files in one folder?

two reasons come in mind right now (to do with keeping both html, js and css seperate):

• both css and js can be reused in multiple html files if are in external file but you need to copy same code in each page if is a single html+css+js page.
• If you want you can develop a new version of the code, css or js, for a online page and when you finish the only thing you need to do is to change the filename in the link or script element in html. This means you're not being repetitive

Placing them into a single css also means that it's easier to find the styling and bulk edit a lot of the html styling in a single place.

I also found:

• Easier editing: Suppose you find that distances are calculated wrong (or whatever you are currently working on), then it's definitely easier to just open the file that contains the object responsible for distance calculation than scrolling through your huge HTML file looking for the culprit.

• Syntax highlighting / Code completion / other features of you IDE (like refactoring): This might work partially with code inside of HTML files, but not all that well. So, you could work faster and actually see errors before they become bugs.

• Cachability: While your HTML code will be different for all the pages of your site, your CSS and JS won't, and it would be silly to reload them for every page (which happens when they are put directly into the HTML).

• Page load time: With CSS and JS in the HTML file, they have to be loaded before the browser will see any actual HTML, so the page will show slower. Also, search engines that don't really care about your scripts will have to load them, and there are penalties based on page load time.

• Minification: In production, you use a minified (and concatenated) version of your CSS and JS, and of course you don't want to manually create that every time you make a change, so you do it programatically. Trying to do that without separate files would become very ugly, and you wouldn't be able to cache that minified version, which would be quite the performance hit.

• CSS generators: When you start to care about keeping code duplication to a minimum, you will quickly tire of writing CSS, which is full of duplications, and switch, for example, to SASS (like I did quite some time ago). You will definitely need separate files to make that work.

---

So, in answer to your question,

Yes, for the majority of websites, separating them (like mvc does by default) will likely quicken your load time. (very few exceptions appear in this rule, however a site with 1 or 2 style declarations may be slightly faster when placed within the html, but if you ever use MVC you won't look back at not separating them!)

Import css file from same non-root directory

As it is an @import, make sure it is placed at the very top of your main CSS document.

@import url("./nav.css");

@import url("./width.css");

Although you can do it, I would personally advise against it. Although it might seem to be more "sorted" it creates extra HTTP requests, which depending on the size of the project, may hurt your performance.

---

Related Topics