CSS media formats- CSS Course

Images, Media, and Forms

In this section, we examine how certain special elements are handled in CSS. Images, media content, and forms behave differently when it comes to styling, and understanding CSS limitations and possibilities can save you a lot of frustration.

We will highlight the most important aspects you should know to efficiently style these components and avoid unexpected behaviors.

Replaced Elements

Images and videos belong to the category of replaced elements. This means that CSS can control their positioning on the page, but not their internal content.

These elements usually have an aspect ratio, meaning intrinsic dimensions for width and height. They are displayed at their natural size by default, unless we intervene with CSS styles.

In CSS, all elements are treated as “boxes.” If an image is placed in a box smaller or larger than its intrinsic size, it will be automatically resized—either shrinking or enlarging—until it may even overflow the container.

In the following example, we have two 200px boxes:

• The first contains a smaller image that does not expand to fill the box.
• The second contains a larger image that overflows outside the container.

Controlling Image Size

What can we do with an overflowing image?

A simple and effective technique, discussed in previous lessons, is setting a maximum width of 100% for the image. This approach also works for other media elements such as <video> or <iframe>.

In the previous example, you can uncomment the line max-width: 100% to see the result.

There are other options. You can choose to size an image so that it fully covers the container. Here, the object-fit property comes into play, offering several resizing options:

• cover – the image covers the container while preserving the aspect ratio, but some parts may be cropped.
• contain – the image resizes completely to fit within the container, but empty spaces may appear if the aspect ratio differs.

You can also try the fill value, but this does not preserve the aspect ratio, which can lead to image distortion.

Behavior of Replaced Elements in Layout

When using various CSS layout techniques, replaced elements — such as images or videos — can behave differently from other HTML elements.

For example, in a grid or flex structure, most elements automatically expand to fill the available space. Images, however, do not expand by default and will align at the start of the container.

You can observe this behavior in the example below, where all elements have a background color and expand fully — except for the image.

Form Elements

Form elements can be quite tricky to style with CSS. If you have completed the HTML forms section of the course, you have already seen some styling methods that we will not fully repeat here.

However, there are a few important concepts that we will discuss in this section.

Many form controls are introduced using the <input type="text"> element, which defines simple fields like text fields, as well as more complex fields introduced by HTML5, such as date and color.

There are also additional elements, such as <textarea> for multi-line text, and structural labels like <fieldset> and <legend>.

HTML5 provides attributes that allow developers to indicate which fields are required and what type of content should be entered. If the user enters incorrect data or omits a field, the browser can automatically display an error message.

Due to browser diversity, there is inconsistency in styling and customizing form elements.

Styling input Text Elements

Elements that allow text input, such as <input type="text">, <input type="email">, and <textarea>, are relatively easy to style and behave similarly to other "boxes" on the page.

However, the default styling applied to these elements varies depending on the user's operating system and browser.

In the example below, you will notice that border, padding, and outline are applied as expected. We used attribute selectors to target different input types.

Experiment with the form style: modify the border (border), padding (padding), background color (background), and font type (font-family).

As explained in the HTML course, many of the more complex input types depend on the operating system and cannot be fully customized with CSS.

For this reason, complex forms may appear differently across browsers. Test them in as many environments as possible to ensure users have a pleasant and intuitive experience.

Inheritance and Forms (Inheritance)

In some browsers, form elements do not automatically inherit font styles. If you want these elements to follow the styling defined for the <body> or a parent element, use the following CSS rule:

button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
}

Form Elements and Box Sizing (box-sizing)

The size of form elements can vary significantly across browsers. To ensure consistent width and height, it is recommended to reset margin and padding to 0, then redefine them for each element you want to customize.

button, 
input, 
select, 
textarea {  
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}

Additionally, to prevent unnecessary scrollbars in Internet Explorer, set overflow: auto; on the <textarea> element:

textarea {
  overflow: auto;
}

If we summarize all these rules into a small CSS "reset" that provides a coherent base for styling forms, it would look like this:

button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}
textarea { 
  overflow: auto; 
}

Form Accessibility

Accessibility in forms means ensuring that all users — including those using screen readers, keyboards, or other assistive technologies — can easily interact with the fields and controls in the form.

An accessible form is clear, well-labeled, and provides useful feedback in case of an error.

Proper Labeling of Fields

Each form field should have an associated <label>. This helps screen readers identify the purpose of the field.

<form>
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email" required>
</form>

ARIA Attributes and Help Messages

You can use attributes such as aria-describedby to link a help or error message to a field:

<form>
  <label for="name">Name</label>
  <input type="text" id="name" aria-describedby="nameHelp">
  <small id="nameHelp">Enter your full name.</small>
</form>

Automatic Validation and Feedback

HTML5 allows automatic validation with attributes like required, type, and pattern. The browser will display an error message if the data is entered incorrectly.

<form>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
</form>

Complete Accessible Form Example

<form>
  <fieldset>
    <legend>Contact</legend>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required aria-describedby="emailHelp">
    <small id="emailHelp">We will use the address only for reply.</small>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <button type="submit">Send</button>
  </fieldset>
</form>

Responsiveness and Media Queries

A modern website must adapt to any screen size — from mobile phones to large monitors. CSS provides powerful tools to create flexible layouts and components that resize automatically.

Images and forms are essential elements that need to be responsive to provide a good experience on any device.

Responsive Images

A simple technique to make images responsive is using the max-width: 100% property. This ensures the image will not exceed the container size:

img {
  max-width: 100%;
  height: auto;
}

Adaptive Forms

Forms can be arranged in columns on large screens and in a vertical layout on small screens. We use @media queries to adjust styles according to the viewport size.

Modern CSS functions applicable

Modern CSS offers functions that allow precise control over element sizes, proportions, and scaling. These are especially useful in responsive designs, where flexibility is essential.

The clamp() function

clamp() allows defining a size that adapts between a minimum and maximum value depending on the viewport. It is ideal for fonts, margins, or fluid spacing.

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

The aspect-ratio property

With aspect-ratio you can set the ratio between width and height of an element without needing tricks with padding or background images.

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Live example with clamp() and aspect-ratio

Customizing native elements

Some form elements, such as <select>, <checkbox>, and <radio>, have default styles controlled by the operating system and browser. This makes customizing them more difficult and sometimes inconsistent.

To have full control over the appearance, we can use the property appearance: none, which removes the native style and allows applying our own CSS rules.

Example: custom <select> styling

Other customizable elements

Checkboxes and radio buttons can be hidden and replaced with custom visual elements, but this requires more code and attention to accessibility.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid gray;
  border-radius: 4px;
  background-color: white;
}

input[type="checkbox"]:checked {
  background-color: teal;
}

Cross-browser testing

One of the most important aspects of web development is testing across multiple browsers. Even though CSS standards are increasingly respected, there are still subtle differences in how browsers interpret styles — especially for forms and media elements.

It is recommended to test your site in the most popular browsers: Chrome, Firefox, Safari, Edge, and even their mobile versions.

This type of input is styled differently depending on the browser and operating system. In some cases, it cannot be customized at all with CSS.

Example: different behavior of <input type="date">

Testing recommendations

• Use BrowserStack or LambdaTest for testing on multiple platforms.
• Enable DevTools in your browser to inspect styles and element behavior.
• Test on real devices, not just emulators.
• Check if interactive elements (forms, buttons, menus) work correctly with keyboard and screen readers.

Recap and best practices

On this page, we explored how CSS interacts with images, media, and forms. We discussed the behavior of replaced elements, styling and adapting forms, as well as modern functions and cross-browser testing. Below is a useful summary:

CSS checklist for images and media

• Use max-width: 100% for responsive images.
• Apply object-fit for controlling image scaling in containers.
• Set aspect-ratio for consistent layouts.
• Test media elements across multiple browsers and real devices.

CSS checklist for forms

• Associate correct <label> tags with each field.
• Use font-family: inherit and box-sizing: border-box for consistency.
• Apply appearance: none to customize native elements.
• Test forms on mobile and desktop, with keyboard and screen readers.

General recommendations

• Use clamp(), min(), and max() for fluid sizes.
• Adapt layout with @media for small screens.
• Do not over-style forms — maintain clarity and usability.
• Normalize base styles using a stylesheet like Normalize.css.

🧠 Quiz – CSS Media, Forms & Responsiveness