7

What does media="screen" mean in the below css code?

<style type="text/css" media="screen">
JohnK
  • 6,865
  • 8
  • 49
  • 75
dramasea
  • 3,370
  • 16
  • 49
  • 77

3 Answers3

8

The goal of the media attribute is to allow you to specify different styles for different methods of display.

Most commonly I use this to have 2 sets of styles, 1 for display (screen) and 1 for printing (print)

Normally on the "print" css I'll do things like hide buttons, strip out extraneous images, ads, etc etc. Basically, make it 8.5x11 friendly.

Brook
  • 5,949
  • 3
  • 31
  • 45
  • 1
    "screen" are the styles that your average web-browsing user is going to see. See the links that others have provided for what the various media types mean. – Brook Dec 24 '10 at 02:41
3

There are two types, screen is the default browser view. print is for print view.

steve
  • 3,878
  • 7
  • 34
  • 49
  • [CSS 2 defines 10 media types](https://www.w3.org/TR/2011/REC-CSS2-20110607/media.html#media-types): all, braille, embossed, handheld, print, projection, screen, speech, tty and tv. – Stefan Bajić Mar 11 '21 at 09:46
1

In addition to Brook's answer, the media="foo" attribute of the is equivilant to the @media foo in your CSS file

Tarek Fadel
  • 1,909
  • 1
  • 14
  • 22