23 docs tagged with "css"

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.

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.

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.

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.

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

Six hands-on CSS projects from beginner to advanced - personal profile card, navigation bar, photo gallery, landing page, dashboard layout, and CSS art.

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.

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.

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