# CSS: Unrecognized at-rule “@media screen”

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-unrecognized-at-rule-media-screen
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `@media screen` rule without a condition after the media type is invalid CSS syntax and will be flagged by the W3C validator.

A `@media` rule requires either a complete media query or a media type combined with a media feature expression. Writing `@media screen` alone followed by a block is actually valid CSS, so this error typically appears when the syntax inside the rule is malformed, the rule is missing curly braces, or extra characters appear between `screen` and the opening brace.

Common causes include:

- A missing opening or closing curly brace `{}` around the media block.
- Stray characters or typos between the media type and the brace.
- Placing `@media` rules inside a `style` attribute (inline styles do not support at-rules).
- The CSS appears inside an HTML context where the validator cannot parse it correctly, such as a malformed `<style>` element.

If the intent is to target screens of a specific size, a media feature expression is required, like `@media screen and (min-width: 768px)`. If the intent is to target all screen devices with no further conditions, `@media screen` is valid CSS on its own, and the real problem is likely a syntax error nearby.

## Example with the issue

```html
<style>
  @media screen
    .container {
      width: 80%;
    }
</style>
```

The opening curly brace for the `@media` block is missing, so the validator cannot recognize the rule.

## Fixed example

```html
<style>
  @media screen {
    .container {
      width: 80%;
    }
  }
</style>
```

If the goal is to restrict styles to a specific viewport width, add a media feature:

```html
<style>
  @media screen and (min-width: 768px) {
    .container {
      width: 80%;
    }
  }
</style>
```

Both examples use properly matched curly braces and valid `@media` syntax, which resolves the validator error.