CSS Colors and Typography

CSS Colors - Different Ways to Specify Colors

Colors are one of the most important visual elements in web design. CSS gives you multiple ways to specify colors, and understanding each method helps you choose the best approach for different situations.

1. Named Colors (Easiest for Beginners)

CSS includes 140+ named colors. They're easy to remember but limited:

p { color: blue; }
div { background-color: lightgray; }
a { color: darkgreen; }
h1 { background-color: white; }
button { background-color: red; }

Common Named Colors:

white, black, gray, lightgray, darkgray
red, blue, green, yellow, orange, purple
lightblue, darkblue, lightgreen, darkgreen
navy, teal, maroon, coral, salmon

Pros: Easy to remember and read

Cons: Limited color choices, professional designs rarely use them alone

2. Hex Colors (Most Common in Professional Design)

Hex (hexadecimal) colors use a # followed by 6 digits (0-9, A-F). They represent RGB values in base-16 numbering:

p { color: #333333; }           /* Dark gray */
div { background-color: #FF5733; } /* Orange-red */
a { color: #0066CC; }           /* Bright blue */
button { background-color: #28A745; } /* Green */

Understanding Hex Breakdown:

#RRGGBB
#FF0000 = Red (Full red, no green, no blue)
#00FF00 = Green (No red, full green, no blue)
#0000FF = Blue (No red, no green, full blue)
#FFFFFF = White (All colors at max)
#000000 = Black (No colors)

Hex Shorthand (when digits repeat):

#FFFFFF can be written as #FFF
#000000 can be written as #000
#FF9933 can be written as #F93

Pros: Precise color control, most common in design tools and web design

Cons: Not intuitive (hard to guess what #5D7C8A looks like without seeing it)

3. RGB Colors (Mathematical Approach)

RGB specifies colors using Red, Green, Blue values from 0-255:

p { color: rgb(255, 0, 0); }       /* Red */
div { background-color: rgb(0, 255, 0); } /* Green */
a { color: rgb(0, 0, 255); }       /* Blue */
button { background-color: rgb(255, 100, 50); } /* Orange */

RGB Breakdown:

rgb(R, G, B) where each value is 0-255
rgb(255, 0, 0) = Red (full red, no green, no blue)
rgb(0, 0, 0) = Black
rgb(255, 255, 255) = White
rgb(128, 128, 128) = Gray (equal amounts of each)

Pros: Intuitive (understand what each color does), good for programmatic color generation

Cons: Longer to type, less common in design tools

4. RGBA Colors (RGB with Transparency)

RGBA is RGB with an Alpha (transparency) channel (0-1 or 0%-100%):

p { color: rgba(0, 0, 255, 0.5); }        /* 50% transparent blue */
div { background-color: rgba(0, 0, 0, 0.8); } /* 80% opaque black */
.overlay { background-color: rgba(255, 255, 255, 0.1); } /* Nearly transparent white */

Alpha Values:

0 = Completely transparent (invisible)
0.5 = 50% transparent
1 = Completely opaque (solid)

Pros: Control transparency, create overlays and subtle effects

Cons: Slightly more complex, the alpha channel doesn't work in hex colors (use rgba instead)

5. HSL Colors (Human-Friendly)

HSL (Hue, Saturation, Lightness) is how humans think about colors:

p { color: hsl(0, 100%, 50%); }     /* Pure red */
div { background-color: hsl(120, 100%, 50%); } /* Pure green */
a { color: hsl(240, 100%, 50%); }   /* Pure blue */
button { background-color: hsl(45, 100%, 50%); } /* Orange */

HSL Breakdown:

hsl(H, S%, L%)
H (Hue): 0-360 (degrees on the color wheel)
  0 or 360 = Red
  120 = Green
  240 = Blue
  
S (Saturation): 0-100%
  0% = Grayscale
  100% = Pure color
  
L (Lightness): 0-100%
  0% = Black
  50% = Pure color
  100% = White

Creating Color Variations with HSL:

/* Base blue */
hsl(240, 100%, 50%)

/* Lighter blue (higher lightness) */
hsl(240, 100%, 70%)

/* Darker blue (lower lightness) */
hsl(240, 100%, 30%)

/* Less saturated blue (less intense) */
hsl(240, 50%, 50%)

/* Related color (hue + 30) */
hsl(270, 100%, 50%) /* Different hue = purple */

Pros: Intuitive for humans, easy to create color variations, great for generating related colors

Cons: Not as universal as hex in older design tools

Which Color Format Should You Use?

• Design Tools/Production: Use Hex (#FF5733) - it's the industry standard
• Transparency Needed: Use RGBA or HSLA
• Creating Color Schemes: Use HSL to understand color relationships
• Quick Testing: Use named colors for speed

Typography - Making Text Beautiful and Readable

Typography is the art of making text look good and be easy to read. Good typography makes a huge difference in how professional your website appears.

1. font-family (Choosing Fonts)

The font-family property sets which fonts to use. Always list fallback fonts in case the first font isn't available:

p { font-family: Arial, sans-serif; }
h1 { font-family: Georgia, serif; }
code { font-family: 'Courier New', monospace; }

Font Categories:

• Serif: Georgia, Times New Roman (fancy fonts with decorative lines)
• Sans-serif: Arial, Helvetica, Verdana (clean, modern fonts without decorative lines)
• Monospace: Courier New, Monaco (every letter is the same width—good for code)

Font Stack (Fallback Chain):

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* If Segoe UI isn't available, try Tahoma, then Geneva, etc.
   If none are available, use the browser's default sans-serif */

2. Google Fonts (Free Professional Fonts)

Google Fonts provides hundreds of free, high-quality fonts. Here's how to use them:

<!-- Add this link in your HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans" rel="stylesheet">

<!-- Then use in CSS -->
p { font-family: 'Roboto', sans-serif; }
h1 { font-family: 'Open Sans', sans-serif; }

Popular Google Fonts:

• Roboto: Modern, clean, highly readable
• Open Sans: Friendly and professional
• Lato: Warm and friendly
• Montserrat: Bold and modern
• Playfair Display: Elegant and sophisticated

3. font-size (Text Size)

Font size controls how large text appears. Use consistent sizing for hierarchy:

h1 { font-size: 32px; }
h2 { font-size: 24px; }
p { font-size: 16px; }
small { font-size: 12px; }

When to use different units:

• px (pixels): Fixed size, most common, predictable
• rem (relative em): Scales based on root font size (better for accessibility)
• em (relative): Scales based on parent element font size (complex, avoid)

4. font-weight (Text Thickness)

Font-weight controls how thick/bold text appears:

p { font-weight: normal; }  /* or 400 */
strong { font-weight: bold; } /* or 700 */
p { font-weight: 300; }  /* Light */
p { font-weight: 600; }  /* Semi-bold */

Common Values:

400 = Normal
700 = Bold
300 = Light
900 = Extra-bold

5. line-height (Vertical Spacing Between Lines)

Line-height makes text more readable by controlling spacing between lines:

p { line-height: 1.6; }  /* 1.6x the font size */
h1 { line-height: 1.2; } /* Tighter for headings */
.small-text { line-height: 1.8; } /* Very loose for small text */

Good Practices:

• Use 1.4-1.8 for body text (longer lines need more spacing)
• Use 1.2-1.4 for headings (shorter, so less spacing needed)
• Values above 2 are rarely used

6. text-align (Alignment)

Controls how text aligns horizontally:

p { text-align: left; }     /* Default */
h1 { text-align: center; }  /* Center */
.quote { text-align: center; }
footer { text-align: center; }

7. letter-spacing (Space Between Letters)

Adds extra space between letters:

h1 { letter-spacing: 2px; }    /* Extra space between letters */
p { letter-spacing: normal; }  /* Default */

Practical Typography Examples

Professional Paragraph Styling

p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;           /* Easy to read */
    color: #333;                /* Dark gray, not pure black */
    margin-bottom: 1rem;        /* Space between paragraphs */
}

Beautiful Heading

h1 {
    font-family: 'Georgia', serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    color: #1a1a1a;             /* Very dark for contrast */
    margin-bottom: 20px;
}

Readable Article

article {
    max-width: 800px;           /* Limit line length */
}

article p {
    font-size: 18px;
    line-height: 1.7;           /* Extra space for long articles */
    color: #333;
    margin-bottom: 1.5rem;
}

Color and Typography Together - Real Example

/* Complete styled article */
h1 {
    color: #1a5490;             /* Dark blue */
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 10px;
}

p {
    color: #333333;             /* Dark gray for readability */
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: #1a5490;             /* Matching blue from h1 */
    text-decoration: none;
}

a:hover {
    color: #0d3f73;             /* Darker blue on hover */
    text-decoration: underline;
}

Summary

You now understand:

• All five color formats (named, hex, RGB, RGBA, HSL) and when to use each
• How to choose fonts with font-family and fallbacks
• How to use Google Fonts for professional typography
• Font size, weight, line height, and alignment for readable text
• How to combine colors and typography for professional-looking designs

Congratulations! You've now mastered the CSS fundamentals: syntax, selectors, box model, and typography. These are the foundation for everything in CSS. Next, we'll explore Flexbox for creating flexible layouts.