CSS3 Complete Guide

1. Introduction

CSS (Cascading Style Sheets) is used to style HTML elements like colors, layout, and fonts.

p {
  color: red;
}

2. Selectors

/* element */
p { color: blue; }

/* class */
.box { background: yellow; }

/* id */
#title { font-size: 30px; }

3. Colors & Units

body {
  background: #111;
  color: rgb(255,255,255);
  font-size: 16px;
}

4. Box Model

div {
  margin: 10px;
  padding: 20px;
  border: 2px solid white;
}

5. Display & Position

div {
  display: flex;
  position: relative;
}

6. Flexbox

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

7. Grid

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

8. Backgrounds

body {
  background: linear-gradient(to right, blue, purple);
}

9. Transitions & Animation

.box {
  transition: 0.3s;
}
.box:hover {
  transform: scale(1.2);
}

10. Media Queries

@media (max-width: 600px) {
  body {
    background: red;
  }
}

11. CSS Variables

:root {
  --main: blue;
}

p {
  color: var(--main);
}

12. Best Practices

/* Keep code clean */
.container {
  display: flex;
}