CSS Styles

- Text and Font Styles:
Used to control how text looks.
Example:

p {
  color: darkblue;             /* Text color */
  font-size: 16px;             /* Text size */
  font-family: Arial, sans-serif; /* Font type */
  font-weight: bold;           /* Bold text */
  text-align: center;          /* Align: left | right | center | justify */
  text-decoration: underline;  /* none | underline | line-through */
  text-transform: uppercase;   /* capitalize | lowercase | uppercase */
  line-height: 1.5;            /* Space between lines */
  letter-spacing: 2px;         /* Space between letters */
}

- Box Model (Spacing and Borders)
Controls how elements are sized and spaced.
Example:

div {
  width: 200px;
  height: 100px;
  margin: 20px;          /* Space outside element */
  padding: 10px;         /* Space inside element */
  border: 2px solid black; /* Border thickness, style, color */
  border-radius: 10px;   /* Rounded corners */
}

- Background Styles
Controls the element’s background.
Example:

body {
  background-color: lightgray;
  background-image: url('background.jpg');
  background-size: cover;       /* cover | contain */
  background-repeat: no-repeat;
  background-position: center;
}

-Layout and Positioning
Defines where elements appear on the page.
Example:

.container {
  display: flex;           /* flex | grid | block | inline-block */
  justify-content: center; /* left-right alignment */
  align-items: center;     /* top-bottom alignment */
  position: relative;      /* static | relative | absolute | fixed | sticky */
  top: 10px;               /* moves element if positioned */
  left: 20px;
}

-Image and Media Styles
Example:

img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

-Button Styles
Example:

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}

-Effects and Animation
Example:

.box {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.1);
}