31:T5db,## HTML vs CSS HTML and CSS are the languages used to create web pages to be displayed by web browsers. Specifically: - HyperText Markup Language (abbreviated HTML) is a powerful full-featured markup language for web pages. HTML uses markup to provide meaning to web page **content**, such as marking which content should be considered a **header** versus a **paragraph** of text. - Cascading Style Sheets (abbreviated CSS) is a powerful stylesheet language used alongside HTML to describe the **style or presentation** of web page content. CSS determines that header content should be styled with large bold text, whereas paragraph content should not. The line between the two can get fuzzy^{[1](https://css-tricks.com/fun-with-blurred-text/)}, but the stronger you attempt to keep this delineation the better. We will learn and use basic HTML and CSS in this class. Both languages are very powerful, but advanced topics in HTML and CSS are beyond the scope of this class. ### Resources I recommend the resources provided by [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML) (formerly the Mozilla Developer Network) for both [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). Their "Beginner's tutorials" are an excellent starting point.32:T6b4,### Selecting Classes and IDs HTML allows for elements to have [class](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class) and [id](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id) attributes. - A **class** is an attribute where multiple elements may share that class and should generally describe the purpose of the element rather than the style. Elements may also have more than one class assigned at a time. For example, `alert danger` might describe an element that is an alert that something went wrong whereas `alert success` might describe an element that is an alert that something was successful. - An **id** is an attribute where only a single element should have that value (a unique identifier). Elements may only have a single ID at a time. For example, `cell-8` might describe the 8th cell in a notebook and `cell-9` might describe the 9th cell. Each of these must be unique values. We can use these attributes to select elements. - the element name (such as `p` or `li`) using the name itself - the class name using the `.` dot or period symbol followed by the class name (such as `.alert`) - the ID name using the `#` pound or hashtag symbol followed by the ID name (such as `#cell-8`) We can combine the element name and class or id as well, like `p.alert` or `div#cell-8`, or nest our selections. To demonstrate, we will wrap our previous teapot example in a `div` with an id so we can select it for styling. For now, we'll change the background color of each element selected using the [named CSS colors](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color) to ideally create something like this:33:T4c7,

418 Teapot

I’m a teapot.
The requested entity body is:
1. ~~short~~ and
2. stout.
Tip me over and pour me out.

34:[] 2f:{"title":"Intro to HTML and CSS","cells":[{"id":0,"value":"# Intro to HTML and CSS\n\nThis notebook introduces [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) basics.\n\n**NOTE TO SELF: Turn on [tinker mode](https://observablehq.com/documentation/collaboration/tinker-mode#modifying-your-own-notebook-temporarily) before starting live demo.**","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## HTML Basics\n\nWe will start by converting the markdown examples from the [Intro to Observable](https://observablehq.com/@hmc-datavis-fall2025/intro-to-observable) notebook to HTML.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"### Basic Formatting\n\nThe example should look like this:","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"

418 Teapot

\n\n

I’m a teapot.
\n The requested entity body is:\n\n
1. ~~short~~ and
2. stout.
\n \n
Tip me over and pour me out.

","pinned":false,"hidden":false,"mode":"html"},{"id":64,"value":"Make sure to understand the difference between marking the content (using `strong` tags) versus the style (using `b` tags).","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"418 Teapot\nI’m a teapot.\nThe requested entity body is short and stout.\nTip me over and pour me out.","pinned":true,"hidden":false,"mode":"html"},{"id":46,"value":"### Block Quotations\n\nThe example should look like this:","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"

\n
\"The greatest value of a picture is when it forces us to notice what we never expected to see.\"
\n – John W. Tukey, Exploratory Data Analysis, Addison-Wesley, ISBN 978-0-201-07616-5, 1977\n

","pinned":false,"hidden":false,"mode":"html"},{"id":68,"value":"Note that how we use the [`cite`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite) tag is technically incorrect, but is how we get it to match the Markdown output.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"\"The greatest value of a picture is when it forces us to notice what we never expected to see.\"\n– John W. Tukey, Exploratory Data Analysis, Addison-Wesley, ISBN 978-0-201-07616-5, 1977","pinned":true,"hidden":false,"mode":"html"},{"id":70,"value":"### Images\n\nThe example should look like this:\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"https://imgs.xkcd.com/comics/self_description.png","pinned":true,"hidden":false,"mode":"html"},{"id":75,"value":"### Tables\n\nThis example is difficult to exactly replicate without CSS, so we will render a slightly simpler version of the table as follows:","pinned":false,"hidden":false,"mode":"md"},{"id":78,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Status Code	Status Text	Description
200	OK	The request succeeded.
302	Found	Resource location changed temporarily.
404	Not Found	Cannot find the requested resource.
410	Gone	Resource permanently deleted.

","pinned":false,"hidden":false,"mode":"html"},{"id":82,"value":"Status Code | Status Text | Description\n 200 | OK | The request succeeded.\n 302 | Found | Resource location changed temporarily.\n 404 | Not Found | Cannot find the requested resource.\n 410 | Gone | Resource permanently deleted.","pinned":true,"hidden":false,"mode":"html"},{"id":85,"value":"### Code Blocks\n\nThis example is difficult to exactly replicate with syntax highlighting, which is done using the [highlight.js](https://highlightjs.org/) JavaScript library to generate the syntax highlighting.\n\nInstead, we will render a code block *without* the syntax highlighting:","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"

{\n  // get today's date \n  let today = new Date(now);\n\n  /* output depends on minutes */\n  if (today.getMinutes() % 2 == 0) {\n    return 'The time is even.';\n  }\n  else {\n    return 'The time is odd.';\n  }\n}

","pinned":false,"hidden":false,"mode":"html"},{"id":94,"value":"{\n // get today's date \n let today = new Date(now);\n\n /* output depends on minutes */\n if (today.getMinutes() % 2 == 0) {\n return 'The time is even.';\n }\n else {\n return 'The time is odd.';\n }\n}","pinned":true,"hidden":false,"mode":"html"},{"id":97,"value":"If you are curious, however, this is what the HTML looks like *after* the [highlight.js](https://highlightjs.org/) JavaScript library modifies the HTML to provide syntax highlighting:","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"

{\n  // get today's date \n  let today = new Date(now);\n\n  /* output depends on minutes */\n  if (today.getMinutes() % 2 == 0) {\n    return 'The time is even.';\n  }\n  else {\n    return 'The time is odd.';\n  }\n}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"## CSS Basics\n\nNow, we will modify the style of the HTML snippets we created earlier. To make sure we do not impact the *entire* notebook's style, we must first learn how to select only the elements we are interested in.","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"

418 Teapot

\n \n

I’m a teapot.
\n The requested entity body is:\n \n
1. ~~short~~ and
2. stout.
\n \n
Tip me over and pour me out.

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":138,"value":"

418 Teapot

\n \n

I’m a teapot.
\n The requested entity body is:\n \n
1. ~~short~~ and
2. stout.
\n \n
Tip me over and pour me out.

","pinned":true,"hidden":false,"mode":"html"},{"id":164,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":167,"value":"### Styling Text\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"Now that we now know to select **what** to style, we can begin to play around with the style itself. For this example, we'll demonstrate how to import a web font like [Fira Code](https://fonts.google.com/specimen/Fira+Code) and use it. Here is the completed example:","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":199,"value":"

418 Teapot

\n \n

I’m a teapot.
\n The requested entity body is:\n \n
1. ~~short~~ and
2. stout.
\n \n
Tip me over and pour me out.

","pinned":true,"hidden":false,"mode":"html"},{"id":202,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":204,"value":"### Fancy Selections\n\nWe've demonstrated some basic selections and styles, but we can do even more than that. For example, instead of always having to include the opening and closing `\"` quotation marks, we can insert them using CSS:","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"

\n
The greatest value of a picture is when it forces us to notice what we never expected to see.
\n – John W. Tukey, Exploratory Data Analysis, Addison-Wesley, ISBN 978-0-201-07616-5, 1977\n

\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":215,"value":"Or, we can select elements that are hovered over by the mouse and/or specific children within an element for styling:","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Status Code	Status Text	Description
200	OK	The request succeeded.
302	Found	Resource location changed temporarily.
404	Not Found	Cannot find the requested resource.
410	Gone	Resource permanently deleted.

","pinned":false,"hidden":false,"mode":"html"},{"id":219,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W34","stdlib":"1","titling":"auto"}