CSS Properties & Animations Hub - By Yuvraj Chanudary

CSS Properties Reference

Text & Font Properties

color

Sets the color of text content.

color: red;

Red text example

color: #3b82f6;

Blue text example

.red-text {
  color: #ef4444;
}

.blue-text {
  color: #3b82f6;
}

.primary-text {
  color: var(--primary-color);
}

<p class="red-text">This text is red</p>
<p class="blue-text">This text is blue</p>
<p class="primary-text">This text uses CSS variables</p>

font-size

Controls the size of text.

font-size: 24px;

Large text

font-size: 1.2rem;

Responsive size

.small { 
  font-size: 12px; 
}

.medium { 
  font-size: 16px; 
}

.large { 
  font-size: 24px; 
}

.xlarge { 
  font-size: 32px; 
}

/* Responsive units */
.responsive { 
  font-size: 1.2rem; 
}

.fluid { 
  font-size: clamp(1rem, 2vw, 2rem); 
}

<p class="small">Small text</p>
<p class="medium">Medium text</p>
<p class="large">Large text</p>
<p class="xlarge">Extra large text</p>

font-weight

Controls the thickness of text.

font-weight: bold;

Bold text

font-weight: 300;

Light text

.light { 
  font-weight: 300; 
}

.normal { 
  font-weight: 400; 
}

.medium { 
  font-weight: 500; 
}

.semibold { 
  font-weight: 600; 
}

.bold { 
  font-weight: 700; 
}

.extrabold { 
  font-weight: 800; 
}

<p class="light">Light text</p>
<p class="normal">Normal text</p>
<p class="bold">Bold text</p>
<p class="extrabold">Extra bold text</p>

text-align

Controls horizontal alignment of text.

text-align: center;

Centered text

text-align: right;

Right aligned

.text-left { 
  text-align: left; 
}

.text-center { 
  text-align: center; 
}

.text-right { 
  text-align: right; 
}

.text-justify { 
  text-align: justify; 
}

<p class="text-left">Left aligned text</p>
<p class="text-center">Centered text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text that spreads to fill the container width</p>

text-decoration

Adds decoration to text like underlines.

text-decoration: underline;

Underlined text

text-decoration: line-through;

Strikethrough text

.underline { 
  text-decoration: underline; 
}

.overline { 
  text-decoration: overline; 
}

.line-through { 
  text-decoration: line-through; 
}

.no-decoration { 
  text-decoration: none; 
}

/* Advanced decorations */
.fancy-underline {
  text-decoration: underline wavy red;
}

<p class="underline">Underlined text</p>
<p class="overline">Overlined text</p>
<p class="line-through">Strikethrough text</p>
<a href="#" class="no-decoration">Link without underline</a>

letter-spacing

Controls spacing between characters.

letter-spacing: 3px;

SPACED TEXT

letter-spacing: -1px;

Tight text

.tracking-tight { 
  letter-spacing: -0.025em; 
}

.tracking-normal { 
  letter-spacing: 0; 
}

.tracking-wide { 
  letter-spacing: 0.025em; 
}

.tracking-wider { 
  letter-spacing: 0.05em; 
}

.tracking-widest { 
  letter-spacing: 0.1em; 
}

<p class="tracking-tight">Tight letter spacing</p>
<p class="tracking-normal">Normal letter spacing</p>
<p class="tracking-wide">Wide letter spacing</p>
<p class="tracking-widest">Very wide letter spacing</p>

text-transform

Controls capitalization of text.

text-transform: uppercase;

uppercase text

text-transform: capitalize;

capitalize each word

.uppercase { 
  text-transform: uppercase; 
}

.lowercase { 
  text-transform: lowercase; 
}

.capitalize { 
  text-transform: capitalize; 
}

.normal-case { 
  text-transform: none; 
}

<p class="uppercase">uppercase text</p>
<p class="lowercase">LOWERCASE TEXT</p>
<p class="capitalize">capitalize each word</p>
<p class="normal-case">Normal Case Text</p>

Background Properties

background-color

Sets the background color of an element.

Colored Background

.bg-primary { 
  background-color: #8B5CF6; 
}

.bg-secondary { 
  background-color: #10B981; 
}

.bg-transparent { 
  background-color: transparent; 
}

.bg-gradient {
  background-color: #8B5CF6;
  background-image: linear-gradient(45deg, #8B5CF6, #10B981);
}

<div class="bg-primary">Primary background</div>
<div class="bg-secondary">Secondary background</div>
<div class="bg-transparent">Transparent background</div>
<div class="bg-gradient">Gradient background</div>

background-image

Sets background images and gradients.

Gradient Background

/* Linear gradients */
.gradient-1 {
  background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

/* Radial gradients */
.gradient-2 {
  background-image: radial-gradient(circle, #ff6b6b, #4ecdc4);
}

/* Multiple backgrounds */
.multiple-bg {
  background-image: 
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('pattern.png');
}

<div class="gradient-1">Linear gradient background</div>
<div class="gradient-2">Radial gradient background</div>
<div class="multiple-bg">Multiple backgrounds</div>

background-repeat

Controls how background images repeat.

Pattern Background

.no-repeat { 
  background-repeat: no-repeat; 
}

.repeat-x { 
  background-repeat: repeat-x; 
}

.repeat-y { 
  background-repeat: repeat-y; 
}

.repeat { 
  background-repeat: repeat; 
}

.space { 
  background-repeat: space; 
}

.round { 
  background-repeat: round; 
}

<div class="no-repeat" style="background-image: url('image.jpg')">No repeat</div>
<div class="repeat-x" style="background-image: url('image.jpg')">Repeat X</div>
<div class="repeat-y" style="background-image: url('image.jpg')">Repeat Y</div>
<div class="repeat" style="background-image: url('image.jpg')">Repeat both directions</div>

background-position

Sets the position of background images.

') no-repeat center;">Positioned BG

.bg-center { 
  background-position: center; 
}

.bg-top { 
  background-position: top; 
}

.bg-bottom { 
  background-position: bottom; 
}

.bg-left { 
  background-position: left; 
}

.bg-right { 
  background-position: right; 
}

/* Precise positioning */
.bg-custom { 
  background-position: 25% 75%; 
}

.bg-fixed { 
  background-position: 10px 20px; 
}

<div class="bg-center" style="background-image: url('image.jpg')">Center positioned</div>
<div class="bg-top" style="background-image: url('image.jpg')">Top positioned</div>
<div class="bg-custom" style="background-image: url('image.jpg')">Custom positioned</div>

Box Model Properties

margin

Controls outer spacing around elements.

Element with margin

/* All sides */
.m-4 { 
  margin: 1rem; 
}

/* Individual sides */
.mt-4 { 
  margin-top: 1rem; 
}

.mr-4 { 
  margin-right: 1rem; 
}

.mb-4 { 
  margin-bottom: 1rem; 
}

.ml-4 { 
  margin-left: 1rem; 
}

/* Shorthand */
.m-custom { 
  margin: 10px 20px; /* top/bottom left/right */ 
}

.m-full { 
  margin: 10px 20px 30px 40px; /* top right bottom left */ 
}

<div class="m-4">Margin on all sides</div>
<div class="mt-4">Margin on top only</div>
<div class="m-custom">Custom margin</div>
<div class="m-full">Full margin specification</div>

padding

Controls inner spacing within elements.

Element with padding

/* All sides */
.p-4 { 
  padding: 1rem; 
}

/* Individual sides */
.pt-4 { 
  padding-top: 1rem; 
}

.pr-4 { 
  padding-right: 1rem; 
}

.pb-4 { 
  padding-bottom: 1rem; 
}

.pl-4 { 
  padding-left: 1rem; 
}

/* Responsive padding */
.p-responsive {
  padding: clamp(1rem, 4vw, 3rem);
}

<div class="p-4">Padding on all sides</div>
<div class="pt-4">Padding on top only</div>
<div class="p-responsive">Responsive padding</div>

Border Properties

border-style

Sets the style of element borders.

Solid border

Dashed border

.border-solid { 
  border-style: solid; 
}

.border-dashed { 
  border-style: dashed; 
}

.border-dotted { 
  border-style: dotted; 
}

.border-double { 
  border-style: double; 
}

.border-groove { 
  border-style: groove; 
}

.border-ridge { 
  border-style: ridge; 
}

<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>
<div class="border-double">Double border</div>

border-width & border-color

Controls border thickness and color.

2px Primary

4px Secondary

/* Width */
.border-thin { 
  border-width: 1px; 
}

.border-medium { 
  border-width: 2px; 
}

.border-thick { 
  border-width: 4px; 
}

/* Color */
.border-primary { 
  border-color: #8B5CF6; 
}

.border-secondary { 
  border-color: #10B981; 
}

/* Shorthand */
.border-custom { 
  border: 2px solid #8B5CF6; 
}

<div class="border-thin border-primary">Thin primary border</div>
<div class="border-thick border-secondary">Thick secondary border</div>
<div class="border-custom">Custom border shorthand</div>

CSS Animations & Properties

Animation Properties

@keyframes

Define the stages of an animation sequence.

Fade In Animation

@keyframes fadeIn {
  0% { 
    opacity: 0; 
    transform: translateY(20px);
  }
  50% { 
    opacity: 0.5; 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);
  }
}

.fade-animation {
  animation: fadeIn 2s ease-in-out;
}

<div class="fade-animation">This element will fade in</div>

animation-duration

How long the animation runs.

1s Spin

.fast { 
  animation-duration: 0.5s; 
}

.medium { 
  animation-duration: 1s; 
}

.slow { 
  animation-duration: 2s; 
}

.very-slow { 
  animation-duration: 5s; 
}

/* Using shorthand */
.animation-fast {
  animation: fadeIn 0.5s ease-out;
}

<div class="fast spin">Fast animation</div>
<div class="medium spin">Medium animation</div>
<div class="slow spin">Slow animation</div>
<div class="animation-fast">Fast fade animation</div>

animation-timing-function

Speed curve of the animation.

Bounce Timing

.ease { 
  animation-timing-function: ease; 
}

.ease-in { 
  animation-timing-function: ease-in; 
}

.ease-out { 
  animation-timing-function: ease-out; 
}

.ease-in-out { 
  animation-timing-function: ease-in-out; 
}

.linear { 
  animation-timing-function: linear; 
}

/* Custom bezier curves */
.custom-timing {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

<div class="ease spin">Ease timing function</div>
<div class="ease-in spin">Ease-in timing function</div>
<div class="linear spin">Linear timing function</div>
<div class="custom-timing spin">Custom timing function</div>

animation-iteration-count

How many times the animation repeats.

Infinite Pulse

.once { 
  animation-iteration-count: 1; 
}

.twice { 
  animation-iteration-count: 2; 
}

.infinite { 
  animation-iteration-count: infinite; 
}

/* Using shorthand */
.pulse-infinite {
  animation: pulse 2s ease-in-out infinite;
}

<div class="once spin">Animation plays once</div>
<div class="twice spin">Animation plays twice</div>
<div class="infinite spin">Animation plays infinitely</div>
<div class="pulse-infinite">Infinite pulse animation</div>

Popular Animations

Fade Animations

Smooth opacity transitions.

Fade In

@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.fade-in { 
  animation: fadeIn 1s ease-out; 
}

.fade-in-up { 
  animation: fadeInUp 1s ease-out; 
}

<div class="fade-in">Fade in animation</div>
<div class="fade-in-up">Fade in up animation</div>

Slide Animations

Movement-based transitions.

Slide In Left

@keyframes slideInLeft {
  from { 
    transform: translateX(-100%); 
  }
  to { 
    transform: translateX(0); 
  }
}

@keyframes slideInRight {
  from { 
    transform: translateX(100%); 
  }
  to { 
    transform: translateX(0); 
  }
}

.slide-left { 
  animation: slideInLeft 0.8s ease-out; 
}

.slide-right { 
  animation: slideInRight 0.8s ease-out; 
}

<div class="slide-left">Slide in from left</div>
<div class="slide-right">Slide in from right</div>

Scale Animations

Size-based animations.

Zoom In

@keyframes zoomIn {
  from { 
    opacity: 0; 
    transform: scale(0.3); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

.zoom-in { 
  animation: zoomIn 0.6s ease-out; 
}

.pulse { 
  animation: pulse 2s infinite; 
}

<div class="zoom-in">Zoom in animation</div>
<div class="pulse">Pulse animation</div>

Rotation Animations

Rotating and spinning effects.

Spin

@keyframes spin {
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
}

@keyframes flip {
  from { 
    transform: rotateY(0); 
  }
  to { 
    transform: rotateY(180deg); 
  }
}

.spin { 
  animation: spin 2s linear infinite; 
}

.flip { 
  animation: flip 1s ease-in-out; 
}

<div class="spin">Spin animation</div>
<div class="flip">Flip animation</div>

Yuvraj Chaudhary

Professional Web Developer & CSS Expert

Yuvraj Chaudhary

CSS Properties Reference

Text & Font Properties

color

font-size

font-weight

text-align

text-decoration

letter-spacing

text-transform

Background Properties

background-color

background-image

background-repeat

background-position

Box Model Properties

margin

padding

Border Properties

border-style

border-width & border-color

CSS Animations & Properties

Animation Properties

@keyframes

animation-duration

animation-timing-function

animation-iteration-count

Popular Animations

Fade Animations

Slide Animations

Scale Animations

Rotation Animations

Yuvraj Chaudhary

Professional Web Developer & CSS Expert

Yuvraj Chaudhary

CSS Properties Reference

Text & Font Properties

color

font-size

font-weight

text-align

text-decoration

letter-spacing

text-transform

Background Properties

background-color

background-image

background-repeat

background-position

Box Model Properties

margin

padding

Border Properties

border-style

border-width & border-color

CSS Animations & Properties

Animation Properties

@keyframes

animation-duration

animation-timing-function

animation-iteration-count

Popular Animations

Fade Animations

Slide Animations

Scale Animations

Rotation Animations

Code View