🌐 What is CSS?

CSS (Cascading Style Sheets) is used to style the visual presentation of webpages, including color, layout, animation, spacing, and responsiveness.

🎯 Common CSS Properties with Examples:

• color: Changes text color
• background-color: Sets background color
• font-family: Defines font style
• margin / padding: Controls spacing outside/inside elements
• border: Adds border with style/color/size
• display: block, inline, flex, grid, none
• position: static, relative, absolute, fixed, sticky
• box-shadow: Applies shadow effects
• animation / transition: Smooth visual effects

💻 CSS Button Example:

button {
  background-color: #00ffff;
  color: #000;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #00cccc;
}

📦 CSS Selectors:

• element: p {} — targets all paragraphs
• class: .box {} — targets class="box"
• id: #main {} — targets id="main"
• group: h1, h2 {} — targets multiple elements
• child: ul > li {} — targets direct children only

✨ Bonus: Animation Sample

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

.box {
  animation: slideIn 1s ease-out;
}

💡 Practice regularly and explore Flexbox & Grid to build modern, responsive layouts.