I want to use css 3 to use smaller images once the screen size is less than 800px x 600px how can I do that in css3?
You can’t really, unless perhaps you are setting them as background images. Otherwise, you’ll have to use something like JavaScript.
I found what am looking for online here http://www.ilovecolors.com.ar/detect-screen-size-css-style/ you are correct I need some sort of javascript to test the screen size to switch css3 files
Switching CSS3 files is a different issue from swapping images, though. You could use CSS3 media queries to change the styling of the page based on screen size, but not change the images in the HTML (apart from setting them to display: none or something, which is a rotten idea, because mobile users still have to download them.
There are some scripts out there that load different images based on screen size, such as:
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://adactio.com/journal/4997/
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
excellent thanks