CSS (Cascading Style Sheets)

CSS is used to style and design HTML elements. It controls layout, colors, fonts, and responsiveness.

Basic CSS Example

body {
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
}

h1 {
  color: crimson;
  text-align: center;
}

button {
  background: crimson;
  border: none;
  padding: 10px;
  color: white;
  border-radius: 5px;
}

Selectors

/* Element Selector */
p { color: blue; }

/* Class Selector */
.myClass { font-size: 18px; }

/* ID Selector */
#unique { background: yellow; }

Colors

h1 { color: red; }
p { color: rgb(0, 128, 0); }
div { background-color: #333; }

Box Model

div {
  margin: 20px;
  padding: 15px;
  border: 2px solid red;
  width: 200px;
  height: 100px;
}

Flexbox

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

Grid Layout

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Transitions

button {
  background: crimson;
  transition: background 0.3s ease;
}

button:hover {
  background: darkred;
}

Animations

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fadeIn 2s ease-in-out;
}

Media Queries

@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { flex-direction: column; }
}