CSS Fonts & Display

Control how text looks and how elements behave on the page.

What are CSS Fonts?

CSS Fonts allow you to control the appearance of text on a webpage.

  • Change text style
  • Improve readability
  • Match brand identity
  • Create professional layouts

Real-Life Example: Fonts are like handwriting styles — formal, casual, or decorative.

font-family

The font-family property specifies which font should be used.

  • Always provide fallback fonts
  • Use web-safe fonts or Google Fonts

Font Family Example


body {
    font-family: Arial, Helvetica, sans-serif;
}

Font Size, Weight & Style

  • font-size → text size
  • font-weight → thickness
  • font-style → italic/normal

Font Styling Example


h1 {
    font-size: 36px;
    font-weight: bold;
}

p {
    font-size: 16px;
    font-style: italic;
}

Using Google Fonts

Google Fonts allow you to use beautiful fonts for free.

Google Font Example






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

What is the CSS Display Property?

The display property defines how an element appears and behaves in layout.

Real-Life Example: Chairs (inline) vs Tables (block) — same room, different behavior.

Common Display Values

  • block – takes full width
  • inline – takes only content width
  • inline-block – inline with size control
  • none – hides element

Display Example

Block vs Inline


span {
    display: block;
    background: #2563eb;
    color: #fff;
    margin: 10px 0;
}

display: none vs visibility: hidden

  • display: none removes element completely
  • visibility: hidden hides but keeps space

Hidden Elements Example


.box {
    display: none;
}

Best Practices

  • Use readable font sizes
  • Limit font families
  • Use display wisely for layout
  • Prefer Flexbox/Grid for modern layouts

Pro Tip: Good typography makes content easy — not fancy.