CSS Text, Fonts & Tables

Text properties control alignment, spacing, decoration, and transformation. Good text styling makes pages easy to read.

CSS Text

Text properties control alignment, spacing, decoration, and transformation. Good text styling makes pages easy to read.

Real-life example: text-align is like choosing left, center, or right alignment on a school notice board.

Common text properties

p {
  text-align: left;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.link-line {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS Fonts

font-family picks the typeface. font-size sets size. font-weight controls boldness. Always add fallback fonts in case the first one fails to load.

Real-life example: font-family is like choosing Hindi, English, or Marathi for a sign — with backup languages if the first font is missing.

Font stack

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

Icons (Font Awesome & Google)

Icon fonts and SVG icons add symbols without many image files. Font Awesome and Google Material Icons are popular. Load them from a CDN or npm in real projects.

Real-life example: Icon fonts are like a sticker sheet — one font file gives you hundreds of small symbols (phone, email, menu).

Icon usage idea

<!-- Font Awesome (CDN link in head) -->
<a href="tel:+911234567890">
  <i class="fa-solid fa-phone"></i> Call us
</a>

<!-- Google Material Icons -->
<span class="material-icons">menu</span>

Style icon + text

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0891b2;
  text-decoration: none;
}

Styling Links & Lists

Links should look clickable and show hover/focus states. Lists can lose default bullets and become navigation or feature lists.

Real-life example: Styling links is like coloring road signs blue so drivers know they can follow them.

Links and lists

a {
  color: #0891b2;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.feature-list li {
  list-style: square;
  margin-bottom: 0.5rem;
  color: #334155;
}

Styling Tables

Tables display rows and columns of data. Use border-collapse for clean grids, zebra stripes for readability, and padding for breathing room.

Real-life example: A styled table is like a neat marksheet — clear lines, headers stand out, and every row is easy to scan.

Table styles

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background: #f1f5f9;
  font-weight: 700;
}

tr:nth-child(even) {
  background: #f8fafc;
}

Text Effects & Google Fonts

Text effects include shadows, gradients on text, and spacing tricks. Google Fonts lets you use free custom fonts — link the font in HTML, then use it in CSS.

Real-life example: text-shadow is like a faint shadow behind letters on a shop sign. Google Fonts is like borrowing beautiful handwriting from a free library.

Do not load too many font weights — 2–3 weights (regular, semibold, bold) keep pages fast.

Google Fonts + text effects

<!-- In HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" />

Custom font and effects

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

.hero-title {
  text-shadow: 0 2px 12px rgba(8, 145, 178, 0.35);
}

.gradient-text {
  background: linear-gradient(90deg, #0891b2, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}