CSS Styling & Visuals

Q51 — What are the different ways to specify colors in CSS?

CSS supports multiple color formats:

I. Named colors → p { color: red; }
II. Hexadecimal (#RRGGBB) → p { color: #ff0000; }
III. RGB → p { color: rgb(255, 0, 0); }
IV. RGBA (with transparency) → p { color: rgba(255, 0, 0, 0.5); }
V. HSL → p { color: hsl(0, 100%, 50%); }
VI. HSLA (with transparency) → p { color: hsla(0, 100%, 50%, 0.5); }
    

Q52 — What is the difference between relative and absolute font sizes?

▶ Relative font sizes adapt based on parent or root size: %, em, rem, vh, vw
▶ Absolute font sizes stay fixed: px, pt, cm
✅ Best practice → Use relative units (rem/em) for accessibility.

Q53 — How do you load custom fonts in CSS?

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}
body { font-family: 'MyFont', sans-serif; }


    

Q54 — What are text-shadow and box-shadow in CSS?

Text Shadow:
h1 { text-shadow: 2px 2px 5px gray; }

Box Shadow:
div { box-shadow: 5px 5px 15px rgba(0,0,0,0.3); }
    

Q55 — Difference between opacity and rgba transparency?

➡ Opacity affects the entire element (including children).
➡ RGBA transparency affects only color, not children.

Q56 — What are CSS gradients?

Linear: background: linear-gradient(to right, red, blue);
Radial: background: radial-gradient(circle, yellow, green);
Conic: background: conic-gradient(red, yellow, green, blue);
    

Q58 — How do you use CSS filters?

img {
  filter: grayscale(100%) blur(2px) brightness(80%);
}
Common filters: blur(), contrast(), sepia(), hue-rotate(), drop-shadow().
    

Q59 — Difference between transition and animation?

➡ Transition → smooth change triggered by an event.
➡ Animation → runs automatically, can loop infinitely.

button {
  background: blue;
  transition: background 0.5s;
}
button:hover { background: red; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
div { animation: fadeIn 2s infinite; }
    

Q60 — What are keyframes in CSS animations?

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}
.box { animation: slide 3s infinite; }
    

Q61 — How to create a fade-in effect?

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element { animation: fadeIn 2s ease-in-out; }
    

Q62 — How to create hover effects with transitions?

.button {
  background: blue;
  transition: background 0.3s, transform 0.3s;
}
.button:hover {
  background: red;
  transform: scale(1.1);
}
    

Q63 — Difference between transform: translate() and position: relative?

▶ translate() moves element without affecting layout.
▶ position: relative shifts element but space remains reserved.

Q64 — What are CSS clip-paths?

img { clip-path: circle(50%); }
div { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
    

Q65 — Difference between inline SVG styling and CSS background images?

➡ Inline SVG → scalable, stylable (fill, stroke).
➡ Background image → static image, cannot be styled internally.

Q66 — How to make gradient-colored text?

.text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    

Q67 — What are CSS masks?

div {
  mask-image: url(mask-shape.png);
  mask-repeat: no-repeat;
  mask-size: cover;
}
    

Q68 — What are blend modes?

img { mix-blend-mode: multiply; }
Common modes: multiply, screen, overlay, darken, lighten.
    

Q69 — How to create smooth scrolling?

html { scroll-behavior: smooth; }

Q70 — What are transition timing functions?

linear → constant speed
ease → slow start/end
ease-in → slow start
ease-out → slow end
ease-in-out → slow start & end, fast middle

div { transition: all 2s ease-in-out; }
    

⬅ Home