What is the ideal location for storing my CSS files?

I have a medium-sized website that shares a common header/footer, and each page has its own specific layout file. The common header/footer is stored in a separate html file, but I am struggling with where to place the CSS file because the link element in footer.html 

<link rel="stylesheet" type="text/css" href="footer.css" />
does not link to the current directory of this html file, but to the requiring PHP file.

After looking at several websites, there doesn't seem to be a standardized solution. Some recommend placing all CSS files in root-directory/css, while others opt for hierarchical directories like '/skin', '/global', etc. Yet another approach some websites take involves using links like 

http://sstatic.net/stackoverflow/all.css?v=5fc0e3026fcc
(similar to how Stack Overflow handles it).

So my question is, which approach would be better suited for my situation?

P.S. I believe this issue could also extend to image file storage as well.

css

Answer №1

When it comes to organizing my CSS, I prefer to store it in separate directories within the root folder.

/css/frame.css
/css/menu.css
/css/form.css
/css/print.css

If needed, I further break it down for IE-specific styles like this:

/css/ie6/frame.css

This way, all IE6 overrides are contained in one place.

The same goes for my images as well:

/images/menu/......
/images/home/......

Each directory serves a specific purpose and helps keep things organized. Ultimately, it's all about personal preference - choose the style that works best for you.

Answer №2

Each webpage typically has its own designated file for layout purposes.

Consider consolidating all your CSS code into a single file and then observe its size. Once compressed, the file may end up being quite small, making it unnecessary to divide your styles into multiple files.

When it comes to storing multiple CSS files on your server, the location is not crucial. It is recommended to keep them within a dedicated directory like /css/, simplifying the organization of your assets.

Answer №3

you could set up a link to

/public/stylesheets/screen.css

this is the way Ruby on Rails handles it, as an example.

Larger corporations typically utilize a "CDN" (content delivery network) to ensure that users worldwide can access content quickly, thanks to the CDN's multiple servers located in various parts of the globe. For more information, check out the book "High Performance Web Sites"

Answer №4

When your website starts to expand, you will find yourself dealing with various types of files, including CSS files. There isn't really a strong technical reason for organizing them in a specific location. Personally, I prefer to keep things organized like so:

/root
 /pages
 /scripts
 /css
 /databases
 /images
 /documents

This structure helps keep everything neat and tidy. Hopefully, you find this organizational tip useful, though opinions on this matter can vary greatly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

javascriptcsscursor

What is the best way to level out the content in the article using CSS and HTML?

Can anyone help me with CSS and HTML? I have a travel blog and I want to include a related post section similar to Time.com in my articles, but I'm facing an issue. What do I need to achieve this? I want to create a section that looks like the relat ...

htmlcsswordpress

What is the most efficient way to load a PHP page once the webpage has completely finished loading?

I'm relatively inexperienced when it comes to PHP and JQuery, so please bear with me if my knowledge is limited. Currently, I'm facing an issue where loading a small HTML table that contains information queried from game servers (like shown in t ...

phpjqueryhtmlcssquerying

Minimizing the amount of code written

I have the following CSS code: /* unvisited link */ a.underl:link { color: #000000; text-decoration: none; } /* visited link */ a.underl:visited { color: #000000; text-decoration: none; } /* mouse over link */ a.underl:hover { color: ...

css

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

javascripthtmlcssspring-mvc

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

Attempting to implement scroll-based animation on my webpage

Having trouble integrating this animation (from codepen) into my website. It works fine on its own, but when I try to add it to my site, it doesn't show up. I want it to appear in the middle at the bottom of the background image. Check out the codepe ...

htmlcssanimation

Backgrounds filled by nested <li> elements inside another <li> element

My website features a sidebar menu with nested lists. When hovering over a list item, a sub-list appears. However, I am having an issue where the background color fills the entire sub-list instead of just the first list item. See the images below for clari ...

htmlcss

Use CSS to create boxes of a specific size within a table cell that spans the entire height

I'm having trouble using CSS to create two boxes (one red and one green) inside a table cell. I can't seem to make them fill the entire height of the cell. Here is what I have tried so far: td { background-color: lightblue; padding: 5px; ...

css

jQuery SlideOver - Arranging Divs in a horizontal layout

Currently, I am working on an application wizard that is designed to slide panels in order to display different sections of the resume application. You can view my site here: . The issue I am having is that when you click anywhere on the form, the panels a ...

jqueryhtmlcss

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

javascriptjqueryhtmlcss

Creating a diagonal division within a rectangle using CSS

My goal is to create a rectangular div that sits behind a video, with a rotation of 35 degrees using CSS. Additionally, I aim to make the design responsive to different screen sizes. ...

htmlcssbootstrap-4responsive-design

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

Browsing through database images and aligning them with CSS to the center

I am working on creating a single row of three centered images inside a div. Both the images and the div itself need to be centered on the page. The images will be contained within the div, here's what I have so far: HTML/PHP <?php $resul ...

phphtmlcssmysqli

Create text that remains hidden behind an image while ensuring the content stays fully

In my website design using HTML/CSS, I am working on achieving a specific layout goal: https://i.sstatic.net/6UUwK.png My aim is to have a div of text positioned behind an image. Although I have successfully accomplished this on a laptop screen, I am fac ...

htmlcsslayout

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

javascriptcssangulartypescriptangular5

Tips on choosing the initial h4 element within the same parent element but at different levels of depth

Consider the following code snippet: <div class="main-element"> <h4>Title 1</h4> <ul> <li></li> <li></li> <li> <h4>Title2</h4> & ...

htmlcsscss-selectors

Enhancing the style of child elements in jQuery using CSS

My goal is to create a popup that appears upon mouse hover using jQuery and CSS. The code functions properly, but I'm encountering difficulty adding CSS to the child elements within the popup window. Below is the jQuery code: $(document).ready(fun ...

javascriptjqueryhtmlcss

Leveraging the power of PHP includes with nested subdirectories

Hello, I recently configured my web server to run all .html files as .php files, allowing me to utilize the php include function, which has been very beneficial. However, I have various subdirectories with multiple files in each one. Homepage --banners ...

phphtmlcssphp-include

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

jqueryhtmlcss