CSS Tutorial

CSS User Interface

Last modified on: November 1, 2024

<h3>CSS User Interface (UI) Overview</h3>
<p>CSS user interface properties help control and improve interactions within a web page, enhancing both usability and aesthetics. These properties cover elements like cursors, outlines, resizing behavior, and scrollbars, contributing to a seamless user experience.</p>
<h3>Common CSS UI Properties</h3>
<ol>
<li><strong><code>cursor</code></strong>: Changes the cursor appearance when hovering over elements.</li>
<li><strong><code>outline</code></strong>: Defines an outline around elements, often used for accessibility focus states.</li>
<li><strong><code>resize</code></strong>: Controls the resizing behavior of elements.</li>
<li><strong><code>box-sizing</code></strong>: Adjusts the calculation of an element&rsquo;s dimensions, including padding and border.</li>
<li><strong><code>overflow</code></strong>: Manages content overflow in containers.</li>
</ol>
<h3>Example 1: Cursor Styles</h3>
<p>The <code>cursor</code> property changes the cursor type when it hovers over an element, improving user interaction.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>button {
  cursor: pointer; /* Shows a pointer cursor over buttons */
}

a {
  cursor: help; /* Shows a help cursor on hover */
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Available cursor values include <code>pointer</code>, <code>crosshair</code>, <code>help</code>, <code>wait</code>, <code>zoom-in</code>, and more.</p>
<h3>Example 2: Outline Property for Accessibility</h3>
<p>The <code>outline</code> property is especially useful for focus styles on interactive elements, helping users navigate via keyboard and other accessibility tools.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>button {
  outline: 2px dashed #5b9dd9; /* Blue dashed outline for keyboard focus */
}

button:focus {
  outline: 3px solid #005f5f; /* Solid outline when focused */
}
</code></pre>
</div>
</div>
</div>
</div>
<p>This provides a visual indicator around focused elements, making them more accessible.</p>
<h3>Example 3: Resize Property for Flexible Containers</h3>
<p>The <code>resize</code> property allows users to adjust the size of elements, commonly applied to text areas.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>textarea {
  resize: both; /* Allows resizing horizontally and vertically */
  overflow: auto;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Options for <code>resize</code> include <code>both</code>, <code>horizontal</code>, <code>vertical</code>, and <code>none</code>.</p>
<h3>Example 4: Box-Sizing Property</h3>
<p>The <code>box-sizing</code> property determines how the width and height of elements are calculated, affecting layout stability.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>* {
  box-sizing: border-box;
}
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong><code>border-box</code></strong> includes padding and border in the element&rsquo;s dimensions, making layout calculations easier and more consistent.</li>
</ul>
<h3>Example 5: Overflow Property for Content Management</h3>
<p>The <code>overflow</code> property manages the display of content that exceeds an element's box dimensions.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>div {
  overflow: auto; /* Adds a scrollbar for overflowed content */
  max-height: 200px;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Values include <code>visible</code>, <code>hidden</code>, <code>scroll</code>, and <code>auto</code>.</p>
<h3>Example 6: Appearance Property (Browser-Specific)</h3>
<p>The <code>appearance</code> property allows you to override the default style of certain UI elements (such as form elements) for a more customized look.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>button {
  appearance: none; /* Removes default button styling */
}
</code></pre>
</div>
</div>
</div>
</div>
<p>This property can vary by browser and is most often used to remove default styles on form controls.</p>
<hr />
<h3>Full Example: Styling a Custom Text Area with UI Properties</h3>
<p>Here&rsquo;s a complete example to combine multiple UI properties for a customized text area element:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.custom-textarea {
  box-sizing: border-box;
  resize: vertical;
  cursor: text;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.custom-textarea:focus {
  outline: 2px solid #4a90e2;
}
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;textarea class="custom-textarea" placeholder="Enter your text here..."&gt;&lt;/textarea&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>box-sizing</code> ensures padding doesn&rsquo;t affect the total width.</li>
<li><code>resize</code> is set to vertical, allowing users to expand the text area vertically only.</li>
<li><code>outline</code> and <code>cursor</code> make the text area accessible and interactive.</li>
</ul>
<hr />
<h3>Summary</h3>
<p>CSS user interface properties play a critical role in web design, enhancing interactivity and accessibility. From changing cursor styles to managing element resizing, these properties help create a user-friendly experience on your website.</p>

Web Technology View More