I'll start by saying I have done almost the exact same gallery on numerous occasions with slightly different code. Only once have I needed a conditional comment for it and that was background alignment specific, and I use a No JS version. If you would like to have an idea of the code variation I use check my graphics page (sadly neglected but the code is good), my Layout CSS, and for the colour/effect aspect any colour sheet I use.
For anyone taking a peek... If you think 3 or even 6 style sheets is a lot... Throw in a style sheet changer. 
It is not necessarily "wrong" to have style sheets split. Often you will find that a site splits colour/overall look/theme from structural, and "special" pages have an additional one with IE modifications having their own as well. This is likely closer to what your teacher meant. I am going to try to take you back to the basics so you get less confused, and so editing your site design or layout or special pages becomes a faster and easier experience instead of trying to figure out which style sheet to change, and then again which one to adjust for IE, etc.
I need to make sure you know this important piece of info: The LAST style sheet listed will OVERRIDE any before them. With one exception. If you used the "¡important" attribute to change it.
I am also going to make the assumption you know that a class (written as .classname) can be used as many times as you want on a HTML page, while an ID (written as #idname) is only used once on a HTML page BUT I am putting it here as others may stumble on this in future searches.
That said...
We'll begin:
Firstly: The length of your CSS... The length of your CSS files will load top down. So if it is a background attribute or body attribute obviously it will be placed near the top. Image loading will also cause load times to vary so we keep them "smaller"... HOWEVER... Cascading Style Sheets purely that. Styling.
The HTML code is NOT affected with regard to load time. So the code it's self should be loading, and would produce an unstyled version of your site before the page load would suffer drastically.
If your code was heavy (meaning unused, extraneous code), or the images that are loading through the style sheet or in page are heavy file sizes then that would slow your site. From what I see you are using smaller file sizes so it is not an issue.
I will also say I have a client with a site that has over 80 pages of content, and very specific needs. A good place to take a look at how long a style sheet could be without affecting load time adversely would be to go to a CMS like Drupal and look at a base theme like Zen. They are very long, well commented, and load fast as they are not file size heavy.
Secondly: The conditional IE Style Sheets: You do not need full style sheets. You only need to add the CSS classes/IDs that you need to "adjust". Unless you are using the same name for a style on multiple style sheets you should only need 1 IE style sheet (version permitting). All of the adjustments should be done on the same style sheet to keep you from accidentally having contradicting code.
An example of what I mean is (and I was copying from a site with a longer list of style sheets and editing to what you need):
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<style type="text/css" media="all">@import "/css/html-elements.css";</style>
<style type="text/css" media="all">@import "/css/layout.css";</style>
<style type="text/css" media="all">@import "/css/gallery.css";</style>
<style type="text/css" media="all">@import "/css/appearance.css";</style>
<!--[if IE]>
<link rel="stylesheet" href="/css/ie.css" type="text/css">
<![endif]-->
You can get version specific with multiple sheets for IE based on that but most times you do not need to with positioning issues if you can allow for a 4-8 pixel variance from my own experiences (IE 7 has changed some of that but if you are not already adjusting for that it is not needed).
Honestly... At this point I can't even begin to back track which sheet is affecting which because there are duplications of code that are not needed, etc. and these can over ride things so one COULD end up fixingit in A, breaking it in B, fixing it in C and breaking it in D if they were listed in that order. I think this is causing confusion for you on your end as well.
Now I will break this down for you:
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" /> --- This is how your site looks unstyled if someone was to print it. This is where you turn off all images/backgrounds/colours, etc. etc.
Often you would see things like this:
.classname {
color: #000;
background-color: transparent !important;
background-image: none !important;
}
Class name is often things like:
.wrapper or .page or .content OR #wrapper or #page or #content
And you would condense the style sheet with combining like styles as Eric said when he put this in:
<body id="home">
#home #whatever {
color:#000;
}
<style type="text/css" media="all">@import "/css/html-elements.css";</style>
This is where you define the font types, sizes, etc. This is where you would edit your p, h1, h2, h3 attributes... Not the colour per say. The sizing, text decoration, margins, etc. Because essentially these are the same for the whole site and when they are NOT the same they would have an individually styled class.
Example:
p{
margin: 10px;
font-weight:bold;}
And your code can be condensed with things like this:
ul, ul ul, ul ol,
ol ol, ol ul,
{
margin: 0;
}
- IF they share the same attribute.
It should also contain the links in this order:
a:link
{ text-decoration:none;
color: #999999;
}
a:visited
{ text-decoration:none;
color: #383636;
}
a:hover,
a:focus
{ text-decoration:underline;
color: #666666;
}
a:active
{text-decoration:underline;
color: #000000;
}
- Colour can be applied here for the site wide link colours and then if a new class/set of colours is needed for an exceptional circumstance it should be added to the "appearances" style sheet.
Interesting quirks to note about HTML elements and which often solves IE issues:
Almost all modern browsers use a 16px default font size. Specifying the font-size and line-height in ems (relative to the 16px default font) allows the user to resize the font in the browser and produces the most consistent results across different browsers.
If you were running into problems you would apply the following attribute to the HTML elements page:
body
{
font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
}
http://www.alistapart.com/articles/howtosizetextincss - Font size information and rendering of browser information can be found here.
<style type="text/css" media="all">@import "/css/layout.css";</style>
This is where you put your CSS that pertains to your columns, and positioning of content on the page. If you want your menu in the left column, and floated there then this is where you do it. If you want to define your content width, or inner content width. This is where.
<style type="text/css" media="all">@import "/css/gallery.css";</style>
Your gallery is a unique circumstance and would be suited to its own CSS so that would be here. It is exactly as you have it.
<style type="text/css" media="all">@import "/css/appearance.css";</style>
This is where you apply your images, your colours, your special classes for links/text/html attributes, miscellaneous classes used through the site, etc.
<!--[if lt IE8]>
<link rel="stylesheet" href="/css/ie.css" type="text/css">
<![endif]-->
One style sheet. All modifications. Denote it by classes, and only put in the classes/modifications needed. If IE needs different positioning, margins, or padding then do it here but do not include classes you have not had to adjust as that is already read in the previous CSS. You are simply making an amendment to one browsers incorrect rendering.
Yes... I know making the new blank CSS files and copying the code into the appropriate CSS files and then double checking against duplication will take you an hour or two but I promise... it is worth it. Your style sheets look like they have fairly clean code. They just need to be organized well for the hierarchy.
