Search pages

Search all CSS Showcase pages by name

Basic CSS

The foundation of web styling — where every brilliant design begins

Why CSS Matters

Toggle between raw HTML and styled HTML to see the dramatic difference CSS makes. The same content, transformed by a few dozen lines of styling.

Welcome to My Website

This is an example paragraph showing the difference CSS makes. Without styling, HTML elements use the browser's default appearance.

“CSS is the language that brings beauty to the web.”

With CSS: custom fonts, colours, spacing, and visual hierarchy transform raw content into a designed experience.

CSS Selectors

Selectors are the backbone of CSS — they let you target HTML elements with surgical precision. From simple element selectors to complex pseudo-selectors, mastering these is essential.

Element Selectors

This paragraph is styled with an element selector

This span has different styling
css
Class Selectors

Classes add reusable styles

Multiple classes? No problem!

Different class, different style

css
ID Selectors

IDs are unique — use sparingly!

Prefer classes for reusability

css
Attribute Selectors
css
Pseudo-class Selectors
  • First item (special styling)
  • Regular item
  • Regular item
  • Last item (special styling)
css
Combinators

Direct child paragraph

Nested paragraph (descendant)

Another direct child

Adjacent sibling
css

Essential CSS Properties

CSS properties are the tools that bring your designs to life. Here are the fundamental properties every developer should master.

Colour Properties

Hex colour: #2563eb

RGB: rgb(37, 99, 235)

HSL: hsl(217, 91%, 60%)

Gradient background

css
Typography Properties

Bold and Large

Italic with letter spacing

Uppercase text

This paragraph has increased line height for better readability. Notice how the text breathes with proper spacing.

css
Display Properties
Block element (full width)Inline elements flowInline-block combines bothHidden element
css

The Cascade & Specificity

Understanding how CSS rules cascade and which styles take precedence is crucial for writing maintainable stylesheets. It's like a pecking order for your styles!

Specificity Calculator

Which colour wins? (Hint: it's green!)

css
Inheritance
Parent element

Child inherits colour and font-size

But can override inherited styles

css
!important (Use Sparingly!)

This text is red, despite other rules

css

CSS Units

Choosing the right unit is like picking the right tool for the job. From pixels to percentages, each has its perfect use case.

Absolute Units
200px wide
15rem wide
100% wide
css
Relative Units
100% of parent
50% of parent
1.5em font, 1em padding
css
Modern Units
min(100%, 400px)
clamp(120px, 50%, 400px)
20ch wide (character units)
css

Pro Tips

Start with a Reset

Use a CSS reset or normalise stylesheet to ensure consistent styling across browsers.

Specificity Over !important

Instead of reaching for !important, understand and use specificity properly.

REM for Consistency

Use REM units for sizes to respect user's font preferences and ensure scalability.

Ready for More?

You've mastered the basics! Time to explore how these fundamentals come together in more complex scenarios.

Box Model

Understand spacing, borders, and element dimensions

Typography

Create beautiful, readable text designs