7

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

<style type="text/css" media="screen">
JohnK
  • 6,219
  • 6
  • 46
  • 71
dramasea
  • 3,160
  • 16
  • 45
  • 75

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,859
  • 3
  • 30
  • 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,700
  • 7
  • 32
  • 47
  • [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,879
  • 1
  • 15
  • 22