Search code examples
javascripthtmlcssmedia-type

Setting CSS Media Type Inline

I am producing a standalone HTML document under the constraint that the document has to be exactly one file. I would like to use CSS to make sure that links in the document are visible and discoverable (probably blue with underlines) when viewed in a browser, but to vanish most of that formatting when the document is printed.

Is this possible with just a <style> block?

Is it possible to get what I want with JavaScript jiggery-pokery?

Solution

  • You can use @media or @import in a <style> block and set styles specific to the media type.

    Read more here: http://www.w3.org/TR/CSS2/media.html

    @media print {
  /* print styles */
  a {color:#333}
}
@media screen {
  /* screen only styles */
  a {border-bottom:1px solid blue}
}
/* general styles here */