Untitled

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />

    </head>
    <body>
    <div id="wrapper">
    <div id="header">
        <h1>Ini hanya mencoba saja lho</h1>
    </div>
    <div id="content">

    Adding the specific code for devices inline might be a good way to use media queries if
    you only need to make a few changes, however if your stylesheet contains a lot of
    overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
    </div>
    </div>
    </body>
    </html>

div#wrapper { width: 800px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#CCC;
    }
    #navigation{
        float:none;
        width:auto;
    }

@media only screen and (max-width:480px){
    div#wrapper { width: 400px;}
    div#header{
        background-image:url(media_queries.png);
        height: 93px;
        position:relative;
    }

    div#header h1{
        font-size:140%;
    }
    #content{
        float:none;
        width:100%;
        background-color:#8787C1;
    }
    #navigation{
        float:none;
        width:auto;
    }
}