CSS Styling: Beyond the Basics

✍️ Text Styling (So It's Not Flat)

🔤 Text Styling Properties:

🔧 Example:

p {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: #333;
  text-align: justify;
  line-height: 1.8;
  text-transform: capitalize;
}
          

Your paragraphs won't just be readable, they'll look good too ✨

📦 Box Model: Understanding HTML's Box World

"All HTML elements are essentially... boxes. And CSS helps you arrange these boxes like playing Tetris."

🧱 Box Model consists of:

⬅️ Margin: outer space
⬅️ Border: edge line
⬅️ Padding: inner space
⬅️ Content: actual content
          

🔍 Explanation:

• Content: main content (text/image)
• Padding: space between content & border
• Border: element's edge line
• Margin: space between elements

🔧 Styling Example:

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 40px auto;
  border: 2px solid #ff4d4d;
  background-color: #fff0f5;
}
          

🧠 Padding = gives content breathing room
🧠 Margin = gives the box space from others

📐 Width & Height

🧊 Important properties:

• width → element width
• height → element height

Units you can use:

• px → fixed
• % → relative to parent
• vw/vh → relative to screen size

.card {
  width: 80%;
  height: auto;
}
          

🎨 Background Styling

🌈 Commonly used properties:

body {
  background-color: #f0f0f0;
  background-image: url('bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
          

✨ Border & Radius

🔧 Border properties:

.box {
  border: 3px dashed #ff69b4;
  border-radius: 12px;
}
          

• border: edge line (solid, dashed, dotted)
• border-radius: makes corners rounded

Perfect for styling cards so they don't look as stiff as a deadline assignment!

🌫️ Box Shadow

Glow effects, neomorphism, or aesthetic shadows can be created with this:

.card {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
          

General format:

box-shadow: x-offset y-offset blur color;
          

🔎 Block vs Inline vs Inline-block

🧩 Element display types:

🔧 Example:

span {
  display: inline-block;
  width: 100px;
  height: 100px;
}