CSS Styling Mastery | Code with Ashu

← Home

Lesson plan

Colors aur Typography

Color values, font-family, font-size aur text styling ke basics.

color: #10203A; font-family: 'Inter', sans-serif;

The Box Model

Margin, border, padding aur content — layout ki neev.

margin: 16px; padding: 12px; border: 1px solid #E4DFD3;

Flexbox

Items ko row ya column me align aur distribute karna.

display: flex; justify-content: space-between; align-items: center;

CSS Grid

Two-dimensional layouts — rows aur columns dono ek saath control karna.

display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;

Transitions aur Animations

Hover effects aur smooth motion se UI ko alive banana.

transition: background .2s ease; transform: scale(1.03);

Responsive UI

Media queries se mobile, tablet aur desktop pe design adjust karna.

@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

Positioning

static, relative, absolute, fixed aur sticky — element ko exactly jahan chahiye wahan rakhna.

position: absolute; top: 0; right: 0;

Pseudo-classes aur Pseudo-elements

:hover, :nth-child, ::before, ::after se bina extra HTML ke styling control karna.

.card:hover { transform: translateY(-4px); } .card::before { content: ""; }

CSS Variables (Custom Properties)

Reusable values define karke poore project me consistent theme banana.

:root { --primary: #10203A; } .btn { background: var(--primary); }

Specificity aur Cascade

Browser kaunsa rule apply karega — ID, class, aur element selectors ka priority order.

#hero p { color: red; } /* highest */ .text { color: blue; } /* medium */ p { color: green; } /* lowest */

Project 2

Ek Poora Landing Page Style Karein

Yahan hum step-by-step bina style ke plain HTML ko ek professional landing page me badalte hain — box model, flexbox, colors aur hover effects use karke.

index.html

<div class="hero">
  <h1>Grow With Code</h1>
  <p>Beginner-friendly coding classes</p>
  <button>Enroll Now</button>
</div>

style.css

.hero {
  background: #10203A;
  color: #fff;
  text-align: center;
  padding: 60px 20px;
  font-family: sans-serif;
}
.hero h1 {
  font-size: 32px;
  margin-bottom: 10px;
}
.hero p {
  color: #C9D1DE;
  margin-bottom: 24px;
}
.hero button {
  background: #E2A63B;
  color: #10203A;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s ease;
}
.hero button:hover {
  transform: translateY(-3px);
}

Live output — button par hover karke dekhein

Property Reference — Real Website Styling

Ek normal website banate waqt sabse zyada use hone wali properties, category ke hisaab se.

Layout

displayblock, inline, flex, grid, none
positionstatic, relative, absolute, fixed, sticky
width / heightElement ka size
overflowExtra content ka behaviour
z-indexStacking order

Spacing

marginElement ke bahar ka space
paddingElement ke andar ka space
gapFlex/grid items ke beech space
box-sizingborder-box se size predictable banana

Typography

font-familyFont choose karna
font-size / font-weightSize aur boldness
line-heightLines ke beech spacing
text-alignleft, center, right, justify
letter-spacingLetters ke beech gap

Background & Border

backgroundColor, image, ya gradient
borderElement ke around line
border-radiusCorners round karna
box-shadowDepth ke liye shadow

Flexbox

display: flexFlex container banana
justify-contentMain axis alignment
align-itemsCross axis alignment
flex-wrapItems ko next line pe wrap karna

Grid

display: gridGrid container banana
grid-template-columnsColumns define karna
grid-template-rowsRows define karna
grid-column / grid-rowItem ka span control karna