Customize Styles

16px
5px
palette

WAD621S Interactive Web Application Styling Lab

Experiment with various UI components and see how styling affects their appearance and behavior

schedule

Current Time

00:00:00
Loading date...
calendar_month

Calendar

Month
emoji_emotions

How are you feeling?

😄 🙂 😐 😢 😤
Select your mood
Components
Code
Customize

Challenge Instructions

In this lab, you'll practice styling various UI components. For each section:

  1. Examine the HTML structure of the component
  2. Write CSS rules to style the component according to the specifications
  3. Test your styles by previewing in a browser
  4. Use developer tools to debug and refine your styles

Note: Some basic styles are provided, but you need to implement the component styles yourself.

Cards

Cards are versatile containers for displaying content composed of different elements.

Card Image

Card Title

This is a basic example of a card component with an image and some text content.

Card Image

Second Card

Cards can contain various content types like images, text, buttons, and more (Your imagination is the limit).

Text Only Card

This card doesn't have an image but still provides a clean container for your content with a clear call to action.

Buttons

Buttons allow users to take actions and make choices with a single tap.

Dropdown Button

Option 1 Option 2 Option 3

Chips

Chips are compact elements that represent an input, attribute, or action.

restaurant Food
local_cafe Coffee
fitness_center Gym
movie Movies ×
shopping_bag Shopping

Sliders

Sliders allow users to select a value from a range by moving a thumb along a track.

45%
80%
100%

Switch Buttons

Switch buttons toggle the state of a single setting on or off.

Wi-Fi Enabled
Bluetooth
Dark Mode

Lists

Lists present multiple line items vertically as a single continuous element.

  • inbox Inbox 12
  • star Starred
  • send Sent 5
  • drafts Drafts
  • delete Trash

Forms

Forms allow users to enter and submit data through various input types.

Subscribe to newsletter

Tables

Tables are used to display structured data in rows and columns.

Name ↕ Email ↕ Role ↕ Status ↕ Actions
Wilfried Kongolo wkongolo@nust.na Admin Active
Jane Smith jane@example.com Editor Active
Josephine Muuntumo jmuuntumo@nust.na Author Pending
Sarah Williams sarah@example.com Subscriber Active

Alerts

Alerts display important messages to users with different severity levels.

check_circle
Your action was completed successfully!
×
warning
Warning: There was a problem with your request.
×
info
Information: Please read the instructions carefully.
×

Progress Bars

Progress bars show the completion status of a task or process.

45% Complete

70% Complete

30% Complete

Pagination

Pagination divides content into separate pages and allows navigation between them.

Breadcrumbs

Breadcrumbs show the current page's location within a navigational hierarchy.

Tooltips

Tooltips display additional information when users hover over an element.

Hover over the following text to see a tooltip: Tooltip exampleThis is a tooltip

Accordion

Accordions allow users to toggle the display of sections of content.

What is HTML? expand_more

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

What is CSS? expand_more

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML.

What is JavaScript? expand_more

JavaScript is a programming language that enables interactive web pages and is an essential part of web applications.

Modal

Modals are dialog boxes/popup windows that are displayed on top of the current page.

CSS Code Examples

Here are some CSS code snippets for the components you've seen:

Button Styles

/* Basic button style */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: var(--transition);
}

/* Hover effect */
.btn:hover {
  background-color: var(--secondary);
}

/* Outline variant */
.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--white);
}

Card Styles

/* Card container */
.card {
  background-color: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

/* Hover effect */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Card content */
.card-content {
  padding: 20px;
}

Customization Guide

Learn how to customize the appearance of web components using CSS variables and properties.

CSS Variables

CSS variables (custom properties) allow you to define reusable values throughout your stylesheet:

/* Define CSS variables in :root */
:root {
  --primary: #4361ee;
  --secondary: #3a0ca3;
  --success: #4cc9f0;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Use CSS variables */
.btn {
  background-color: var(--primary);
  transition: var(--transition);
}

Box Shadow

Box shadows add depth and dimension to elements:

/* Basic shadow */
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Deeper shadow for hover effect */
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

Transitions

Transitions create smooth animations between state changes:

/* Apply to all properties */
.btn {
  transition: all 0.3s ease;
}

/* Apply to specific properties */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}