Hallo,
<link rel="stylesheet" href="styles.css">
also du lässt das type und das media Attribute weg. War das jetzt mit Absicht?
type ist wie gesagt implizit und in HTML 5 weglassbar. Und die Angabe media="screen" ist sowohl im HTML als auch im CSS (@media screen {…}) für überflüssig, solange du nicht absichtlich von print unterscheiden willst oder Media-Queries einsetzt.
Zwar definiert CSS 2.1 eine Reihe von Medientypen, aber in der Praxis werden nur screen und print breit unterstützt. Natürlich gibt es braille, handheld, projection, speech und tv als tatsächliche Ausgabemedien, aber in keinem dieser Fälle wenden die jeweiligen Browser Styles für diesen Medientyp an. D.h. TV-Browser wenden nicht tv an, Screenreader wenden nicht braille oder speech an, und Smartphones wenden nicht handheld an. Der aktuelle Desktop-Opera (Presto) unterstützt meines Wissens projection im Vollbildmodus, aber das ist eine Ausnahme.
Daher schließt die Angabe von media="screen" im HTML lediglich print aus. Ob das überhaupt nötig ist, muss im Einzelfall entschieden werden. Wie Gunnar sagt, reicht es hier gegebenenfalls, in einem @media print {}-Block im selben Stylesheet Anpassungen vorzunehmen.
Grüße,
Mathias