User Interface in CSS — Styling Elements for Better Interaction

In CSS, User Interface (UI) properties help control how elements behave and appear from the user’s perspective. These affect layout, interaction, and usability.

Key CSS Properties for UI

1. Cursor

Changes the mouse pointer when hovering over elements.

button {  cursor: pointer; /* changes cursor to hand */}

Common values: default, pointer, text, wait, not-allowed, move, crosshair

2. Outline

Adds an outline around elements, useful for focus states.

input:focus {  outline: 2px solid blue;}

3. User-select

Controls text selection behavior.

p {  user-select: none; /* disables text selection */}

Values: auto, none, text, all

4. Resize

Controls if and how an element is resizable by the user (mostly for <textarea>).

textarea {  resize: both; /* allow resizing both horizontally and vertically */}

Values: none, both, horizontal, vertical

5. Pointer-events

Controls whether an element reacts to pointer events (mouse, touch).

button.disabled {  pointer-events: none; /* disables clicking */  opacity: 0.5;}

Values: auto, none

6. Tabindex and Focus Styling (Accessibility)

While tabindex is an HTML attribute, styling focused elements enhances UI.

button:focus {  outline: 3px solid orange;  outline-offset: 2px;}

7. Visibility and Display

Control UI element visibility:

.hidden {  visibility: hidden; /* element hidden but space reserved */}.invisible {  display: none; /* element removed from flow */}

Example: Stylish Button UI

button {  padding: 10px 20px;  background: #007bff;  border: none;  color: white;  cursor: pointer;  border-radius: 4px;  transition: background 0.3s ease;}button:hover {  background: #0056b3;}button:disabled {  background: #aaa;  cursor: not-allowed;  pointer-events: none;}

Would you like a ready-made UI component style guide or examples of accessible UI with CSS?