CSS width controls how wide an element appears on the page. It allows you to set a fixed or dynamic width. This property is essential when designing the layout of your website. By using the CSS width property, you can define whether an element should occupy a specific number of pixels, a percentage of its container, or even adapt to the viewport width.

Using CSS width helps you create balanced and responsive designs that adjust to different screen sizes.

Syntax

Follow the code block below to set the width in CSS code.

width: value;

Explanation:

• width: Defines the element's width.
• value: Specifies the width, which can be a length (like px, em), a percentage (like 50%), or other units (like vw).

Example 1: Fixed Width

In this example, we will set a fixed width for a <div> element using pixels. The fixed width ensures that the element always has the same width regardless of the screen size.

Explanation:

• Fixed Width Value:
  • 300px: The container is set to a fixed width of 300 pixels.
• Visual Styling:
  • Background color, padding, and border: These are added for clarity and visual separation.
• Outcome:
  • The container maintains a constant width, which is useful for designs that require consistency.

Example 2: Responsive Width Using Percentage

In this example, we set the width of a <div> element using a percentage. This allows the element to adjust its width relative to its parent container, making it more responsive.

Explanation:

• Responsive Width Value:
  • 50%: The container occupies 50% of the parent element's width, making it responsive to screen changes.
• Visual Styling:
  • Background color, padding, and border: Added for clarity and demonstration of the container's dimensions.
• Outcome:
  • The element adjusts its size based on the viewport or container size, which is beneficial for responsive layouts.

This lesson explains how to use the CSS width property to control the size of elements. Whether you need a fixed width or a responsive layout, understanding how to set width correctly is key to effective web design.