CSS Tips by Theo Soti for Web and Frontend Developers

Learn how CSS safe area insets keep your UI visible on phones with notches, rounded corners, and gesture bars, with broad browser support.

CSS media queries now support range operators like ≤ and ≥.

Create a back to top button with HTML and CSS using native smooth scrolling.

Say goodbye to default dropdowns.

Limit text to multiple lines with ellipsis using pure CSS.

Use object-view-box in CSS to crop and zoom images precisely—no image editing, just clean, flexible layout control.

Use shape-outside in CSS to wrap text around custom image shapes—no JavaScript, just clean, creative layout control.

Create a smooth, accessible autoplay carousel using only CSS—no JavaScript, no libraries, and zero layout shifts.

Build tooltips, modals, and popups using the HTML Popover API—no JavaScript needed, fully accessible, and widely supported.

Easily customize checkboxes, radios, sliders, and more using accent-color—no wrappers, no JavaScript, fully accessible.

Learn the 4 focus states in CSS.

Use translate, rotate, and scale as separate CSS properties for cleaner, modular, and easier-to-maintain animations.

Make components truly responsive with CSS container queries.

Use @view-transition to create crossfade effects between pages—no JavaScript, just clean, progressive CSS.

Enhance anchor navigation with smooth scrolling and better section spacing using pure CSS—no JavaScript required.

Build clean, animated gradient borders using only CSS—no extra elements, fully responsive, and JavaScript-free.

Add editorial flair to paragraphs using :first-letter and initial-letter in CSS—no extra markup, just clean, elegant styling.

Use the new calc-size() CSS function to size elements dynamically from layout and attribute values—no JS, just responsive, flexible UI.

Use background-clip: text and keyframes to animate gradients on text—no JavaScript needed, fully CSS-powered, and smooth across modern browsers.

Use text-box-trim and text-box-edge to remove excess space around text for cleaner UI layouts—perfect for buttons, labels, and tight spacing.

Improve form usability using for autocomplete suggestions—lightweight, accessible, flexible, and fully supported in modern browsers.

Use the HTML element for accessible, stylable modals with built-in focus trap, keyboard support, and native transitions—no extra JS needed.

Let inputs and textareas resize to fit content automatically using field-sizing: content—no JavaScript needed, with growing browser support.

Unlock the full power of modern CSS with color functions like oklab(), color-mix(), and color-contrast() for vibrant, accessible, future-ready designs.

Control style priority and prevent overrides using CSS Layers—an organized, scalable way to manage specificity in modern stylesheets.

Use text-align-last to style only the final line of a paragraph—combine it with justified text for elegant layouts, supported by 95% of browsers.

Simplify your Flexbox code with 4 powerful CSS shorthands.

Discover 4 practical CSS snippets: circle shapes, text truncation, centering, and responsive grids.

Create a pure CSS countdown from 10 to 0 using custom properties, keyframes, and pseudo-elements—no JavaScript required, with over 92% browser support.

Simplify complex CSS selectors with :is() and :where() for cleaner styles and easier specificity management with broad browser support.

Go beyond basic underlines with powerful CSS text-decoration properties like thickness, color, style, and offset.

Learn how to create a live counter using only CSS with properties like counter-reset, counter-increment, and content: counter().

Discover 5 powerful CSS features that simplify your code, like inset, scale, :is(), and more.

Discover how @starting-style enables keyframe-free CSS animations—even on DOM entry.

Use container queries to build modern CSS components that respond to their own space, not only the viewport, with layouts you can reuse.

Use display: contents to restructure layouts without extra markup.

Achieve a smooth inverted hover effect using CSS :has()—no JavaScript, no hacks!

Say goodbye to awkward text wrapping!

Make your text stand out with a simple CSS trick!

Enhance user experience with scroll-behavior: smooth in CSS—no JavaScript needed!

Enhance your typography with CSS text gradients!

Create a before/after image slider with just 1 line of JavaScript!

Learn how CSS Anchor Positioning makes UI layout easier by allowing elements to be positioned dynamically—no more complex JS or layout shifts!

Create a scroll-synced progress bar using pure CSS and animation-timeline—no JavaScript needed.

Validate forms with CSS!

Explore the enhanced CSS attr() function in Chrome 133—now supporting all properties and data types for more dynamic, JS-free styling possibilities.

Responsive layouts in one line of CSS?

Target a precise range of elements with :nth-child().

Writing CSS selectors can be tedious, especially when repeating long lists of elements.

Prevent 100vh layout shifts with new CSS viewport units (svh, lvh, dvh).