dev.rean.me
css

CSS Tips and Tricks with Examples

CSS Tips and Tricks with Examples. A step-by-step guide on how to create HTML dropdown lists using select, option, and optgroup tags with attributes and video tutorials in Khmer.

2026-08-25 · 16 min read

#css#tips#tricks
Share:

hello everyone! today let me share you some css tips and tricks along with examples. I hope you can learn something useful from this post.

1. Use box-sizing: border-box Globally

when you set width 200px, browser maybe make it bigger because of padding. use this to fix that problem!

*, *::before, *::after {
  box-sizing: border-box;
}

tip: put this at very top of your css file. always. every project.

2. Use CSS Variables

instead of type same color many time, you save it one place. easy to change later!

:root {
  --color-primary: #3b82f6;
  --color-text: #1f2937;
  --spacing-md: 1rem;
}

button {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
}

tip: use :root for global variable. if you change one variable, everything update automatic.

3. Use max-width for Readable Content

if text go too wide, people hard to read. keep line not too long!

.content {
  max-width: 65ch; /* 65 character wide is good for reading */
  margin: 0 auto;
}

tip: 65ch mean 65 character width. very good for blog post or article text.

4. Center Container with margin: 0 auto

want put box in center of page? this is simple way!

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* top-bottom: 0, left-right: auto */
  padding: 0 1rem;
}

tip: auto on left and right margin make browser calculate equal space both side.

5. Use display: flex for Simple Layout

flexbox is very useful for row or column layout. easy align item!

.card-row {
  display: flex;
  align-items: center;   /* center vertical */
  justify-content: space-between; /* spread item */
  gap: 1rem;
}

<div class="card-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

tip: align-items control up-down, justify-content control left-right (in row direction).

6. Use display: grid for Complex Layout

grid is best when you need row AND column at same time. like card layout!

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 column, middle is bigger */
  gap: 1.5rem;
}

tip: 1fr mean "one fraction of available space". very flexible unit!

7. Use gap Between Items

before people use margin on every item. now just use gap — much easier!

/* old way - messy */
.item { margin-right: 1rem; }
.item:last-child { margin-right: 0; }

/* new way - clean! */
.flex-container {
  display: flex;
  gap: 1rem; /* work for flex and grid both */
}

tip: gap work with both flex and grid. use it always!

8. Use clamp() for Responsive Font

font size change smooth depend on screen size. no need media query!

h1 {
  /* min: 1.5rem, prefer: 4vw, max: 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

tip: clamp(min, preferred, max) — browser pick the middle one but never go outside min/max.

9. Use min(), max(), clamp() Together

these function help you write responsive css without media query!

.box {
  width: min(100%, 600px);    /* take smaller value */
  padding: max(1rem, 2vw);    /* take bigger value */
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* between min and max */
}

tip: min(100%, 600px) mean: take 100% width but never go over 600px. very useful!

10. Use aspect-ratio for Image/Video

keep image or video in correct shape even when size change!

.video-wrapper {
  aspect-ratio: 16 / 9; /* widescreen video ratio */
  width: 100%;
  overflow: hidden;
}

.square-image {
  aspect-ratio: 1; /* perfect square */
}

tip: no more padding-top hack for video! aspect-ratio is clean modern way.

11. Use object-fit: cover for Image

image always fill container and not stretch or squish!

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;   /* fill box, crop if need */
  object-position: center; /* which part to show */
}

tip: cover = fill and crop. contain = fit inside, no crop. use cover for card image.

12. Use overflow: hidden to Prevent Overflow

content go outside of box? hide it with this!

.card {
  width: 300px;
  overflow: hidden;     /* hide everything outside */
  border-radius: 12px;
}

/* also good for text */
.text-box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* show "..." at end */
  max-width: 200px;
}

tip: overflow: hidden also clip border-radius on child element. good for card with image!

13. Use position: sticky for Navigation

nav bar stay at top when user scroll down!

.navbar {
  position: sticky;
  top: 0;        /* stick at 0px from top */
  z-index: 100;  /* make sure it above other element */
  background: white;
}

tip: sticky need parent have enough height. if parent too short, sticky not work!

14. Use position: fixed for Floating Button

element always stay at same place on screen, even when scroll!

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: #3b82f6;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 50%;
  cursor: pointer;
}

tip: fixed position is relative to viewport (screen), not page. different from absolute!

15. Use z-index Carefully

z-index control which element show in front. higher number = more in front!

.modal-overlay { z-index: 1000; }
.modal-box     { z-index: 1001; } /* in front of overlay */
.navbar        { z-index: 100; }
.tooltip       { z-index: 500; }

tip: z-index only work on element that have position set (not static). many people forget this!

16. Use transition for Smooth Hover

make element change smooth instead of jump!

.button {
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

tip: put transition on normal state, not :hover. this make both in and out smooth!

17. Use transform: translateY() for Hover Effect

move element up/down on hover. look very nice for card and button!

.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px); /* move up 6px */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

tip: translate not affect layout. other element not move. better than changing top or margin.

18. Use box-shadow to Create Depth

shadow make element look like it floating above page!

/* soft shadow for card */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* stronger shadow for modal */
.modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* inner shadow */
.input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

tip: use rgba with small opacity for natural shadow. too dark shadow look ugly!

19. Use border-radius for Rounded UI

round corner make design look more modern and friendly!

.button  { border-radius: 8px; }       /* slightly round */
.card    { border-radius: 16px; }      /* more round */
.pill    { border-radius: 9999px; }    /* fully round (pill shape) */
.circle  { border-radius: 50%; }       /* perfect circle */
.custom  { border-radius: 16px 4px; } /* top: 16px, bottom: 4px */

tip: border-radius: 9999px on pill button look very nice. use it for tag and badge!

20. Use backdrop-filter for Glass Effect

make element look like frosted glass. very trendy modern design!

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* safari need this */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
}

tip: backdrop-filter need something behind it (image or color). on plain white background, you cannot see effect!

21. Use linear-gradient() for Modern Background

gradient make background look beautiful. no need image!

/* two color gradient */
.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* three color gradient */
.rainbow {
  background: linear-gradient(to right, #f59e0b, #ef4444, #8b5cf6);
}

/* gradient + text */
.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

tip: use 135deg angle for diagonal gradient. it look more dynamic than to right!

22. Use ::before and ::after for Decoration

add decoration without extra html element!

.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 50%;
  background: #3b82f6;
  margin-top: 6px;
  border-radius: 2px;
}

tip: content: "" is required even if empty. without it, ::before and ::after not show!

23. Use :hover, :focus, :active for Interactive

style element in different state. good for accessibility too!

.button {
  background: #3b82f6;
  color: white;
  border: 2px solid transparent;
  outline: none;
}

.button:hover  { background: #2563eb; }
.button:focus  { border-color: #93c5fd; outline: 2px solid #93c5fd; }
.button:active { transform: scale(0.97); }

tip: never remove :focus style! keyboard user need to see which element is selected. use outline or border!

24. Use :nth-child() to Style by Position

select element by position without adding class!

/* every other row in table */
tr:nth-child(even) { background: #f8fafc; }

/* first three item */
li:nth-child(-n+3) { font-weight: bold; }

/* every 3rd item */
.item:nth-child(3n) { margin-right: 0; }

tip: odd = 1, 3, 5... even = 2, 4, 6... 3n = 3, 6, 9... very powerful!

25. Use :has() for Parent Styling

select parent element that CONTAIN certain child. new powerful css!

/* card that has image look different */
.card:has(img) {
  padding: 0;
}

/* form field that has error message */
.form-field:has(.error) {
  border-color: red;
}

/* nav item that has active link */
.nav-item:has(a.active) {
  background: #eff6ff;
  font-weight: 700;
}

tip: :has() now work in all modern browser. this replace many javascript solution!

26 & 27. Use CSS Grid auto-fit for Responsive Cards

cards automatically go to next row when screen small. no media query!

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

tip: auto-fit = create as many column as fit. minmax(280px, 1fr) = minimum 280px, maximum fill space. perfect for card layout!

28. Use Media Query for Responsive Design

change style depend on screen size!

/* mobile first approach */
.container {
  padding: 1rem;
  font-size: 1rem;
}

/* tablet and above */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 1.1rem;
  }
}

/* desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    font-size: 1.2rem;
  }
}

tip: write mobile style first, then add bigger screen with min-width. this call "mobile-first" approach. easier to manage!

29 & 30. Use Relative Units (rem, %, vw, vh)

never hardcode pixel for font size. use relative unit so it scale with user setting!

html { font-size: 16px; }   /* base size */

h1   { font-size: 2rem; }   /* 32px = 2 × 16px */
h2   { font-size: 1.5rem; } /* 24px */
p    { font-size: 1rem; }   /* 16px */

.hero {
  min-height: 100vh;  /* full viewport height */
  width: 100%;        /* full parent width */
}

.sidebar {
  width: 25%;    /* 1/4 of parent */
}

tip: if user increase browser font size, rem unit also increase. px not change. always use rem for font!

31. Use currentColor to Reuse Text Color

icon or border can use same color as text. automatic!

.icon-button {
  color: #3b82f6;
}

.icon-button svg {
  fill: currentColor; /* use same color as parent text */
  width: 1.25em;
  height: 1.25em;
}

.bordered {
  color: #ef4444;
  border: 2px solid currentColor; /* red border same as text */
}

tip: great for icon! change color of parent, icon color also change.

32. Use inherit to Pass Down Styles

child element inherit style from parent. sometimes useful to force inherit!

/* font-size inherit in some element like button by default not inherit */
button, input, select {
  font-family: inherit; /* use same font as rest of page */
  font-size: inherit;
}

a {
  color: inherit; /* link use same color as surrounding text */
}

tip: button and input not inherit font by default in browser. always add this!

33. Use unset to Reset Styles

remove style completely, back to default or inherited value!

/* remove all list style */
ul {
  list-style: unset; /* go back to default */
}

/* custom reset */
.clean-button {
  all: unset; /* remove ALL browser default style */
  cursor: pointer;
}

tip: all: unset remove everything. useful when you want build button from scratch!

34. Use appearance: none to Customize Form

remove browser default ugly style for form element!

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

tip: after appearance: none, you can style dropdown, checkbox, radio button however you want!

35. Use accent-color for Checkbox & Radio

one line change color of checkbox and radio button!

input[type="checkbox"],
input[type="radio"] {
  accent-color: #3b82f6; /* blue color */
  width: 1.1rem;
  height: 1.1rem;
}

tip: before this, you need many css trick to change checkbox color. now just one line! works in all modern browser.

36. Use scroll-behavior: smooth for Smooth Scroll

when user click anchor link, page scroll smooth instead of jump!

html {
  scroll-behavior: smooth;
}

tip: only two line! now all anchor link (<a href="#section">) scroll smooth automatic.

37. Use scroll-margin-top for Fixed Header

when anchor link scroll, header maybe cover the target. fix with this!

.navbar {
  position: sticky;
  top: 0;
  height: 64px;
}

/* add space at top when anchor link scroll to this element */
h2, h3 {
  scroll-margin-top: 80px; /* navbar height + little extra */
}

tip: without scroll-margin-top, the heading hide behind sticky navbar when you click link. this fix that!

38 & 39 & 40. Handle Text Overflow Nicely

truncate long text with three dot or limit how many line show!

/* single line truncate */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* limit to 2 lines */
.two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* prevent wrap at all */
.no-wrap {
  white-space: nowrap;
}

tip: line-clamp: 2 very useful for card description text. keep all card same height!

41. Use calc() to Mix Units

calculate value that combine different unit!

.sidebar {
  /* full width minus 300px sidebar minus gap */
  width: calc(100% - 300px - 2rem);
}

.sticky-header {
  /* full viewport height minus header */
  min-height: calc(100vh - 64px);
}

.padding-scale {
  padding: calc(1rem + 2vw); /* grow with viewport */
}

tip: calc() can mix px, %, rem, vw — any unit together. very powerful!

42. Use filter for Visual Effects

apply blur, brightness, contrast without image editor!

/* blur image */
.blurred { filter: blur(4px); }

/* darken image */
.dark-overlay { filter: brightness(0.5); }

/* black and white */
.grayscale { filter: grayscale(100%); }

/* combine multiple filter */
.instagram-effect {
  filter: contrast(1.1) brightness(1.05) saturate(1.2);
}

/* hover to color from grayscale */
.photo {
  filter: grayscale(80%);
  transition: filter 0.3s;
}
.photo:hover { filter: grayscale(0%); }

tip: filter work on image, div, anything! combine multiple effect with space between them.

43. Use opacity for Transparency

make element transparent. 0 = invisible, 1 = fully visible!

.overlay {
  opacity: 0.5; /* 50% transparent */
  background: black;
}

/* fade in on hover */
.card-image {
  opacity: 0.8;
  transition: opacity 0.3s;
}
.card:hover .card-image {
  opacity: 1;
}

tip: opacity affect whole element AND its children. if you want only background transparent, use rgba() on background instead!

44. Use cursor: pointer for Clickable Element

show hand cursor when hover on clickable element. user know it can click!

button, a, [role="button"] {
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.draggable {
  cursor: grab;
}
.draggable:active {
  cursor: grabbing;
}

tip: custom div button not have cursor: pointer by default. always add it!

45. Use pointer-events: none to Disable Click

element not receive any mouse event. like invisible to mouse!

/* overlay that not block click */
.decoration {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

/* disable button without change look */
.loading-button {
  pointer-events: none;
  opacity: 0.6;
}

tip: good for decoration overlay or disabled element. user can still see it but cannot interact!

46 & 47. Hide Element Different Way

different hide method have different effect on layout!

/* hide but keep space */
.invisible {
  visibility: hidden; /* element still take space, just invisible */
}

/* hide and remove from layout */
.gone {
  display: none; /* completely remove, no space left */
}

/* hide but accessible to screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

tip: visibility: hidden = ghost (space still there). display: none = totally remove. choose depend on your need!

48. Use prefers-color-scheme for Auto Dark Mode

browser can tell you if user prefer dark or light. respect their choice!

/* light mode default */
:root {
  --bg: #ffffff;
  --text: #1f2937;
}

/* automatic switch to dark when user prefer dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --text: #f9fafb;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

tip: combine with CSS variable, dark mode become easy! change variable, everything update.

49. Use prefers-reduced-motion for Accessibility

some user have motion sickness or disability. turn off animation for them!

/* normal animation */
.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
}

/* disable animation if user request it */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}

tip: always add this when you have animation. good practice. good person. user will thank you!

50. Keep CSS Organized

messy css = big problem later. organize from start!

/* ==========================================
   1. CSS Variables & Reset
   ========================================== */
:root { --color-primary: #3b82f6; }
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================
   2. Base / Typography
   ========================================== */
body { font-family: inherit; line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; }

/* ==========================================
   3. Layout Components
   ========================================== */
.container { max-width: 1200px; margin: 0 auto; }

/* ==========================================
   4. UI Components
   ========================================== */
.button { /* ... */ }
.card   { /* ... */ }

/* ==========================================
   5. Utility Classes
   ========================================== */
.text-center { text-align: center; }
.hidden      { display: none; }

tip: group related style together. write comment for each section. future you will say thank you to present you!

that all for today! hope you learn something new. practice make perfect — try each tip in your project and you will remember it forever. good luck! 🎉

← Back to css
Share: