Skip to main content

Introduction to CSS User Interface

CSS User Interface​

CSS (Cascading Style Sheets) provides a wide range of properties to style the user interface of web pages.

You will learn about the following CSS user interface properties:

  • resize
  • outline-offset

resize and outline-offset are two CSS properties that can be used to modify the visual appearance and behavior of HTML elements.

The resize property​

The resize property is used to allow users to resize an element, typically a <textarea> or <input> element. This property specifies whether or not an element is resizable, and in which directions it can be resized.

The possible values of this property are:

  • none: The element cannot be resized.

  • both: The element can be resized in both the horizontal and vertical directions.

  • horizontal: The element can only be resized in the horizontal direction.

  • vertical: The element can only be resized in the vertical direction.

  • block: The element can be resized in both directions, but the resizing is constrained to maintain the aspect ratio of the element.

As an example:

textarea {
  resize: both;
}
  • This will allow users to resize the <textarea> element in both the horizontal and vertical directions.

The outline-offset property​

The outline-offset property is used to offset the outline of an element from its border. The outline is a non-rectangular border that is drawn around an element, typically to indicate focus. The outline-offset property specifies the distance between the outline and the border of an element.

The possible values of this property are:

  • length: Specifies the offset as a length value.

  • initial: Sets the offset to its default value.

  • inherit: Inherits the offset from the parent element.

As an example:

button:focus {
  outline: 2px solid blue;
  outline-offset: 10px;
}
  • This will draw a blue outline around a button when it is in focus, and offset the outline 10 pixels away from the button's border.