Welcome to CSS Candy!

Discover free CSS tutorials and resources tailored for beginners and intermediates. Start your coding journey today!

Learn CSS Online Free Tools

Basics

Introduction

CSS is a styling language for web pages, defining layout and appearance.

Syntax

CSS syntax consists of rules and declarations, with comments written between /* and */, used to structure styles.

Selectors

CSS selectors target elements using element, class, ID, and [data-*] attributes.

Combinators

CSS combinators like >, +, and ~ connect selectors for precise targeting.

Specificity

CSS specificity determines style priority, with !important as a last resort.

Cascade

CSS cascade governs style application, prioritizing specificity and inheritance.

Colors

CSS colors use hex, RGB, HSL, and named keywords for styling elements.

Units

CSS units include px, rem, vw, %, vh, and vw for flexible sizing.

How To

CSS is added via inline, internal, or external methods for styling.

Outline

CSS outlines style element borders with outline-style, independent of box model.

Backgrounds

CSS backgrounds set color and images, with background-size for control.

Borders

CSS borders define width, style, and color, with border-radius for curves.

Display

CSS display uses block, inline, none, and inline-block for layout.

Visibility

CSS visibility controls element display with visible, hidden, and opacity.

Overflow

CSS overflow manages content with visible, hidden, and scroll, including x/y.

Margin

CSS margins space elements, supporting negative values for overlap.

Padding

CSS padding spaces content within elements, using shorthand syntax.

Border

CSS borders frame elements, referencing width, style, and radius properties.

Box-Sizing

CSS box-sizing sets content-box or border-box, with global reset options.

Width and Height

CSS width and height define sizes, with max-width for constraints.

Font Family

CSS font families use system or web fonts, with font stack fallbacks.

Font Weight

CSS font weight sets normal, bold, or numeric values like 700.

Text Align

CSS text alignment uses left, center, or justify, with text-align-last.

Line Height

CSS line height adjusts spacing, using unitless values for scalability.

Text Decoration

CSS text decorations add underline or overline, with color control.

Text Transform

CSS text transform sets uppercase or capitalize for text styling.

Letter Spacing

CSS letter spacing adjusts character gaps, with word-spacing for words.

Links

CSS links style <a> tags with :hover and :visited for interactivity.

Lists

CSS lists style <ul> and <ol> with list-style for customization.

Float

CSS float positions elements left or right, with clear to manage flow.

Flexbox

CSS flexbox creates flexible layouts with display: flex and flex-wrap.

Grid

CSS grid builds layouts with display: grid and grid-template settings.

Multi-Column

CSS multi-column layouts use column-count and column-gap for text flow.

Position Relative

CSS position relative offsets elements, with z-index for stacking.

Position Absolute

CSS position absolute places elements precisely, using containing blocks.

Position Fixed

CSS position fixed locks elements to the viewport, noting scroll issues.

Position Sticky

CSS position sticky holds elements during scroll, with browser support.

Z-Index

CSS z-index controls element stacking, with stacking context rules.

Media Queries

CSS media queries adapt layouts using min-width and max-width conditions.

Responsive Units

CSS responsive units like rem, em, and vw ensure scalable designs.

Viewport Meta

CSS viewport meta tag uses device-width for mobile responsiveness.

Container Queries

CSS container queries size components based on parent dimensions.

Aspect Ratio

CSS aspect-ratio maintains proportions, with fallbacks for older browsers.

Responsive Videos

CSS responsive videos use aspect-ratio for adaptive sizing.

Transitions

CSS transitions smooth property changes, with timing function control.

Animations

CSS animations use @keyframes for dynamic effects, with custom timing.

Transforms

CSS transforms apply 2D/3D effects like rotate, with transform-origin.

Filter Effects

CSS filter effects like blur impact visuals, noting performance costs.

Clip Path

CSS clip-path clips elements using polygon() for custom shapes.

Gradients

CSS gradients create linear or radial color transitions for backgrounds.

Shadows

CSS shadows use box-shadow and text-shadow for depth and emphasis.

:hover

CSS :hover styles elements on mouseover, considering touch devices.

:focus

CSS :focus styles focused elements, with :focus-visible for accessibility.

:active

CSS :active styles elements during activation, like button clicks.

:nth-child

CSS :nth-child selects elements by position, including odd or even.

:not

CSS :not excludes elements, impacting specificity in selectors.

:first-child

CSS :first-child targets first children, with :last-child for last.

::before

CSS ::before adds content via content property, enhancing design.

::after

CSS ::after adds content, including ::marker for list styling.

calc

CSS calc() performs calculations for dynamic sizing, supporting nesting.

var

CSS var() uses custom properties like --variable, with fallbacks.

min and max

CSS min() and max() set responsive values, with clamp() for balance.

attr

CSS attr() uses data attributes for dynamic styling, like content.

@property

CSS @property defines custom property types for advanced styling.

Focus Management

CSS focus management ensures accessible outlines for keyboard users.

Color Contrast

CSS color contrast meets WCAG guidelines for readable text.

Semantic Styling

CSS semantic styling enhances HTML with ARIA for accessibility.

Keyboard Navigation

CSS keyboard navigation supports focusable elements for accessibility.

Centering Elements

CSS centering uses flex, grid, or margin for horizontal and vertical alignment.

Sticky Footer

CSS sticky footer ensures footers stay at page bottom using min-height.

Card Layout

CSS card layouts use box-shadow and flex for modern component styling.

Navigation Bar

CSS navigation bars create responsive menus with toggle functionality.

Grid System

CSS grid systems use grid-template-columns for responsive layouts.

Dark Mode

CSS dark mode uses prefers-color-scheme and custom properties.

Tooltip Styling

CSS tooltips use pseudo-elements and absolute positioning for popups.

Button Styling

CSS button styling includes hover, active, and disabled states.

Responsive Images

CSS responsive images use object-fit for adaptive sizing.

Modal Dialog

CSS modal dialogs use fixed positioning and backdrop styling.

Pagination

CSS pagination styles page links with active and hover states.

Icons

CSS icons integrate Font Awesome or SVG for scalable graphics.

User Interface

CSS user interface properties like cursor enhance interactivity.

object-position

CSS object-position aligns images within containers for precise display.

Masking

CSS masking uses mask-image to create custom element shapes.

Basic Layout

CSS basic layout uses flexbox for simple, flexible page structure.

Responsive Navbar

CSS responsive navbar includes a hamburger menu for mobile.

Card Component

CSS card component styles images and text with hover effects.

Grid Gallery

CSS grid gallery uses grid with gap property for photo layouts.

Flex Layout

CSS flex layout uses flex-grow for dynamic content arrangement.

Sticky Header

CSS sticky header uses position: sticky for fixed navigation.

Animated Button

CSS animated button uses transitions for hover effect animations.

Modal Popup

CSS modal popup includes animations and a close button.

Form Styling

CSS form styling enhances inputs with focus states for responsiveness.

Tooltip

CSS tooltip uses ::after and data attributes for popups.

Hero Section

CSS hero section uses background-image for full-width visuals.

Footer Layout

CSS footer layout uses grid or flexbox for multi-column design.

Dropdown Menu

CSS dropdown menu activates on hover with :hover styling.

Accordion

CSS accordion uses :checked hack for collapsible sections.

Tab Navigation

CSS tabbed navigation uses radio inputs for tab switching.

Image Carousel

CSS image carousel uses overflow: hidden for slide transitions.

Progress Bar

CSS progress bar uses animations for dynamic progress display.

Loading Spinner

CSS loading spinner uses @keyframes for spinning animations.

Responsive Table

CSS responsive table uses overflow-x for mobile-friendly tables.

Blog Layout

CSS blog layout includes a sidebar with grid or flexbox.

Portfolio Grid

CSS portfolio grid uses grid-template for project showcases.

Testimonial Slider

CSS testimonial slider uses transform for sliding effects.

Search Bar

CSS search bar styles inputs with focus states for usability.

Error Message

CSS error messages use visibility for dynamic display.

Call to Action

CSS call to action button includes hover effects for engagement.

Social Icons

CSS social icons use font icons or SVGs for social links.

Browser Support

CSS browser support ensures compatibility across Chrome, Firefox, Safari.

Counters

CSS counters number elements automatically, ideal for lists or sections.

Border Images

CSS border images use border-image for decorative borders.

Welcome to CSS Candy!

Basics

Box Model

Typography

Layout

Positioning

Responsive Design

Animations

Pseudo-Classes/Elements

Functions & Variables

Accessibility

Patterns

Examples