🌈 Selectors: Choosing Your Targets

CSS selectors are like magnifying glasses-—they help you focus on specific elements you want to enchant.

🧙 Examples of Selectors:

• Element Selector: Targets all <p> tags.

p {
  color: green; 
}

• Class Selector: Applies styles to elements with a specific class.

.highlight {
  background-color: yellow;
}

• ID Selector: Styles a unique element with an ID.

#banner {
  font-size: 24px;
}

🎨 Colors and Backgrounds: Painting the Canvas

Bring your webpage to life with vibrant colors and eye-catching backgrounds. CSS offers you every shade imaginable to make your site a visual treat.

🧙 Examples:

• ext Color:

h1 {
  color: #e63946;  /* Crimson red */
}

• Background Color:

body { 
  background-color: #f1faee;  /* Soft white */
}

• Background Image:

body {
  background-image: url('forest.jpg');
  background-size: cover;
}

🧩 Box Model: The Building Blocks of Design

Every element in CSS is wrapped in an invisible box that includes:

• Content: The core content (like text or images).
• Padding: The space between content and the border.
• Border: The edge of the element.
• Margin: The space outside the border.

Example:

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black; 
  margin: 10px;
}

📐 Positioning: Placing Your Elements with Precision

CSS allows you to position your elements exactly where you want them. Whether you want to center a button or fix a header at the top, you're in control.

Position Values:

• Static: Default position.
• Relative: Moves relative to its normal position.
• Absolute: Positioned relative to its nearest positioned ancestor.
• Fixed: Stays in place even when scrolling.

Example:

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

✨ Typography: The Art of Beautiful Text

Fonts and text styles are the jewels of the web, and CSS lets you craft them with ease.

Example:

h1 {
  font-family: 'Georgia, serif';
  font-size: 36px;
  text-shadow: 2px 2px #888888;  /* Adds a subtle shadow */
}

🎬 Animations and Transitions: Breathing Life into Pages

Bring motion to your web pages with CSS animations and transitions. Animate buttons, make text fade in, or add mesmerizing hover effects!

Example:

button {
  background-color: #61afef;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #5398d9;
}