OIM3690 - AI-Powered Web Development

2026 Spring

Session 10 (2/24) - via Webex

contain

Today's Agenda

  • Announcements, Review
  • CSS Essentials
    • <div> & <span>, Display Types
    • Advanced CSS: Pseudo-classes, Transitions, CSS Variables
  • Practice
    • Your Turn: Create interests.html
    • CSS Diner Game

Announcements/Updates

  • Webex Session - snow day! Camera on, use chat to participate
  • Repo Checkpoints - I will review your repos every ~2 weeks, starting now
    • Standing routine, not announced each time.
    • Keep everything pushed to GitHub
  • Mini Project #1 - found your "client"? Started PROPOSAL.md?
    • Goal: meaningful progress by Checkpoint 2
  • Getting Help - office hours by appointment, email with "OIM3690: <topic>"
  • Questions?

What We've Learned So Far

  • How the Web Works - DNS, HTTP, client-server model
  • Tools - Git & GitHub, GitHub Pages, Copilot, DevTools
  • HTML
    • Document structure, common tags, attributes
    • Semantic HTML, accessibility (alt text)
  • CSS
    • Adding CSS, cascading & specificity
    • Selectors (element, class, ID, combining)
    • Typography, Google Fonts, colors, box model

Review Questions

  • You found a website you love. How would you figure out what fonts and colors they're using?
  • Your external CSS says h1 { color: blue; } but your headings show up red. What are the possible explanations?
  • Why do we recommend external CSS files over inline styles, even though inline styles win in specificity?

Quick Selector Review

Selectors We've Seen

Selector Example Targets
Element p { } All <p> elements
Class .intro { } Elements with class="intro"
ID #header { } Element with id="header"
Descendant nav a { } All <a> inside <nav>
Grouping h1, h2 { } Both <h1> and <h2>

Tip: prefer classes for styling. Use IDs for unique JS/anchor references.

<div> & <span>

<div> and <span>

Two generic containers for grouping and styling. No semantic meaning.

<div> = block container (sections, cards, wrappers)

<div class="card">
  <h2>Title</h2>
  <p>Content here...</p>
</div>

<span> = inline container (highlight a word, style part of text)

<p>The price is <span class="price">$99</span> today!</p>

Display Types

Block vs Inline: Real Examples

Block elements stack vertically, take full width:

  • <div>, <p>, <h1>, <ul>, <li>, <section>

Inline elements flow side by side, like words in a sentence:

  • <span>, <a>, <strong>, <img>

That's why two <img> tags sit next to each other, not stacked. And why <li> items each get their own line.

Open DevTools on any page. Notice how block elements stretch full width.

Display Property

Type Behavior Default for
block Full width, new line <div>, <p>, <h1>
inline Flows with text, ignores width/height <span>, <a>, <strong>
inline-block Inline flow, but accepts width/height <img>, <button>
none Hides element completely -

<img> Centering Trick

Since <img> is inline by default, margin: 0 auto won't center it.

Fix:

img {
  display: block;
  margin: 0 auto;
}

Change it to block first, then auto margins work!

Pseudo-classes & Transitions

Pseudo-classes: Interactive Styles

/* When mouse hovers over a link */
a:hover {
  color: red;
  text-decoration: underline;
}

/* When an input is focused */
input:focus {
  border-color: blue;
  outline: none;
}

/* First and last child elements */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }

More Pseudo-classes

/* Every other row (useful for tables/lists) */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Links that have been visited */
a:visited { color: purple; }

/* Target specific child positions */
li:nth-child(3) { color: red; }  /* third item */

CSS Transitions: Smooth Changes

Instead of instant style changes, transition smoothly between states:

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: #e74c3c;
  transform: scale(1.2);
}

Pair :hover with transition for a polished, professional feel.

CSS Variables (Modern CSS)

:root {
  --babson-green: #006644;
  --accent-color: coral;
  --spacing: 20px;
}

h1 {
  color: var(--babson-green);
}

.highlight {
  background-color: var(--accent-color);
  padding: var(--spacing);
}

Define once, use everywhere. Change the variable, everything updates.

Your Turn: Create interests.html

Exercise: Create Your Interests Page

Create interests.html in your oim3690 repo with this starter:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Interests</title>
  <link rel="stylesheet" href="css/interests.css">
</head>
<body>
  <h1>My Interests</h1>
  <section>
    <h2>Interest 1</h2>
    <p>Description...</p>
  </section>
  <section>
    <h2>Interest 2</h2>
    <p>Description...</p>
  </section>
</body>
</html>

Style It

Step 2: Create css/interests.css and practice what we learned:

  • Use classes to style your sections (.section-title, .highlight)
  • Use <div> or <span> where it makes sense
  • Add :hover effects with transitions for smooth animation
  • Try CSS variables for your color scheme

Step 3: Use Copilot to enhance your page. Review what it generates:

  • Can you explain each selector and property it used?
  • Anything you'd change?

Questions? Drop them in the Webex chat!

Game Time: CSS Diner

CSS Diner

A fun game to practice CSS selectors!

  • Work through the levels at your own pace
  • Each level teaches a different selector type
  • Try to get as far as you can in ~15 minutes
  • Share your progress in the chat as you go!

Someone built this game to teach CSS selectors. What could you build to teach something?

Before You Leave

Wrap Up

  • [ ] Screenshot your CSS Diner progress and include it in your learning log
  • [ ] Update your learning log (wk06.md)
  • [ ] Push interests.html + css/interests.css to GitHub
  • [ ] Continue working on Mini Project #1

Before Next Session

  • Finish any remaining CSS Diner levels
  • Experiment with :hover + transition on your personal website
  • Explore the full CSS Essentials slides for reference

Next session: CSS layout with Flexbox and Grid + more games!