0
0
CSSmarkup~5 mins

Common UI use cases in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

CSS helps style web pages to look nice and easy to use. Common UI use cases show how to make buttons, forms, and layouts that people expect.

When you want a button that changes color when hovered.
When you need a simple responsive navigation menu.
When you want to style form inputs for better user experience.
When you want to create a card layout to show content clearly.
When you want to align items horizontally or vertically.
Syntax
CSS
selector {
  property: value;
}
Use selectors to pick HTML elements to style.
Properties control colors, sizes, spacing, and layout.
Examples
This styles a button with blue background and white text. On hover, the background becomes dark blue.
CSS
button {
  background-color: blue;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

button:hover {
  background-color: darkblue;
}
This creates a horizontal navigation bar with space between links.
CSS
nav {
  display: flex;
  gap: 1rem;
  background-color: #eee;
  padding: 1rem;
}
This styles text input fields with border and padding for easier typing.
CSS
input[type='text'] {
  border: 1px solid #ccc;
  padding: 0.5rem;
  border-radius: 0.25rem;
  width: 100%;
  max-width: 300px;
}
This styles a card with border, shadow, and padding to highlight content.
CSS
.card {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-width: 300px;
}
Sample Program

This example shows a navigation bar, a styled text input, a button with hover effect, and a card layout. It uses semantic HTML and accessible labels.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Common UI Use Cases</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
      background-color: #f9f9f9;
    }
    nav {
      display: flex;
      gap: 1rem;
      background-color: #eee;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    nav a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }
    nav a:hover {
      color: #0077cc;
    }
    button {
      background-color: #0077cc;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 0.25rem;
      cursor: pointer;
      font-size: 1rem;
      margin-top: 1rem;
    }
    button:hover {
      background-color: #005fa3;
    }
    input[type='text'] {
      border: 1px solid #ccc;
      padding: 0.5rem;
      border-radius: 0.25rem;
      width: 100%;
      max-width: 300px;
      font-size: 1rem;
      margin-top: 1rem;
      display: block;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      max-width: 300px;
      background-color: white;
      margin-top: 2rem;
    }
  </style>
</head>
<body>
  <nav aria-label="Main navigation">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>

  <input type="text" aria-label="Search input" placeholder="Search..." />

  <button type="button">Click me</button>

  <section class="card" aria-label="Example card">
    <h2>Card Title</h2>
    <p>This is a simple card to show content clearly with padding and shadow.</p>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use semantic HTML elements like <nav>, <section>, and <button> for better accessibility.

Use relative units like rem for padding and font sizes to help with responsiveness.

Always add aria-label or other accessibility attributes when needed for screen readers.

Summary

CSS styles common UI parts like buttons, navigation, inputs, and cards.

Use hover effects and spacing to improve user experience.

Semantic HTML and accessibility attributes make your UI friendly for everyone.