What is the CSS “@media” nested structure/namespace?

What is this name space like wrapping/nested structure in CSS? I have never seen this before. Please help me understand what is this. Thanks

@media screen, projection
{
    *
    {
        ma开发者_运维百科rgin: 0px;
        padding: 0px;
    }

    body
    {
        background: #fff;
        overflow-y: scroll;
        _overflow-y: none;
    }
}

See media types in CSS2. You can have several blocks of CSS rules, each applying to a specific output medium (e.g.screen or print).

The block you posted would be applied when rendering on a computer screen or a projection device.

This is basically used intead of having a media attribute in the link tag on your HTML page :

<link href="style.css" type="text/css" rel="stylesheet" media="screen, projection" />