CSS Complete Guide with Examples

Introduction

CSS (Cascading Style Sheets) is essential for designing visually appealing websites. This guide covers everything from basic styling to advanced layouts, animations, responsive design, and real-world projects.

CSS Basics

Selectors & Properties

• Element selectors, class selectors, ID selectors
• Common properties: color, font-size, margin, padding

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}
h1 {
  color: #1a202c;
  font-size: 2rem;
}

Box Model

• Content, padding, border, margin

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

Layouts

Flexbox

• One-dimensional layouts
• Align items and justify content

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

Grid

• Two-dimensional layouts
• Responsive grid structures

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

Advanced CSS

Animations & Transitions

• Smooth hover effects
• Keyframe animations

button {
  transition: background 0.3s ease;
}
button:hover {
  background-color: #3182ce;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

Responsive Design

• Media queries
• Mobile-first approach

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

CSS Project Example

• Mini Portfolio Page
• Uses Flexbox for header and footer
• Grid layout for project showcase
• Live demo: View Demo

<div class="portfolio-grid">
  <div class="project-card">Project 1</div>
  <div class="project-card">Project 2</div>
  <div class="project-card">Project 3</div>
</div>

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.project-card {
  background-color: #edf2f7;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

Tips & Best Practices

• Use semantic class names
• Combine Flexbox & Grid for complex layouts
• Optimize animations for performance
• Use CSS variables for theme consistency

Conclusion

Mastering CSS requires practice. Build small projects daily, experiment with layouts and animations, and you'll be ready to create stunning, responsive websites by the end of this guide.

---

SEO Suggestions:

• Main keywords: CSS tutorial, CSS guide 2025, CSS examples, CSS layouts, Flexbox, Grid, responsive CSS
• Meta description: Learn CSS from beginner to advanced with practical examples, projects, responsive layouts, and animations. Step-by-step guide for 2025.
• Catchy title suggestions: "CSS Complete Guide with Examples – Beginner to Advanced 2025", "Master CSS: Step-by-Step Guide with Projects & Live Demos"