Question: What should I name my CSS style sheet file?

Answer:

When you create an external style sheet for your Web pages, you should name the file following similar naming conventions for your HTML files:

• Do not use special characters
  You should only use the letters a-z, numbers 0-9, underscore (_), and hyphens (-) in your CSS file names. While your file system may allow you to create files with other characters in them, your server OS might have issues with special characters.

• Do not use any spaces
  Just like with special characters, spaces can cause problems on your Web server. It's a good idea to avoid them in your file names.
• The file name should start with a letter
  While this isn't an absolute requirement, some systems have trouble with file names that don't start with a letter.
• Use all lower case
  While this isn't required for a filename, it's a good idea, as some Web servers are case sensitive, and if you forget and reference the file in a different case, it won't load.
• Keep the file name as short as possible
  While there is a limit of file name size on most operating systems, it is much longer than is reasonable for a CSS file name. A good rule of thumb is no more than 20 characters for the file name not including the extension.

The Most Important Part of Your CSS File Name

The most important part of the CSS file name is not the file name itself, but the extension. Extensions are not required on Macintosh and Linux systems, but it is a good idea to include one anyway when writing a CSS file.

That way you will always know that it's a style sheet and not have to open the file to determine what it is in the future.

The extension should be:

.css

CSS File Naming Conventions

If you only will ever have one CSS file on the site, you can name it whatever you like. I prefer:

styles.css
Name style sheets after their function. Since a Web page can have multiple style sheets attached to them, it helps to divide your styles into different sheets depending upon the function of that sheet and the styles within it. For example:

• Layout vs Design
  layout.css design.css
• Page sections
  main.css nav.css
• Whole site with sub-sections
  mainstyles.css subpage.css