LaunchCV.in
Learn CSS from Scratch

Typography and Backgrounds

Lesson 4 of 9 2 min read Updated 28 September 2026

CSS course
  1. What is CSS? Ways to Add CSS
  2. CSS Selectors and Specificity
  3. Colors, Units and the Box Model
  4. Typography and Backgrounds
  5. Display, Position and Z-index
  6. CSS Flexbox
  7. CSS Grid Layout
  8. Responsive Design and Media Queries
  9. Transitions, Animations and CSS Variables
On this page
  1. Text styling
  2. Key properties
  3. Web fonts
  4. Backgrounds
  5. Practice

Text styling

<style>
body { font-family: system-ui, Arial, sans-serif; line-height: 1.6; }
h1 { font-size: 2.2rem; letter-spacing: -0.5px; }
p  { color: #334155; text-align: justify; }
a  { text-decoration: none; border-bottom: 2px solid #93c5fd; }
.upper { text-transform: uppercase; font-weight: 700; }
</style>
<h1>Typography</h1>
<p>Good typography makes long pages easy to read.</p>
<p class="upper">uppercase text</p>

Key properties

  • font-family sets the typeface. Always add fallback fonts.
  • font-size sets size. Use rem for accessibility.
  • font-weight sets boldness, from 100 to 900.
  • line-height sets space between lines. About 1.5 to 1.7 reads well.
  • text-align, text-transform, letter-spacing and text-decoration control alignment and effects.

Web fonts

You can add fonts from a font service or host your own files with @font-face. Hosting yourself avoids extra third-party requests.

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

Backgrounds

<style>
.hero {
  padding: 60px 20px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 16px;
}
</style>
<div class="hero"><h2>Gradient Background</h2></div>
.banner {
  background-image: url("banner.jpg");
  background-size: cover;
  background-position: center;
}

Practice

Design a blog article page with a readable font size, comfortable line height, a gradient header and styled links.

By LaunchCV.in Editorial TeamLast reviewed 28 September 2026Editorial policyReport an error

Powered by