Now, let's move to the next topic:

Web Basics Part 3 - CSS Basics

• CSS means Cascading Style Sheets
• It controls look and layout
• HTML gives structure
• CSS gives presentation

• How CSS works
• Browser reads HTML
• Browser applies CSS rules
• Rules match elements using selectors

• Basic CSS syntax
• selector
• property
• value

Example: Change paragraph text color and font size

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

• Selectors
• Element selector: p, h1, div
• Class selector: .card (reusable styles)
• ID selector: #header (unique elements)
• Group selector: h1, h2, h3

• Box Model
Every element is a box with:
• Content
• Padding
• Border
• Margin

• Colors
• Color names: red, black
• Hex: #000000, #ffffff
• RGB: rgb(255, 0, 0)
• RGBA: adds opacity
Best practice: Use hex or rgb, limit palette, maintain contrast

• Fonts
• font-family
• font-size
• font-weight
• line-height
Use rem for scalable text, add fallback fonts

Mini practice task:
Create a card layout with:
• Padding and margin
• Background color
• Font family
• Line height 😊

Double Tap ♥️ For More