Object-Oriented CSS,Sprites

Audio Blog:
 http://yourlisten.com/channel/content/16906279/css2

   Hope you would have read my previous post.This is a continuation of CSS there.The concept of OOPS when applied to CSS results it is object oriented CSS.We shouldn't put every attribute concerning a particular object in a single definition.For instance you can seperate the structure from the design.For instance consider a button.Its css file will be given as,

.buttondim{
width:
height:
}
.buttonstyle{
background-color:
font:
text-shadow:
}

Now if you want to use the same sized button anywhere else in the page,you can still use one from the above rather than repeating it.

CSS SPRITES:
    Sprite is an image which is a combination of many other images.It is a single image.The time taken to transmit a big 15k image is less than transmitting three 5k images.
-->Sprites enable us to increase the page efficiency.

Media Query:
  All must be aware of the meta tag in the head.In this tag in the viewport you can mention the media screen .It is used to automatically call different CSS files for different sized screens.The devices need not specify to fetch the different CSS.

Give it as,
@media all and (min-width:500px and max-width:1024)
{
.class1
{
}
.class2
{
}

The "all" in the above sentence specifies all devices.You can specify it as either "monitor" or "print" .
This can also be sometimes implemented when you have many images to be diaplayed in a single frame.The no of images per row is automatically adjusted based on the device size.



- Sourcebits University
Cloud Computing
www.sourcebits.com