Photo by Taiki Ishikawa on Unsplash

Star Rating Design Using HTML and CSS

Create a modern, responsive star rating component using HTML and CSS, featuring a row of stars to display a rating (e.g., 3 out of 5 stars) with clear visual feedback. This static implementation focuses on clean design, accessibility, and maintainable code structure, suitable for product reviews or feedback forms. JavaScript can be added for interactivity (e.g., user rating selection).

Rating: 3/5

★ ★ ★ ★ ★

Prerequisites

• Basic HTML and CSS knowledge
• A code editor (e.g., VS Code)

Part 1: Star Rating Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the star rating with a container, title, and star elements.

><div class="star-rating-container" role="img" aria-label="3 out of 5 stars">
    <div class="star-rating-title">Rating: 3/5</div>
    <div class="star-rating">
        <span class="star filled" role="presentation" tabindex="0" aria-hidden="true">★</span>
        <span class="star filled" role="presentation" tabindex="-1" aria-hidden="true">★</span>
        <span class="star filled" role="presentation" tabindex="-1" aria-hidden="true">★</span>
        <span class="star" role="presentation" tabindex="-1" aria-hidden="true">★</span>
        <span class="star" role="presentation" tabindex="-1" aria-hidden="true">★</span>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the star rating with clear visual states and responsive design.

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --star-color: #facc15;
    --star-empty-color: #d1d5db;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.star-rating-container {
    max-width: 300px;
    width: 100%;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    text-align: center;
}

.star-rating-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: var(--spacing-md);
}

.star-rating {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.star {
    font-size: 1.5rem;
    color: var(--star-empty-color);
    transition: color var(--transition);
    cursor: default;
}

.star.filled {
    color: var(--star-color);
}

.star:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

@media (max-width: 640px) {
    .star-rating-container {
        width: 95%;
        padding: var(--spacing-md);
    }

    .star-rating-title {
        font-size: 1rem;
    }

    .star {
        font-size: 1.25rem;
    }
}

Explanation

• Layout: A container holds a title and a flexbox row of five star elements, centered with gaps for spacing.
• Styling: Stars are styled with Unicode star characters (★), using --star-color (gold) for filled stars and --star-empty-color (gray) for empty ones. The container has a white background, shadow, and rounded corners.
• Visual Feedback: Filled stars indicate the rating (3/5 in the demo). Focus states use a blue ring for keyboard navigation.
• Responsiveness: A media query (@media (max-width: 640px)) reduces the container size, padding, and star size for mobile usability.
• Accessibility: role="img" and aria-label="3 out of 5 stars" describe the rating for screen readers. role="presentation" and aria-hidden="true" on stars prevent redundant reading. The first star is focusable with tabindex="0".

UX Tip: Ensure the star rating is visually clear with distinct filled and empty states. Use ARIA attributes to communicate the rating to screen readers. Add JavaScript in production for interactive rating selection and dynamic updates.

Accessibility Features

• Use role="img" and aria-label for semantic structure
• Ensure high contrast ratios for stars (4.5:1 minimum)
• Support keyboard navigation with tabindex and focus states
• Use role="presentation" and aria-hidden="true" for decorative stars

Golden Rules

• Use CSS variables for consistent theming
• Implement focus states and ARIA for accessibility
• Provide clear visual distinction between filled and empty stars
• Optimize for mobile with responsive design

Conclusion

A professional star rating component should maintain visual clarity, provide intuitive styling, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for a polished static rating display, showing 3 out of 5 stars. Experiment with star sizes, colors, or add JavaScript for interactivity like user rating selection. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!