CSS Media Types

CSS Media Queries

Adapting Styles for Different Contexts

CSS allows you to apply different styles for different media types or device characteristics. This capability is fundamental to Responsive Web Design (RWD), enabling websites to adapt their layout and appearance to various screen sizes, resolutions, and device capabilities.

While some CSS properties might inherently relate to a specific context (like properties for print styling), many properties like font-size, margin, or display can be adjusted based on the context using Media Queries.

For example, a larger font size might be suitable for screen viewing, while a smaller size works better for printed documents. Similarly, layout might change drastically between a wide desktop screen and a narrow mobile screen.

The @media Rule

The @media rule is used to apply a block of CSS rules conditionally, based on the results of a media query.

A media query consists of an optional media type (like screen or print) and/or one or more media features (like min-width, max-width, orientation).

Example: Applying different styles for screen and print media types:

/* Default styles (apply everywhere unless overridden) */
p {
  font-family: sans-serif;
  font-size: 1rem; /* 16px assuming default browser settings */
  line-height: 1.5;
}

/* Styles specific to screen output */
@media screen {
  p {
    color: #333;
  }
}

/* Styles specific to print output */
@media print {
  p {
    font-family: serif;
    font-size: 11pt;
    color: #000;
  }
  /* Hide navigation elements when printing */
  nav, footer {
    display: none;
  }
}

This example sets default paragraph styles, then uses @media print to override font settings and hide navigation/footer elements when the page is printed.

Media Features for Responsive Design

While media types like print are useful, media features are more commonly used today, especially for creating responsive layouts that adapt to different screen sizes.

Example: Adjusting layout based on screen width:

.container {
  width: 90%;
  margin: 0 auto;
}

.sidebar {
  width: 100%; /* Full width on small screens */
  margin-bottom: 1em;
}

.main-content {
  width: 100%;
}

/* Apply styles when screen width is 768px or wider */
@media screen and (min-width: 768px) {
  .container {
    display: flex; /* Use Flexbox for layout */
    gap: 1.5em;
    width: 80%;
  }
  .sidebar {
    width: 30%; /* Sidebar takes 30% width */
    margin-bottom: 0;
  }
  .main-content {
    width: 70%; /* Main content takes 70% width */
  }
}

In this example, the layout shifts from a single column on small screens (< 768px) to a two-column layout using Flexbox on larger screens (>= 768px). Common features include min-width, max-width, orientation, prefers-reduced-motion, and resolution.

Tip: Using min-width queries (mobile-first approach) is often recommended, where you define base styles for small screens and progressively add complexity for larger screens.

Common Media Types

While media features are dominant for RWD, some media types are still relevant:

Media Type	Description
all	Applies to all devices. This is the default if no type is specified.
print	Applies to documents viewed in print preview mode or printed on paper.
screen	Applies primarily to visual screens (computers, tablets, smartphones).
speech	Intended for speech synthesizers (used to be aural). Support is limited, and accessibility features often rely more on ARIA attributes and semantic HTML.

Note: Many older media types like handheld, projection, tv, braille, embossed, tty are deprecated or have very limited/inconsistent browser support and usage in modern web development. Responsive design techniques using media features have largely replaced the need for types like handheld or tv.