YouTipAtt Style Media
# HTML <style> media Attribute
The `media` attribute of the `
```
---
## Operators
You can combine multiple expressions using logical operators:
| Operator | Description |
| :--- | :--- |
| `and` | Specifies an **AND** operator. Both conditions must be true. |
| `not` | Specifies a **NOT** operator. Negates the entire media query. |
| `,` (comma) | Specifies an **OR** operator. The styles apply if any of the conditions are met. |
---
## Media Devices
These values specify the target device category:
| Value | Description |
| :--- | :--- |
| `all` | **Default.** Suitable for all devices. |
| `print` | Intended for paged material and documents viewed on screen in print preview mode. |
| `screen` | Intended primarily for color computer screens. |
| `speech` | Intended for speech synthesizers. *(Replaces the deprecated `aural` type)* |
| `braille` | *Deprecated.* Intended for braille tactile feedback devices. |
| `embossed` | *Deprecated.* Intended for paged braille printers. |
| `handheld` | *Deprecated.* Intended for handheld devices (typically small screen, limited bandwidth). |
| `projection` | *Deprecated.* Intended for projected presentations. |
| `tty` | *Deprecated.* Intended for media using a fixed-pitch character grid (like teletypes). |
| `tv` | *Deprecated.* Intended for television-type devices. |
---
## Media Features (Values)
You can target specific physical characteristics of the output device. Most features can be prefixed with `min-` or `max-` to express "greater than or equal to" and "less than or equal to" constraints.
| Feature | Description | Example |
| :--- | :--- | :--- |
| `width` | Specifies the width of the target display area. | `media="screen and (min-width: 500px)"` |
| `height` | Specifies the height of the target display area. | `media="screen and (max-height: 700px)"` |
| `device-width` | Specifies the physical width of the device screen. | `media="screen and (device-width: 500px)"` |
| `device-height` | Specifies the physical height of the device screen. | `media="screen and (device-height: 500px)"` |
| `orientation` | Specifies the orientation of the device (`portrait` or `landscape`). | `media="all and (orientation: landscape)"` |
| `aspect-ratio` | Specifies the width-to-height ratio of the viewport. | `media="screen and (aspect-ratio: 16/9)"` |
| `device-aspect-ratio` | Specifies the physical width-to-height ratio of the device screen. | `media="screen and (device-aspect-ratio: 16/9)"` |
| `color` | Specifies the bits per color component of the output device. | `media="screen and (color: 3)"` |
| `color-index` | Specifies the number of colors the device can display. | `media="screen and (min-color-index: 256)"` |
| `monochrome` | Specifies the bits per pixel in a monochrome frame buffer. | `media="screen and (monochrome: 2)"` |
| `resolution` | Specifies the pixel density of the destination device (in `dpi` or `dpcm`). | `media="print and (resolution: 300dpi)"` |
| `scan` | Specifies the scanning process of television displays (`progressive` or `interlace`). | `media="tv and (scan: interlace)"` |
| `grid` | Determines whether the output device is a grid device (like a TTY terminal) or bitmap. | `media="handheld and (grid: 1)"` |
---
## Code Examples
### Example 1: Screen vs. Print Styles
This example applies a colorful layout for screens, but switches to a clean, ink-friendly black-and-white layout when the user prints the page.
```html
```
### Example 2: Responsive Design using Media Queries
This example changes the background color of the page based on the viewport width.
```html
```
---
## Considerations
1. **Performance:** While using the `media` attribute on `