Learning CSS - Text, Color, and Background Properties

#Introduction

Now that you've mastered selectors in episode 2, you have the tools to pick elements. Episode 3 covers what you do to those elements: changing text appearance, color, and backgrounds. These are the properties used most in day-to-day styling.

Text is the most important element of nearly every web page, so good typography knowledge shows results immediately. Color defines a brand's identity and emotion, while backgrounds add visual depth. The three form an inseparable package.

This episode introduces the basic color models — keywords, hexadecimal, and the rgb() function. Episode 6 will dig into modern color models in depth. For now, focus on the highest-impact properties.

#Text Properties

#Font Families

font-family determines the typeface used:

font.css

body {
  font-family: system-ui, -apple-system, sans-serif;
}
 
h1 {
  font-family: Georgia, "Times New Roman", serif;
}

The value is a comma-separated list. The browser tries from the left; if the first font isn't available, it falls back to the next. The last value should be a generic category like serif or sans-serif as a safety net.

#Size, Weight, and Line Height

size.css

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
 
strong {
  font-weight: 700;
}

font-size sets the letter size, font-weight controls thickness (100-900), and line-height adjusts the spacing between lines. A unitless line-height value like 1.6 is relative to the font size and is the recommended practice.

#Text Alignment, Decoration, and Transformation

alignment.css

.center { text-align: center; }
.link { text-decoration: none; }
.uppercase { text-transform: uppercase; }

text-align sets horizontal alignment, text-decoration controls underlines or strikethrough, and text-transform changes letter case without altering the markup. Combining text-transform: uppercase with letter-spacing creates a modern feel for buttons.

#Text Color

#Keywords and Hexadecimal

CSS supports color keywords like red or white. For more precise control, use hexadecimal notation:

color.css

.primary { color: #2563eb; }
.secondary { color: #f59e0b; }
.muted { color: #6b7280; }

The #2563eb notation consists of three pairs of hex digits for red, green, and blue. Repeating values can be shortened: #fff equals #ffffff. Choose a consistent palette from the start so the design feels cohesive.

#The rgb() and hsl() Functions

rgb-hsl.css

.red { color: rgb(239, 68, 68); }
.blue { color: hsl(217, 91%, 60%); }
.transparent { color: rgba(0, 0, 0, 0.6); }

rgb(239, 68, 68) builds a color from red, green, and blue intensities (0-255). hsl(hue, saturation, lightness) is more intuitive for adjusting brightness. A fourth alpha component like rgba(0, 0, 0, 0.6) adds transparency.

#Backgrounds

#Background Color and Image

background-color fills the area behind content, while background-image places an image:

bg.css

.header {
  background-color: #0f172a;
  color: white;
  padding: 16px;
}
 
.hero {
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 300px;
}

background-size: cover ensures the image covers the whole area without distortion, background-position sets the focal point, and background-repeat controls image tiling. This is the standard pattern for hero headers.

#Background Shorthand

All background properties can be combined into a single declaration:

bg-shorthand.css

.hero {
  background: url("images/hero.jpg") center/cover no-repeat #0f172a;
}

The shorthand order follows the pattern color image position/size repeat. The value center/cover sets position and size at once. Shorthand is more compact, but understand the individual properties so you don't get confused when overriding.

#Integrated Exercise

Combine everything into a card, using the simple markup <div class="card"> containing a title and a paragraph:

css/style.css

body {
  font-family: system-ui, sans-serif;
  background-color: #f1f5f9;
  margin: 0;
  padding: 32px;
}
 
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 320px;
}
 
.card h2 {
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 1px;
}
 
.card p {
  color: #475569;
  line-height: 1.6;
}

Run npx serve . and open localhost:3000 to see the result.

#Common Mistakes and Solutions

#Font Not Available

An uninstalled font will be replaced by a generic font, so the appearance differs. Make sure the font list ends with a generic category, or use a service like Google Fonts.

#Background Image Not Showing

The most common cause is a wrong path in url(). Relative paths in CSS are calculated from the location of the CSS file, not from the HTML. With the css/style.css structure, an image in the project folder must be written as ../images/hero.jpg. Also check the file status in the Network tab of DevTools.

#Low Contrast Colors

Text colors too similar to the background make content hard to read. Use a contrast tool or choose a palette with clear brightness differences.

#Closing

Key takeaways:

• font-family uses a fallback list and ends with a generic category.
• font-weight, line-height, and letter-spacing shape text rhythm.
• Colors can be written as keywords, hexadecimal, rgb(), or hsl().
• background-size: cover and background-position matter for background images.
• The background shorthand combines all background properties in one line.
• Image paths in CSS are calculated relative to the CSS file location.

In the next episode, episode 4, we'll cover the box model, margin, padding, border, and sizing — the four layers that shape every element's space, how to control spacing, and the difference between content-box and border-box. This is the layout foundation that determines everything in the episodes ahead.