CSS for Modern Web Design

CSS Basics & Selectors

CSS ka use HTML elements ko style karne ke liye hota hai. Selectors ki madad se hum specific elements ko target karke unka color, size aur layout change kar sakte hain.

p {
  color: blue;
  font-size: 16px;
}

CSS Colors, Fonts & Units

CSS me colors hex, rgb ya names se define kiye ja sakte hain. Fonts aur units website ke design aur readability ko better banate hain.

body {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 1rem;
}

CSS Box Model

CSS box model har element ki structure batata hai jisme content, padding, border aur margin hoti hai.

.card {
  padding: 20px;
  margin: 15px;
  border: 1px solid #ccc;
}

CSS Display & Position

Display property decide karti hai element ka behavior aur position property element ko page par place karne me help karti hai.

.box {
  display: inline-block;
  position: relative;
}

CSS Flexbox

Flexbox ek modern layout system hai jo responsive layouts banana easy karta hai without complex calculations.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid Layout

CSS Grid ka use rows aur columns ke through complex layouts design karne ke liye hota hai.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

Responsive Design with CSS

Responsive design ka matlab hai website ka har screen size par proper look karna, chahe mobile ho ya desktop.

.wrapper {
  width: 100%;
  max-width: 1200px;
}

CSS Media Queries

Media queries screen size ke hisaab se CSS rules apply karne me madad karti hain.

@media (max-width: 768px) {
  body {
    background-color: #f5f5f5;
  }
}

CSS Animations & Transitions

Animations aur transitions se website smooth aur interactive feel deti hai.

button {
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.1);
}