Question on graphics?

I want to know how the graphics are being loaded in the quickstart. Here is what I'm talking about:

go to the module "Tab module in header"

go to one of the tabs and look at the definition

You'll see code that describes how to display the tab. You see the text and other things. My question is specific to this line of code:
<div class="iphone_element">iPhone app</div>

I know that this is loading the graphic of the iPhone but I'm not sure from where??? I'm not an html guy and I don't understand the "class="iphone_element" part of this. Is this a predefined class in css? If so, where are they defined and how do I get a list of those elements? Can I change those elements?

Thanks to anyone that can help!!!

I have done some more research. I found the file, stylex.css, where the graphics are defined. Now I have more questions.

If I want to change the graphic, do I just replace the graphic that is in the template folder?

Can I add to the css without changing the shipping css file style1.css? I want to add other graphics in the same way it's being done now?

If I can't add to the css without modifying the template css files, I think this will cause problems if Gavick ever updates the template. Does the template have a way of making this easier?

Any help would be greatly appreciated.