Colors

Colors can be specified using:

  • Color names: red, blue, etc.
  • Hexadecimal values: #FF0000 for red
  • RGB values: rgb(255, 0, 0) for red
  • RGBA values: rgba(255, 0, 0, 0.5) for semi-transparent red
  • HSL values: hsl(0, 100%, 50%) for red
  • HSLA values: hsla(0, 100%, 50%, 0.5) for semi-transparent red

Typography

CSS properties for text styling include:

  • font-family: Sets the font
  • font-size: Controls text size
  • font-weight: Sets boldness
  • font-style: For italic or oblique text
  • text-decoration: For underline, overline, or line-through
  • text-transform: Changes text case
  • line-height: Controls line spacing
/* Color examples */
.color-examples {
    color: red; /* Named color */
    background-color: #00FF00; /* Hexadecimal green */
    border: 2px solid rgb(0, 0, 255); /* RGB blue */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* RGBA for shadow */
}

/* Typography examples */
body {
    font-family: Arial, sans-serif; /* Primary and fallback fonts */
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Line height for readability */
}

h1 {
    font-size: 2em; /* Relative to base font size */
    font-weight: bold;
    text-transform: uppercase;
}

p {
    font-style: italic;
    text-decoration: underline;
}