allthingssmitty/css-protips

★ 30,034Audience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((css-protips))
    What it does
      CSS best practices
      Browser consistency
      Layout techniques
      Code examples
    Topics covered
      Centering elements
      Aspect ratios
      Font sizing
      Selectors
    Skill levels
      Beginner tips
      Advanced selectors
    Use cases
      Web development
      Code reference
    Audience
      Frontend developers
      Web designers

mindmap root((css-protips)) What it does CSS best practices Browser consistency Layout techniques Code examples Topics covered Centering elements Aspect ratios Font sizing Selectors Skill levels Beginner tips Advanced selectors Use cases Web development Code reference Audience Frontend developers Web designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Look up a clean, modern way to center an element vertically on a page without hacking margins or using old tricks.

USE CASE 2

Reset browser default styles so a webpage looks consistent across Chrome, Firefox, and Safari without fighting style conflicts.

USE CASE 3

Find the correct CSS technique for maintaining an image's aspect ratio automatically as the container resizes.

USE CASE 4

Learn how to use relative font-size units so text scales properly on all screen sizes without setting it on every element separately.

Getting it running

Difficulty · easy Time to first run · 5min

No installation required, this is a reference collection, copy the CSS snippets directly into any project.

In plain English

CSS Protips is a curated list of practical tips for writing better CSS, the language used to control the visual appearance of web pages. CSS (Cascading Style Sheets) handles things like colors, fonts, layout, and spacing, but it has many quirks and less-obvious features that can trip up developers or lead to messy, hard-to-maintain code. Each tip in the collection addresses a specific situation. For example, one explains how to reset default browser styles so your page looks consistent across different browsers. Another shows how to center an element vertically on a page using modern layout techniques. Others cover topics like maintaining the correct aspect ratio for images, applying borders to all navigation items except the last one without writing two conflicting rules, hiding autoplay videos that are not muted, and using relative units for font sizes to make text scale properly on different screen sizes. The tips range from beginner-friendly basics (add a line height to the body element once rather than repeating it for each text element) to more advanced selectors and CSS features. Each tip includes a brief explanation of the problem it solves and a small code example showing the solution, along with links to interactive demos. You would use this as a reference when building or maintaining a website and wanting to do things the cleaner or more correct way, rather than reaching for a workaround. It is plain CSS documentation, no specific programming language or framework is required.

Copy-paste prompts

Prompt 1

Using techniques from CSS Protips, show me how to perfectly center a div both vertically and horizontally inside its parent container using modern CSS, with no hacks.

Prompt 2

I want to add a dividing line between navigation items but not after the last one. Show me the CSS selector trick from CSS Protips that handles this cleanly without adding a class to the last item.

Prompt 3

How do I use the CSS inherit value trick from CSS Protips to reset box-sizing for all elements in a way that still respects third-party widget styles?

Prompt 4

Show me how to use a CSS custom property and the padding-top percentage trick to force an element to always maintain a 16:9 aspect ratio regardless of its width.

Open on GitHub → Explain another repo

← allthingssmitty on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.