Colors, Backgrounds, and Fonts

Visual design brings websites to life. Master color systems, background effects, and typography to create compelling user experiences.

Color Values in CSS

/* Keyword */
color: red;

/* Hexadecimal */
color: #ff0000; /* Red */
color: #00ff0080; /* Green with 50% opacity */

/* RGB/RGBA */
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 255, 0.5);

/* HSL/HSLA */
color: hsl(120, 100%, 50%); /* Green */
border-color: hsla(240, 100%, 50%, 0.3);

→

Different formats for different needs:
- Keywords: Basic colors (limited options)
- Hex: Web-standard, concise
- RGB: Screen-oriented color model
- HSL: Human-friendly (Hue, Saturation, Lightness)

Use RGBA/HSLA for transparency. Hue values range 0-360 (color wheel), Saturation/Lightness are percentages.

Background Styling

/* Solid color */
background-color: #f0f0f0;

/* Linear gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);

/* Image background */
background-image: url("pattern.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Blend modes */
background-blend-mode: multiply;

→

Background properties control:
- Solid colors
- Gradients (linear, radial)
- Images (positioning, repeating)
- Blend modes (overlay, multiply, etc.)

Use shorthand background property for combined values. Multiple backgrounds can be layered with commas.

Typography Control

/* Font family */
font-family: "Helvetica", Arial, sans-serif;

/* Font size */
font-size: 16px; /* Absolute */
font-size: 1rem; /* Relative to root */
font-size: 1.2em; /* Relative to parent */

/* Font weight */
font-weight: 400; /* Normal */
font-weight: bold; /* =700 */

/* Text styles */
font-style: italic;
text-transform: uppercase;
text-decoration: underline;

→

Key typography properties:
- font-family: Typeface stack
- font-size: Absolute/relative sizing
- font-weight: Thickness (100-900)
- line-height: Vertical spacing
- text-align: Left/right/center/justify

Always specify fallback fonts. Use relative units (rem/em) for responsive typography.

Using Google Fonts

<!-- Step 1: Add in HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* Step 2: Use in CSS */
body {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-weight: 700; /* Bold variant */
}

→

Benefits of Google Fonts:
- Huge free font library
- Easy implementation
- CDN-hosted for performance
- Multiple weights/styles available

Always load only needed weights (400,700) to minimize page load. Use font-display: swap; to prevent invisible text during loading.

Text Effects & Spacing

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* horizontal vertical blur color */

/* Letter spacing */
letter-spacing: 2px; /* Increase */
letter-spacing: -0.5px; /* Decrease */

/* Word spacing */
word-spacing: 0.5em;

/* Text gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

→

Advanced text styling:
- Shadows for depth/emphasis
- Spacing adjustments for readability
- Gradient text (with vendor prefixes)
- Text stroke (using text-stroke property)

Use text shadows sparingly. Gradient text requires WebKit prefixes for cross-browser support.

Creating Color Harmony

Analogous

Complementary

Triadic

Monochromatic

Use color wheels and tools like Adobe Color to create balanced palettes:

Primary: Dominant brand color
Secondary: Supporting colors
Accent: Highlights and CTAs
Neutrals: Backgrounds and text

Common Visual Design Errors

/* Poor contrast */
color: lightgray;
background-color: white; /* Hard to read */

/* Too many fonts */
h1 { font-family: FontA; }
h2 { font-family: FontB; }
p { font-family: FontC; } /* Inconsistent */

/* Unoptimized images */
background-image: url("large-uncompressed.jpg");
/* Slow loading */

/* Inaccessible color choices */
color: red;
background: green; /* Problem for colorblind */

Always check contrast ratios (minimum 4.5:1 for text). Limit to 2-3 typefaces. Use tools like WebAIM Contrast Checker.

Your Task: Visual Design Implementation

Style the starter HTML with colors, backgrounds, and typography:

Set up a color scheme:
- Primary: #4361ee (Royal blue)
- Secondary: #7209b7 (Purple)
- Accent: #f72585 (Pink)
Apply fonts:
- Body: Roboto (regular 400)
- Headings: Montserrat (bold 700)
- Cards: Poppins (regular for normal, bold for headings)
Style color boxes:
- Primary box: Solid primary color, white text
- Secondary box: HSLA secondary color with 80% opacity
- Accent box: RGB accent color
Create background effects:
- Solid: Neutral background (#f8f9fa)
- Gradient: Linear gradient from primary to accent
- Image: Use background pattern (create with CSS gradient)
- Blend: Primary color with multiply blend mode
Implement text effects:
- Shadowed: Dark gray shadow with 0.5 blur
- Outlined: White text with dark stroke
- Gradient: Apply primary-to-accent gradient
- Spaced: Increase letter spacing to 4px
Style footer with inverted colors (dark background, light text)

Bonus: Create a responsive font size scale using rem units with base size 16px and heading sizes: h1=2.5rem, h2=2rem, h3=1.5rem.

Section 1/8Color Values in CSS

Color Values in CSS

Use RGBA/HSLA for transparency. Hue values range 0-360 (color wheel), Saturation/Lightness are percentages.

Colors, Backgrounds, and Fonts

Visual design brings websites to life. Master color systems, background effects, and typography to create compelling user experiences.

Color Values in CSS

/* Keyword */
color: red;

/* Hexadecimal */
color: #ff0000; /* Red */
color: #00ff0080; /* Green with 50% opacity */

/* RGB/RGBA */
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 255, 0.5);

/* HSL/HSLA */
color: hsl(120, 100%, 50%); /* Green */
border-color: hsla(240, 100%, 50%, 0.3);

→

Different formats for different needs:
- Keywords: Basic colors (limited options)
- Hex: Web-standard, concise
- RGB: Screen-oriented color model
- HSL: Human-friendly (Hue, Saturation, Lightness)

Use RGBA/HSLA for transparency. Hue values range 0-360 (color wheel), Saturation/Lightness are percentages.

Background Styling

/* Solid color */
background-color: #f0f0f0;

/* Linear gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);

/* Image background */
background-image: url("pattern.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

/* Blend modes */
background-blend-mode: multiply;

→

Background properties control:
- Solid colors
- Gradients (linear, radial)
- Images (positioning, repeating)
- Blend modes (overlay, multiply, etc.)

Use shorthand background property for combined values. Multiple backgrounds can be layered with commas.

Typography Control

/* Font family */
font-family: "Helvetica", Arial, sans-serif;

/* Font size */
font-size: 16px; /* Absolute */
font-size: 1rem; /* Relative to root */
font-size: 1.2em; /* Relative to parent */

/* Font weight */
font-weight: 400; /* Normal */
font-weight: bold; /* =700 */

/* Text styles */
font-style: italic;
text-transform: uppercase;
text-decoration: underline;

→

Key typography properties:
- font-family: Typeface stack
- font-size: Absolute/relative sizing
- font-weight: Thickness (100-900)
- line-height: Vertical spacing
- text-align: Left/right/center/justify

Always specify fallback fonts. Use relative units (rem/em) for responsive typography.

Using Google Fonts

<!-- Step 1: Add in HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* Step 2: Use in CSS */
body {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-weight: 700; /* Bold variant */
}

→

Benefits of Google Fonts:
- Huge free font library
- Easy implementation
- CDN-hosted for performance
- Multiple weights/styles available

Always load only needed weights (400,700) to minimize page load. Use font-display: swap; to prevent invisible text during loading.

Text Effects & Spacing

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
/* horizontal vertical blur color */

/* Letter spacing */
letter-spacing: 2px; /* Increase */
letter-spacing: -0.5px; /* Decrease */

/* Word spacing */
word-spacing: 0.5em;

/* Text gradient */
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

→

Advanced text styling:
- Shadows for depth/emphasis
- Spacing adjustments for readability
- Gradient text (with vendor prefixes)
- Text stroke (using text-stroke property)

Use text shadows sparingly. Gradient text requires WebKit prefixes for cross-browser support.

Creating Color Harmony

Analogous

Complementary

Triadic

Monochromatic

Use color wheels and tools like Adobe Color to create balanced palettes:

Primary: Dominant brand color
Secondary: Supporting colors
Accent: Highlights and CTAs
Neutrals: Backgrounds and text

Common Visual Design Errors

/* Poor contrast */
color: lightgray;
background-color: white; /* Hard to read */

/* Too many fonts */
h1 { font-family: FontA; }
h2 { font-family: FontB; }
p { font-family: FontC; } /* Inconsistent */

/* Unoptimized images */
background-image: url("large-uncompressed.jpg");
/* Slow loading */

/* Inaccessible color choices */
color: red;
background: green; /* Problem for colorblind */

Always check contrast ratios (minimum 4.5:1 for text). Limit to 2-3 typefaces. Use tools like WebAIM Contrast Checker.

Preview