media attribute in link[rel=stylesheet]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>media attribute for link[rel=stylesheet]</title>
        <link rel="stylesheet" type="text/css" media="screen" href="normal.css" />
        <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 800px)" href="small.css" />
    </head>
    <body>
        <div class="cube"></div>
    </body>
</html>

/* normal.css */
.cube {
    width: 100px;
    height: 100px;
    background-color: #a00;
}
small.css:
.cube {
    background-color: #0a0;
}

Result:

Stylesheet media attribute

Links:

Licensed under CC BY-SA 3.0