TechTicket | Session 3 - Colors, Backgrounds, Fonts, and Typography

🎯 Session Overview

Welcome to Session 3! Now that you know how to target HTML elements using CSS selectors, it's time to make them look beautiful.

A website without colors and fonts looks like a boring text document from 1995. In this session, you will learn how to:

Use different Color Formats to paint your text and backgrounds.
Make colors see-through using Transparency (RGBA).
Change the style of your text using Fonts and Google Fonts.
Improve readability using Typography spacing rules.

⏪ Quick Recap: Session 2

Let's remember how we aim our CSS rules:

Class Selectors (.card): Reusable labels (10 points of Specificity).
ID Selectors (#header): Unique labels (100 points of Specificity).
Pseudo-classes (:hover): Triggers styles when the user interacts with the element.
The Cascade: If rules tie, the one written last wins!

🎨 CSS Colors: Painting the Web

The easiest property in CSS is color. It changes the color of the text inside an element.

p {
    color: red;
}

But typing "red" or "blue" is limiting. What if you want a specific shade of neon cyan? CSS gives us three main ways to write colors:

1. Color Names

CSS knows about 140 basic color names like red, blue, green, and even weird ones like tomato or dodgerblue.

2. HEX Colors (Hexadecimal)

This is the most popular format for professional designers. It starts with a hashtag # followed by 6 letters and numbers. It represents the mix of Red, Green, and Blue.

h1 {
    color: #ff0000; /* This is pure red */
    color: #00f0ff; /* This is bright cyan */
}

3. RGB and RGBA (Transparency)

RGB stands for Red, Green, Blue. You mix values from 0 to 255.
RGBA adds an "Alpha" channel at the end, which controls transparency (from 0.0 invisible to 1.0 solid).

h2 {
    color: rgb(255, 0, 0); /* Solid red */
    color: rgba(255, 0, 0, 0.5); /* 50% see-through red */
}

Color Formats Explained

🖼️ Background Styling

While color changes the text, background-color paints the box behind the text.

body {
    background-color: #111111; /* Very dark gray */
}

.highlight-box {
    background-color: rgba(0, 255, 255, 0.2);
    color: white;
}

You can also use images as backgrounds instead of flat colors! Modern websites use these three properties together:

background-image: url('space.jpg'); - Loads the picture.
background-size: cover; - Forces the image to stretch and fill the whole box without looking squished.
background-position: center; - Keeps the middle of the image visible if the box changes size.

✨ Interactive Demo: The Paint Bucket

Click the buttons below to change the background and text color of the demo box using different formats!

Style Me!

🔤 Fonts in CSS

Different fonts give a website its personality. A news website needs a clean, serious font. A gaming website might want a futuristic, blocky font.

We change the font using the font-family property.

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

This is called a Font Fallback. The browser reads from left to right:

"Do I have Helvetica installed on my computer?" If yes, use it.
If no, "Do I have Arial?" If yes, use it.
If no, just use any generic sans-serif (fonts without little feet on the letters) that I have.

Using Google Fonts

What if you want a super cool font that nobody has installed on their computer? You can borrow it from Google for free!

Go to fonts.google.com, find a font, and copy the <link> tag they provide.
Paste that link into the <head> of your HTML file.
Use the exact font-family name they tell you in your CSS!

This text uses a Google Font called 'Pacifico'!

📏 Typography: Making Text Readable

Typography is the art of arranging text. Even if you pick a cool font, if the words are squished together, nobody will read it.

Here are the 4 essential properties to make your text look professional:

h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px; /* Spreads letters apart */
}

p {
    line-height: 1.6; /* 1.6x the normal space between lines */
    text-decoration: underline; /* Underlines the text */
}

Pro Tip: Setting line-height: 1.5 or 1.6 on your body element instantly makes paragraphs 10x easier to read!

🏋️‍♂️ Practice Exercises

Open your code editor. Make sure your HTML has an h1, a p, and your CSS file is linked!

Exercise 1: Paint the Title

Target all h1 headings. Change their text color to a HEX code of your choice (Search "Color Picker" on Google to find one!).

h1 { color: #ff00ff; }

Exercise 2: Set the Stage

Target the body element. Give the entire page a dark background color, and make all the text inside it white.

body { background-color: #222222; color: white; }

Exercise 3: Make it Readable

Target your paragraphs (p). Change their font to Arial, make the font size 18px, and increase the line-height to 1.6.

p { font-family: Arial; font-size: 18px; line-height: 1.6; }

🔥 Mini Challenge: The Glass Text

Create a giant h1 heading that says "GHOST".

Your Goal: Make the text semi-transparent so that you can kind of see the background color through the letters. Use the RGBA format!

Set the A (Alpha) value to 0.5 for 50% transparency.
h1 { color: rgba(255, 255, 255, 0.5); }

🏠 Homework Project: Styled Profile Page

Build a beautiful personal profile webpage using everything we learned today!

HTML: Include an h1 for your name, an h2 subtitle, and two paragraphs about yourself.
CSS Background: Give the body a dark background color.
CSS Colors: Make your name (h1) a bright accent color using a HEX code.
CSS Typography: Go to Google Fonts, pick a cool font for your headings, and a clean font for your paragraphs. Set the paragraph line-height to 1.6.

📝 Session Summary

Colors can be written as names (red), HEX codes (#ff0000), or RGB (rgb(255,0,0)).
RGBA allows you to make colors transparent by changing the Alpha value (0.0 to 1.0).
color changes text, while background-color changes the box behind it.
font-family changes the font. You can import beautiful custom fonts from Google Fonts.
Typography properties like font-size, font-weight, and line-height are critical for making text easy to read.