Lecture 33


MCS 275 Spring 2022
David Dumas

Lecture 33: HTML and CSS

Course bulletins:

  • Project 3 final scores and feedback available.
  • Project 4 to be posted on Wednesday.
  • Worksheet 12 is about SQL; must watch lectures 30, 32 to prepare

Prep for SQL lab

Install the SQLite command line shell to prepare for this week's lab.

The lab will also involve using SQLite from within Python programs.

New unit

We're starting a unit on programming for the web, leading up to building web applications in Python.


  • Major Python application domain
  • Lets us develop a complex example program over a series of lectures

Core web technologies

HTML - Hypertext Markup Language. Web page content language.

CSS - Cascading Style Sheets. Web page style language. (margins, fonts, colors, ...)

JS - JavaScript. The language that runs in the browser to provide complex interactivity on web sites.

HTTP - Hypertext Transfer Protocol. The network protocol used to send all of the above from a server to the browser (client).

URL - Uniform Resource Locator. A string that describes where a resource (e.g. web page) is, and how to get it (e.g. HTTP).

Opening developer tools in your browser with Ctrl-Shift-i will let you explore most of these for live pages.


First developed in 1993 by physicist Tim Berners-Lee.

Uses plain text with tags to indicate the structure of a document (and to add links, images, other resources).

Many versions of HTML exist, but the modern and most widely-used one is called HTML5.

HTML example

        <!doctype html>
            <title>Document title as seen in browser tab</title>
            Content you'll see in the browser window.

Indenting is optional. Note how start tags and end tags (like <tagname> and </tagname>) function like parentheses, surrounding the text they apply to.

A few useful tags

p paragraph
ul unordered (bullet) list
ol ordered (numbered) list
li item in a list
strong important text to be emphasized

A few useful tags

h1, h2, ..., h6 headings for document, section, subsection, etc.
divComponent (division) of a document
a link to another resource
img image (no end tag)

The a and img tags require attributes to be useful. These are key=value pairs in the start tag, e.g.

        See the <a href="http://example.com/">example.com web site</a>.

        My kitten, Mr. Mittens: <img src="kitten.jpg">


HTML is for a document's content, with logical parts indicated by tags.

CSS is a related language for specifying presentation or style (spacing, color, typeface, etc.)

CSS example

        body {
            font-family: sans-serif;
            background: #C0C0C0;
            max-width: 45rem;
            padding: 2rem;
            margin: auto;
        a { 
            color: #000050;
            text-decoration: none;
        a:hover {
            text-decoration: underline;

One way to apply it to a HTML document is to place the CSS code within a style tag in the header.


jsfiddle is a convenient online tool for experimenting with HTML and CSS.

External stylesheet

Place inside the <head> of your HTML document:

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

Putting content and style in separate files is a good idea! Often, many HTML documents use the same CSS.


Revision history

  • 2022-04-04 Initial publication