CSS;

Tools and Command Line

Joel Ross
Autumn 2025

View of the Day

  • Q&A (PollEv)

  • Syllabus: AI Policy

  • CSS Introduction

  • Tools: Command Line

  • Tools: npm & Jest (if time)

Questions so far?

https://pollev.com/joelross

I hereby authorize you to seek help learning from others, and to help others learn in return.

You only get credit for code or work you do yourself and demonstrates your learning.

You will not get credit for code you did not write yourself.

General Rule

AI Policy (Summary)

While the task maybe to implement a program, the work you need to do for this class is to learn the material. AI is not good at that.

The policy for this course:

  • ❌ Don't use AI tools for problem sets
  • ✅ You can use AI tools for projects:
    1. ⚠️ AI can do the "first pass", but you do the rest
      • Don't put code into the generator
    2. ⚠️ You need to distinguish what work is the AI and what work is yours
      • Cite what code is yours (using a comment)
      • Provide references in the evaluation surveys

For full details, see the syllabus on Canvas and the Gen AI in Projects Guidelines

We have a web page...

 

...but how do we make it look good?

Not this...

(see also: https://websitesfromhell.net/)

...but this!

CSS

Cascading Style Sheets

A language that defines rules for styling

"use this color and font for the first paragraph in the article; this picture for the page's background..."

(kind of like Styles or Themes in PowerPoint, but way, way more powerful!)

CSS Syntax

List rules for formatting properties for a particular kind of element.

Rules list what values to assign to different formatting properties (variables)

Selectors tell which elements the properties apply to

/* A rule with many properties */
h1 {
  font-family: 'Helvetica';
  color: white;
  background-color: #333; /*dark gray*/
}

"font"

selector: apply to all  <h1> elements

Hello CSS

Create a new file (File > New File)
Name it style.css 

h1 {
  font-family: 'Helvetica';
  color: white;
  background-color: #333; /*dark gray*/
}
<head>
  <link rel="stylesheet" href="my-style.css">
</head>

Link stylesheet in your HTML's <head>

relation between this page and reference

no content,
no closing tag

CSS Properties

What can we change with CSS?

  • font-family: the "font" (list alternates separated by commas)
  • font-size: the size of the text
  • font-weight: boldness
  • color: text color
  • background-color: element's background
  • padding: the space around an element
  • ... and many, many, more!

(http://www.w3schools.com/cssref/)

Practice

  • Style the font-family for the paragraphs in your page
  • Style the background-color for your page

Why two languages?

Separation of Concerns

Keep content separate
from appearance

Allows the same styling to apply to different content.

The same content can be presented in different ways to different users.

HTML vs. CSS

HTML specifies the content semantics.

CSS specifies the appearance.

<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
  font-style: normal;
  text-decoration: underline;
}

why is this italicized?

change what emphatic text looks like

HTML describes the meaning, not what it looks like!

<!-- HTML -->
<p>This text has <em>emphasis!</em></p>

says nothing about appearance!

Class Selectors

Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS

/* CSS */
.highlighted { 
  background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>

dot specifies class name, not tag name

Class Example

Add HTML attributes and CSS Rules so character names are in different colors!

<!-- HTML -->
<p class="rebel">Leia Organa</p>
<p class="imperial">Darth Vader</p>

/* CSS */
.rebel {
   color: red;
}

.imperial {
   color: gray;
}

CSS

Cascading Style Sheets

The Cascade

Multiple rules can apply to the same element (in a "cascade").

p { /* applies to all paragraphs */
  font-family: 'Helvetica'
}

.alert { /* applies to all elements with class="alert" */
  font-size: larger;
}

.success { /* applies to all elements with class="success" */
  color: #28a745; /* a pleasant green */
}
<p class="alert success">
  This paragraph will be in Helvetica font, a larger
  font-size, and green color, because all 3 of the above
  rules apply to it.
</p>

two classes (space separated)

Command Line

Command Line
Interface

Graphical User Interface (GUI)

  • Text-based interface
     
  • Hard to learn
     
  • Very efficient for experts
  • Windows, Icons, Menus, Pointers (e.g,. WIMP)
     
  • Easy to learn
     
  • Not much more efficient for experts

Mac: command + space, search for "Terminal"
Windows: open Git Bash (installed previously?)

Command Shell

Command Shell

Where are we?

 pwd

(print working directory)

Directory Tree

What's here?

 ls

(list contents)

Change Location

 cd folder

(change directory)

argument (required)

command

Paths

/absolute/path/to/file

relative/path/to/file

How to get there starting from the root

How to get there starting from here

leading slash

Path Symbols

 .

(a period):
the current directory

 ..

(two periods):
the parent directory

Path Practice

# if I start here:
$ pwd
/Users/iguest/Desktop

# and then do this:
$ cd ../Desktop/lectures/.././../

#where do I end up?
# if I start here:
$ pwd
/Users/iguest/Desktop

# and then do this:
$ cd /../Desktop

#where do I end up?

ALWAYS USE RELATIVE PATHS IN CODE!

More File Commands

 mkdir

(make directory)

 rm

(remove file or folder)

 cp

(copy file or folder)

 open

(Mac: open a file or folder )

 start

(Windows: open a file or folder )

Display Text

 echo "message"

(echo text back)

When in doubt:


ctrl-c (control and c)

to cancel!

CLI Applications

In this class we'll run multiple applications (programs) through the command line. 

Instead of opening a program by clicking on it, you'll execute a program through a CLI command.

CLI apps we'll use:

  • npm for installing and managing programs and dependencies
  • git for version control
  • jest for grading problem sets
  • live-server and vite for running web servers
  • ... and more! 

npm

npm is a command line package manager ("app store") that comes with Node.js. Used to manage external libraries and applications.

  1. npm install -g PACKAGE_NAME to globally (whole computer) install command line programs.

    • Or can use npx PACKAGE_NAME to download and run without installing
  2. npm install PACKAGE_NAME to locally (per project) install a new code package and record it in the package.json file.
  3. npm install to locally install all of the package.json listed dependencies for a project.

live-server

cd path/to/project
npx live-server .

where index.html is!

dot to serve entire folder

You can run a local development server by using the live-server application on the command line.

Access the webpage at http://localhost:8080/index.html

Stop the server by using ctrl+c in the command shell.

Grading Your Work

Exercises contain test suites that you can use to check your work. Run these tests using the Jest test framework:

Optional: install jest globally (or just use npx)

npm install -g jest

Run a particular test suite (e.g., for problem-name.spec.js):

npx jest problem-name
   # or if installed:
jest problem-name

Install the dependencies listed in package.json

# must be in project dir
npm install

Debug code using the browser, not using Jest!

Use Jest only for grading
(once everything is done)

Action Items!

  • Finish the "Start Here" steps on Canvas (if you haven't yet)

  • Complete task list for Week 1 (all items)

    • Do all readings (skim at least)

    • Videos "optional" unless you need them

    • Reading for next week: Ch 3 in PS4DS

 

Next: Git and GitHub