CSS

Basic Syntax

selector {
  property: value;
}

Selectors

Element Selector

p {
  color: red;
}

Class Selector

.my-class {
  color: red;
}

ID Selector

#my-id {
  color: red;
}

Properties

Text Properties

p {
  color: red; /* Text color */
  text-align: center; /* Text alignment */
  text-decoration: underline; /* Text decoration */
  font-size: 16px; /* Font size */
  font-family: Arial, sans-serif; /* Font family */
}

Box Model Properties

div {
  margin: 10px; /* Margin around the element */
  padding: 10px; /* Padding inside the element */
  border: 1px solid black; /* Border around the element */
  width: 100px; /* Width of the element */
  height: 100px; /* Height of the element */
}

Background Properties

body {
  background-color: #f0f0f0; /* Background color */
  background-image: url('image.jpg'); /* Background image */
  background-repeat: no-repeat; /* Background image repeat */
  background-position: center; /* Background image position */
}

Positioning Properties

div {
  position: relative; /* Positioning type */
  top: 10px; /* Offset from the top */
  left: 10px; /* Offset from the left */
  z-index: 1; /* Stack order */
}