Site compatible mobiles

bonjour

je tente de m'exercer à faire un site internet compatible MOBILES.

Dans les tuto je retrouve des codes comme cici :

@media (max-width: 640px) { 

 body, element1, element2 { 
   width: auto; 
   margin: 0; 
   padding: 0; 
 } 

 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { 
   max-width: 100%; 
 } 

....  

}

ce que je ne comprends pas c'est où je dois inscrire ce code ?
dans une feuille css nommée media.css , les crochets @media (max-width: 640px) {
}

deviennent rouges.

Pourtant j'ai bien relié le css à ma page html :

<link rel="stylesheet" href="media.css" />

Je vous remercie