CSS


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_fall2025/03_CSS/

Class page:http://johnguerra.co/classes/webDevelopment_fall_2025/

What did we learn last time?

Readings discussion

  • questions?

Random Questions

  • How do you style a class?
  • How do you style a class only inside a link?
  • What should you use id or class?
  • How do you style an element inline?
  • Why would you add a rgba after a rgb property?
  • What is Google Fonts?

CSS Basics

Understanding the fundamentals

Source: MDN Styling_basics/Getting_started

Generated with GitHub Copilot + Claude Sonnet 4

CSS Syntax

CSS rules consist of selectors and declarations

selector {
  property: value;
  property: value;
}

Example:

h1 {
  color: red;
  font-size: 24px;
}

Adding CSS to HTML

Three Methods

  • External (recommended) - separate .css file
  • Internal - <style> tag in <head>
  • Inline - style attribute (avoid)

External CSS (Best Practice)

Link external stylesheet in HTML <head>

<link rel="stylesheet" href="styles.css">

styles.css:

h1 {
  color: blue;
}

CSS Selectors

Element Selectors

p {
  color: green;
}

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Class Selectors

Use classes to target specific elements

<p class="special">Special paragraph</p>
.special {
  color: orange;
  font-weight: bold;
}

ID Selectors

Use IDs for unique elements

<div id="header">Header content</div>
#header {
  background-color: navy;
  color: white;
}

Descendant Selectors

Target elements inside other elements

li em {
  color: rebeccapurple;
}

.container p {
  margin-bottom: 10px;
}

Adjacent Sibling Selector

Target elements that immediately follow others

h1 + p {
  font-size: 120%;
  margin-top: 0;
}

Targets paragraphs that directly follow h1 elements

Pseudo-classes

Style elements based on their state

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

button:hover {
  background-color: lightblue;
}

CSS Functions

calc() Function

.container {
  width: calc(100% - 50px);
  margin: calc(1rem + 5px);
}

Transform Functions

.box {
  transform: rotate(45deg);
  transform: scale(1.5);
}

CSS Variables (Custom Properties)

Reusable values throughout your stylesheet

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

h1 {
  color: var(--primary-color);
  font-size: var(--font-size);
}

Shorthand Properties

Write multiple properties in one line

/* Instead of: */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

/* Use shorthand: */
padding: 10px 15px 10px 15px;
/* or */
padding: 10px 15px; /* top/bottom left/right */

Media Queries (@rules)

Responsive design with conditional CSS

body {
  background-color: white;
}

@media (max-width: 768px) {
  body {
    background-color: lightblue;
    font-size: 14px;
  }
}

CSS Comments

Document your code for maintainability

/* Main navigation styles */
nav {
  background-color: #333;
}

/* 
  Commented out for testing
  .old-style {
    color: red;
  }
*/

CSS Best Practices

  • Use external stylesheets
  • Prefer classes over IDs for styling
  • Write meaningful class names
  • Group related styles together
  • Use comments to organize code
  • Avoid inline styles
  • Test across different browsers

CSS Pre processors

They add syntactic sugar to CSS

Note: CSS preprocessors are less prominent in modern workflows due to native CSS improvements and build tools like Vite (19.9% usage)

CSS Frameworks

They provide pre-defined styles and components

Note: Modern development increasingly uses component-based frameworks (React 39.5%, Vue.js 15.4%) with CSS-in-JS solutions

Stack Overflow Developer Survey 2024

65,437 developers from 185 countries

  • JavaScript remains most popular language (62.3%)
  • HTML/CSS used by 52.9% of developers
  • React dominates web frameworks (39.5%)
  • Visual Studio Code most popular IDE (73.6%)
  • Docker most used dev tool (53.9%)
  • 76% of developers using or planning to use AI tools
  • Traditional CSS frameworks less prominent due to modern component-based development

The CSS Box Model

Every element is a rectangular box with four areas

Source: MDN Box Model Guide

Generated with GitHub Copilot + Claude Sonnet 4

Box Model Components

CSS Box Model Diagram
  • Content - actual content (text, images)
  • Padding - space around content (inside border)
  • Border - line around padding
  • Margin - space outside border

Standard Box Model

Width/height = content area only

.box {
  width: 300px;    /* content width */
  padding: 20px;   /* +40px total */
  border: 5px;     /* +10px total */
  margin: 10px;    /* space around */
}
/* Total width = 300 + 40 + 10 = 350px */

Alternative Box Model

Width/height = content + padding + border

.box {
  box-sizing: border-box;
  width: 300px;    /* total box width */
  padding: 20px;
  border: 5px;
}
/* Total width = 300px (padding + border included) */

Box-sizing Best Practice

Apply to all elements for predictable sizing

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Block vs Inline Elements

Block Elements

  • Break to new line
  • Respect width/height
  • Full width by default

Inline Elements

  • Stay on same line
  • Ignore width/height
  • Only horizontal padding/margin

Display: inline-block

Best of both worlds

.button {
  display: inline-block;
  padding: 10px 20px;
  width: 200px;    /* respected */
  height: 40px;    /* respected */
}

Stays inline but respects width/height and full box model

CSS Conflicts & The Cascade

How browsers resolve competing CSS rules

Source: MDN Handling Conflicts Guide

Generated with GitHub Copilot + Claude Sonnet 4

The Three Key Concepts

  • Cascade - source order matters
  • Specificity - selector weight determines priority
  • Inheritance - properties passed from parent to child

These work together to resolve conflicts

Cascade: Source Order

When rules have equal specificity, last one wins

h1 { color: red; }
h1 { color: blue; }  /* This wins */

Result: h1 elements will be blue

Specificity Scoring

Selectors have different weights

  • Inline styles (1000) - style attribute
  • IDs (100) - #header
  • Classes (10) - .button, [type="text"], :hover
  • Elements (1) - h1, div, p

Universal selector (*) = 0 points

Specificity Example

<h1 class="main-heading">Title</h1>
h1 { color: blue; }           /* 0-0-1 */
.main-heading { color: red; } /* 0-1-0 - wins! */

Class selector beats element selector

Inheritance

Some properties inherit from parent to child

body { color: blue; font-family: Arial; }
/* All text inherits these values */

.special { color: red; }
/* Overrides inherited color */

color, font-family inherit; width, margin, border don't

Controlling Inheritance

Special Values

  • inherit - use parent's value
  • initial - use property's default value
  • unset - inherit if inheritable, initial if not
  • all: unset - reset all properties

The !important Flag

Nuclear option - overrides everything

.button { 
  background: gray !important; 
}
#special-button { 
  background: red; /* won't work */
}

⚠️ !important is forbidded in the class - makes debugging difficult

Best Practices

  • Use classes instead of IDs for styling
  • Avoid inline styles and !important
  • Understand specificity to write maintainable CSS
  • Use inheritance effectively for typography
  • Keep selectors simple and specific as needed

CSS Flexbox

One-dimensional layout method for rows or columns

Modern solution for flexible layouts

Source: MDN Flexbox Guide

Generated with GitHub Copilot + Claude Sonnet 4

Why Flexbox?

Solves common layout problems:

  • Vertically center content
  • Equal height columns
  • Flexible item sizing
  • Responsive spacing

Creating a Flex Container

Add display: flex to parent element

.container {
  display: flex;
}

Children automatically become flex items!

The Flex Model

Flexbox model diagram
  • Main axis - primary direction
  • Cross axis - perpendicular direction
  • Flex container - parent with display: flex
  • Flex items - children elements

Flex Direction

Controls main axis direction

.container {
  flex-direction: row;    /* default */
  flex-direction: column;
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}

Flex Wrap

Control wrapping behavior

.container {
  flex-wrap: nowrap;  /* default */
  flex-wrap: wrap;    /* allow wrapping */
  flex-wrap: wrap-reverse;
}

Shorthand

flex-flow: row wrap;  /* direction + wrap */

Justify Content (Main Axis)

Align items along main axis

.container {
  justify-content: flex-start;   /* default */
  justify-content: center;
  justify-content: flex-end;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

Align Items (Cross Axis)

Align items along cross axis

.container {
  align-items: stretch;    /* default */
  align-items: center;
  align-items: flex-start;
  align-items: flex-end;
  align-items: baseline;
}

Flex Item Properties

Flex Grow, Shrink, Basis

.item {
  flex: 1;        /* shorthand: grow shrink basis */
  flex-grow: 1;   /* how much to grow */
  flex-shrink: 1; /* how much to shrink */
  flex-basis: 0;  /* initial size */
}

Flex Examples

.item1 { flex: 1; }      /* equal space */
.item2 { flex: 2; }      /* twice as much */
.item3 { flex: 1 100px; } /* min 100px */

Creates proportional layouts that adapt to container size

Individual Item Alignment

Override container alignment for specific items

.special-item {
  align-self: flex-end;   /* override align-items */
  order: 1;               /* change visual order */
}

Order doesn't affect tab order (accessibility)

Common Flexbox Patterns

Center Everything

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox Best Practices

  • Use for one-dimensional layouts
  • Perfect for navigation bars
  • Great for card layouts
  • Avoid for complex 2D grids (use CSS Grid)
  • Test across browsers
  • Consider accessibility with order property

Exercise

Let's continue visualizing the Airbnb Listings

Required Readings Next session