34 docs tagged with "css"

Position tooltips and menus with CSS anchor positioning and the Popover API - anchor(), position-area, position-try, anchor-size(), popover=hint, and when JavaScript still wins.

Organising CSS for maintainability - BEM naming, file structure, CSS resets vs normalisers, utility classes, component-scoped styles, and preprocessor overview.

CSS background images, gradients, background shorthand, border-radius for rounded corners, box-shadow, text-shadow, and multiple backgrounds.

A super-beginner, start-to-finish tutorial for building a simple blog page using only HTML, CSS, and vanilla JavaScript - with an optional section on adding Vite later.

Control the cascade with @layer patterns and encapsulate component styles with @scope - how they compare to BEM, specificity wars, and !important.

Client libraries (clientlibs) are AEM's mechanism for managing CSS and JavaScript delivery. They provide

CSS colour formats (named, hex, rgb, hsl), opacity, font properties, text styling, web-safe fonts, and loading Google Fonts.

Skip rendering off-screen content with content-visibility and contain-intrinsic-size - when it helps, accessibility caveats, and how it pairs with general web performance advice.

Make components respond to their own slot size with CSS container queries. Interactive demos, the core API, and when to prefer them over media queries or device width.

CSS custom properties (variables) - defining, using, scoping, fallback values, theming, building a dark mode toggle, and dynamic updates with JavaScript.

CSS Grid layout - defining rows and columns, the fr unit, grid areas, gap, auto-fit/auto-fill, minmax(), and implicit vs explicit grids.

Production rules for native CSS nesting - & usage, specificity, nesting media queries, and how native nesting differs from Sass.

Using browser DevTools to debug CSS, understanding margin collapse, overflow issues, centring gotchas, z-index problems, and cross-browser testing.

How CSS display modes (block, inline, inline-block) and positioning (static, relative, absolute, fixed, sticky) control element flow and placement.

CSS Flexbox layout - flex containers and items, direction, wrapping, alignment, sizing with flex-grow/shrink/basis, gap, and common patterns.

Learn enough HTML and CSS to build web pages - document structure, semantic elements, forms, CSS selectors, the box model, flexbox, and responsive design.

What CSS is, how it works with HTML, the three ways to add styles, the anatomy of a CSS rule, writing your first stylesheet, and a quick look at browser DevTools.

Build direction-aware layouts with CSS logical properties - inset, margin-inline, padding-block, inline-size, and how they map to physical top/right/bottom/left.

Perceptually uniform colour with oklch/oklab, color-mix(), relative colour syntax, light-dark(), color-scheme, and contrast-aware theming tips.

Recent CSS additions - native nesting, the :has() selector, container queries, @layer, logical properties, color-mix(), accent-color, and subgrid.

Build modals and light-dismiss overlays with the HTML dialog element, invoker commands, and CSS - without a JavaScript modal library.

Hands-on CSS projects from beginner to advanced - profile card, navigation, gallery, landing page, dashboard, CSS art, scroll-snap carousel, and anchored tooltip.

Build a multi-page vanilla JavaScript website from scratch - navigation, theme toggle, form validation, dynamic content, and local storage.

CSS pseudo-classes for targeting element states (:hover, :focus, :nth-child) and pseudo-elements for creating virtual content (::before, ::after).

Building layouts that work on every screen size - the viewport meta tag, media queries, mobile-first development, breakpoints, responsive images, and fluid typography.

Build CSS-only carousels and galleries with scroll-snap, overflow scrolling, and progressive enhancement - without a carousel library.

Drive CSS animations from scroll progress with animation-timeline, scroll(), and view() - ranges, progressive enhancement, and when IntersectionObserver still wins.

How CSS targets HTML elements - element, class, ID, universal, grouping, descendant, child, sibling, and attribute selectors.

How CSS decides which rule wins - the cascade algorithm, specificity calculation, inheritance, the !important keyword, and cascade layers.

How browsers calculate element sizes using the CSS box model - content, padding, border, margin, box-sizing, and debugging with DevTools.

CSS transitions for smooth state changes, transform functions (translate, rotate, scale, skew), keyframe animations, timing functions, and performance tips.

Register CSS custom properties with @property for type checking, inheritance control, initial values, and animating custom properties smoothly.

CSS length units - px, em, rem, percentages, viewport units, and when to use each one for font sizes, spacing, and layout.

Animate between UI states with the View Transitions API - same-document transitions, view-transition names, pseudo-elements, reduced motion, and a brief look at cross-document MPA support.