Text & Fonts

Text Styling

.text-demo {
  color: #1A1A2E;
  text-align: left;        /* left | right | center | justify */
  text-decoration: underline; /* underline | overline | line-through | none */
  text-transform: uppercase;  /* uppercase | lowercase | capitalize | none */
  text-indent: 30px;
  letter-spacing: 1px;
  word-spacing: 4px;
  line-height: 1.6;
  white-space: nowrap;      /* prevents text from wrapping */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Line-height deserves special mention — it controls the vertical space a line of text takes up, and is key to readable paragraphs. A unitless value like 1.5 or 1.6 (meaning 1.5–1.6× the font size) is usually the right choice.

Fonts

body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;    /* 100–900, or normal (400) / bold (700) */
  font-style: italic;  /* normal | italic | oblique */

  /* Shorthand: style weight size/line-height family */
  font: italic 700 16px/1.5 "Segoe UI", sans-serif;
}

Font stacks: list several fonts separated by commas — the browser uses the first one it has available, falling back down the list. Always end with a generic family (sans-serif, serif, or monospace) as a safety net.

Web fonts let you use fonts that aren't installed on the visitor's device, via @font-face or a service like Google Fonts:

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
}

body {
  font-family: "MyFont", sans-serif;
}

Styling Links

Links have several states that can each be styled differently — the order matters (remember it as LoVe HAte: link, visited, hover, active):

a {
  color: #C41230;
  text-decoration: none;
}

a:visited {
  color: #8a0d22;
}

a:hover {
  color: #F5A623;
  text-decoration: underline;
}

a:active {
  color: darkred;
}

Styling Lists

ul {
  list-style-type: disc;   /* disc | circle | square | decimal | none */
  list-style-position: outside; /* outside | inside */
  padding-left: 20px;
}

ol {
  list-style-type: decimal;
}

/* Custom bullet using a pseudo-element */
ul.custom li {
  list-style: none;
}
ul.custom li::before {
  content: "→ ";
  color: #C41230;
}

/* Horizontal nav-style list */
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
}