Notes for CSS - Overview - Condensed

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 2

https://granneman.com/downloads/web-dev/CSS-Overview-Condensed.pdf

https://granneman.com/downloads/web-dev/CSS-Overview-Condensed.txt

## Slide 3

https://www.granneman.com/presentations/all-presentations

## Slide 4

Granneman, R. Scott. “Home”. Scott Granneman, http://www.granneman.com. 

## Slide 5

Bernhardt, Gary [@garybernhardt]. Twitter, 10 Nov 2015, http://twitter.com/garybernhardt/status/664149582046040064. Web. 13 Dec 2015.

## Slide 7

stormbrew. Comment on “Centering in CSS (web.dev)”. Hacker News, 18 Dec 2020, https://news.ycombinator.com/item?id=25464960. Web. 18 Dec 2020.

## Slide 9

Notario, Elaina. “Tailwind and the Femininity of CSS”. thoughtbot, 15 Dec 2021, https://thoughtbot.com/blog/tailwind-and-the-femininity-of-css. Web. 12 Nov 2023.

Notario, Elaina [@elainanatario]. “@elaina.bsky.social”. Xitter, https://twitter.com/elainanatario. Web. 12 Nov 2023.

Fair use. Modified by converting to the WebP format.

## Slide 10

Keith, Jeremy. “CSS”. Adactio, 18 July 2017, https://adactio.com/journal/12571. Web. 12 Nov 2023.

Posselt, Norman. “File:Jeremy Keith in 2019.jpg”. Wikipedia, The Free Encyclopedia, 11 Nov 2021, https://en.wikipedia.org/wiki/File:Jeremy_Keith_in_2019.jpg. Web. 12 Nov 2023.

Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by converting to the WebP format.

## Slide 11

maigret. [Comment on Hacker News post “Knowing CSS is mastery to front end development”]. Hacker News, 2 Mar. 2025, https://news.ycombinator.com/item?id=43228246. Web. 3 Mar. 2025.

## Slide 12

Suzanne, Miriam Eric [@TerribleMia]. “CSS has been *carefully* & *systematically* designed to solve a set of problems so complex no other language even tries. There are no comparisons to make. ¶ Meanwhile, the basics *look* so declarative & clear that people don't even think of it as "programming".” Twitter, 4 Dec 2020, https://twitter.com/TerribleMia/status/1334918310912135170. Web. 5 Dec 2020.

## Slide 13

Sophie [@sophie@social.lol]. “If you think CSS is some kind of "problem" that needs solving with frameworks, perhaps first consider that maybe the problem is that you don't know how to use it”. *Mastodon*. social.lol, 12 Nov 2023, https://social.lol/@sophie/111397855913360709. Web. 12 Nov 2023.

## Slide 14

Riviere, Alex [@fimion@notacult.social]. “I saw someone else say this, and I don't disagree: CSS is the only language that gets blamed when the author is bad.”. Mastodon. notacult.social, 8 Dec 2023, https://notacult.social/@fimion/111548164693889592. Web. 10 Dec 2023.

Riviere, Alex [@fimion@notacult.social]. “Alex Riviere [@fimion@notacult.social]”. Mastodon. notacult.social, 8 Dec 2023, https://notacult.social/@fimion. Web. 10 Dec 2023.

Fair use. Modified by converting to the WebP format.

## Slide 16

Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 23 Sep. 2022, https://en.wikipedia.org/wiki/CSS. Web. 3 Oct. 2022.

## Slide 17

Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 23 Sep. 2022, https://en.wikipedia.org/wiki/CSS. Web. 3 Oct. 2022.

## Slide 18

Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 23 Sep. 2022, https://en.wikipedia.org/wiki/CSS. Web. 3 Oct. 2022.

## Slide 19

Bos, Bert. “CSS current work & how to participate”. CSS Specifications, W3C, 17 Sep 2022, https://www.w3.org/Style/CSS/current-work. Web. 2 Oct 2022.

## Slide 20

Bos, Bert. “CSS current work & how to participate”. CSS Specifications, W3C, 17 Sep 2022, https://www.w3.org/Style/CSS/current-work. Web. 2 Oct 2022.

## Slide 21

Deveria, Alexis [@Fyrd]. “CSS Grid Layout”. Can I use…, 18 Oct 2017, http://caniuse.com/#search=grid. Web. 18 Oct 2017.

Still CR as of 2 Oct 2022

## Slide 23

Q-Success. “Usage statistics of site elements for websites”. W3Techs - World Wide Web Technology Surveys, 4 Oct 2023, https://w3techs.com/technologies/overview/site_element. Web. 4 Oct 2023.

96.4% in Oct. 2022

95.5% in Sep. 2020

## Slide 24

Some HTML elements are conveniences for avoiding writing CSS (e.g., <b>, <i>, <s>) or for structure (<div> & <span>)

Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition)

Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior

Wikipedia contributors. “Separation of concerns”. Wikipedia, The Free Encyclopedia, 20 Mar. 2024, https://en.wikipedia.org/wiki/Separation_of_concerns. Web. 15 Apr. 2024.

## Slide 25

WebSanity. “HTML: font element”. CodePen, 2 Oct 2022, https://codepen.io/websanity/pen/wvzvzj?editors=1000. Web. 02 Oct 2022.

Lovecraft, H.P. “At the Mountains of Madness”. The H.P. Lovecraft Archive, 20 Aug 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 2 Oct 2022.

## Slide 30

Credit: Crying at the Discoteque by Fhernando (http://fhernando.bandpage.com/).

Fhernando. “Crying at the Discoteque”. Free Music Archive, 31 July 2012, https://freemusicarchive.org/music/Fhernando/none_given_1383/08__Fhernando__Crying_At_The_Discoteque__Last_Days_Of_Disco__FrostWirecom_FrostClickcom_Creative_Common/. Web. 26 Sep 2022.

Licensed CC BY-NC-SA 3.0: https://creativecommons.org/licenses/by-nc-sa/3.0/. Modified by clipping down to 28.06 seconds.

## Slide 37

You can use other names, but css or styles are most common

## Slide 38

The file can have any name, like search.css or foobar.css; it’s just that main.css is among the most common & is one we’ll use in my courses

## Slide 48

WebSanity. “Integrating CSS - embedded styles”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/aQPXrX?editors=1000. Web. 7 July 2020. 

## Slide 50

So why use embedded styles?

Resource inlining: embedding reduces outbound requests; other examples include embedding JavaScript via <script> & base64 encoding in Data URLs

Portability: You have a widget that may get embedded into another webpage on another site, so embed the styles with the HTML (although this now should be done with Web Components)

Grigorik, Ilya. High Performance Browser Networking. O’Reilly Media, 2013. O’Reilly Atlas, https://web.archive.org/web/20170726134858/http://chimera.labs.oreilly.com/books/1230000000545/ch11.html#RESOURCE_INLINING. (Also see https://hpbn.co/http1x/#resource-inlining)

## Slide 53

WebSanity. “HTML global attribute: style”. CodePen, 2 May 2014, http://codepen.io/websanity/pen/cLqbJ?editors=1000. Web. 2 May 2014.

## Slide 54

So when is it useful? HTML email (but only because there are no standards for HTML email, which is why it’s a nightmare to code)

## Slide 58

WebSanity. “Integrating CSS: @import”. CodePen, 4 Dec 2018, https://codepen.io/websanity/pen/vQMgrY?editors=1100. Web. 4 Dec 2018. 

## Slide 59

WebSanity. “Integrating CSS: @import”. CodePen, 4 Dec 2018, https://codepen.io/websanity/pen/vQMgrY?editors=1100. Web. 4 Dec 2018.

## Slide 62

This was last seen in Web Development: The Absolute Basics

Diagram by Scott Granneman & Jans Carton

## Slide 63

A more accurate representation for the Browser Processing Pipeline

Diagram by Scott Granneman & Jans Carton

## Slide 64

van Kesteren, Anne, et al. “DOM Standard”. WHATWG, 25 Aug 2022, https://dom.spec.whatwg.org. Web. 3 Oct 2022.

Glazman, Daniel, et al. “CSS Object Model (CSSOM)”. W3C, 26 Aug 2021, https://www.w3.org/TR/cssom-1/. Web. 3 Oct 2022.

MDN contributors. “CSS Object Model (CSSOM)”. MDN Web Docs, 16 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model. Web. 26 Sep 2022.

MDN contributors. “Populating the page: how browsers work”. MDN Web Docs, 14 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work. Web. 3 Oct 2022.

Liccini, Joe. “An Introduction to the Browser Rendering Pipeline”. Web Performance Tips, 21 Feb 2022, https://www.webperf.tips/tip/browser-rendering-pipeline/. Web. 3 Oct 2022.

## Slide 66

Emphasis added

Wikipedia contributors. “Conceptual model”. Wikipedia, The Free Encyclopedia, 24 Jun. 2021, https://en.wikipedia.org/w/index.php?title=Conceptual_model&oldid=1030234438. Web. 11 Apr. 2022.

## Slide 67

Beinahegut. “Comprehensive overview of the Solar System”. Wikimedia, 29 May 2018, https://en.wikipedia.org/wiki/File:Solar-System.pdf. Licensed CC BY-SA 4.0.

## Slide 68

Marekich. “File:Nucleus drawing.svg” Wikimedia, 28 September 2012, https://en.wikipedia.org/wiki/File:Nucleus_drawing.svg. Licensed CC BY-SA 3.0.

## Slide 69

burlesonmatthew. “Carbon Hydrogen Atom Molecule Chemistry Chemical”. Pixabay, 12 April 2017, https://pixabay.com/illustrations/carbon-hydrogen-atom-molecule-2222968/?download. Licensed by Pixabay: Free for commercial use; No attribution required.

## Slide 70

Top left: Booyabazooka. “Water molecule”. Wikimedia, 18 July 2006, https://commons.wikimedia.org/wiki/File:Water_molecule_(1).svg. Licensed public domain.

Top right: MsKDinh. “Ball and stick model of water molecule labelled with element symbol”. Wikimedia, 2020-11-05 November 2020, https://commons.wikimedia.org/wiki/File:Water_Molecule_Ball_and_Stick.png. Licensed CC BY-SA 4.0.

Bottom left: Mills, Ben. “Structure and dimensions of water molecule”. Wikimedia, 21 May 2009, https://commons.wikimedia.org/wiki/File:Water-dimensions-from-Greenwood%26Earnshaw-2D.png. Licensed public domain. 

Molecule definition: Wikipedia contributors. “Molecule”. Wikipedia, 6 July 2021, https://en.wikipedia.org/w/index.php?title=Molecule&oldid=1032275060. 

## Slide 71

LadyofHats (Mariana Ruiz). “File:Animal cell structure en.svg”. Wikipedia, Apr. 2006, https://en.wikipedia.org/wiki/File:Animal_cell_structure_en.svg. Web. 11 Apr 2022. Public domain.

## Slide 72

Androidmarsexpress. “Maslow's Hierarchy of Needs”. Wikimedia, 10 August 2020, https://en.wikipedia.org/wiki/File:Maslow%27s_Hierarchy_of_Needs2.svg. Licensed CC BY-SA 4.0. 

## Slide 73

Diagram by Scott Granneman & Jans Carton

## Slide 74

van Kesteren, Anne, et al. “DOM Standard”. WHATWG, 25 Aug 2022, https://dom.spec.whatwg.org. Web. 3 Oct 2022.

## Slide 75

Emphasis added

MDN contributors. “Introduction to the DOM”. MDN Web Docs, 3 Dec. 2018, https://web.archive.org/web/20190107134340/https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction. Web. 7 Jan 2019.

## Slide 76

van Kesteren, Anne, et al. “DOM Standard”. WHATWG, 25 Aug 2022, https://dom.spec.whatwg.org. Web. 3 Oct 2022.

## Slide 79

Wikipedia contributors. “The Thing (1982 film)”. Wikipedia, The Free Encyclopedia, 22 Sep. 2022, https://en.wikipedia.org/wiki/The_Thing_%281982_film%29. Web. 26 Sep. 2022.

## Slide 80

Wikipedia contributors. “The Thing (1982 film)”. Wikipedia, The Free Encyclopedia, 22 Sep. 2022, https://en.wikipedia.org/wiki/The_Thing_%281982_film%29. Web. 26 Sep. 2022.

## Slide 81

Wikipedia contributors. “The Thing (1982 film)”. Wikipedia, The Free Encyclopedia, 22 Sep. 2022, https://en.wikipedia.org/wiki/The_Thing_%281982_film%29. Web. 26 Sep. 2022.

## Slide 82

Wikipedia contributors. “The Thing (1982 film)”. Wikipedia, The Free Encyclopedia, 22 Sep. 2022, https://en.wikipedia.org/wiki/The_Thing_%281982_film%29. Web. 26 Sep. 2022.

## Slide 83

Wikipedia contributors. “The Thing (1982 film)”. Wikipedia, The Free Encyclopedia, 22 Sep. 2022, https://en.wikipedia.org/wiki/The_Thing_%281982_film%29. Web. 26 Sep. 2022.

## Slide 89

3D View stopped working in Firefox 47: MDN contributors. “3D view”. Firefox Source Docs, 18 Feb 2022, https://web.archive.org/web/20220321183859/https://developer.mozilla.org/en-US/docs/Tools/3D_View. Web. 26 Sep 2022.

Tilt 3D was an extension that worked up to Firefox 21: Porof, Victor & robcee. “Tilt 3D”. Add-ons for Firefox, 23 Dec 2011, https://web.archive.org/web/20181101232316/https://addons.mozilla.org/en-US/firefox/addon/tilt/. Web. 26 Sep 2022.

## Slide 90

Chen, Brian X. “Simplifying the Bull: How Picasso Helps to Teach Apple’s Style”. The New York Times, 10 Aug 2014, http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology. Web. 10 Aug 2014.

## Slide 91

Chen, Brian X. “Simplifying the Bull: How Picasso Helps to Teach Apple’s Style”. The New York Times, 10 Aug 2014, http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology. Web. 10 Aug 2014.

## Slide 92

Chen, Brian X. “Simplifying the Bull: How Picasso Helps to Teach Apple’s Style”. The New York Times, 10 Aug 2014, http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology. Web. 10 Aug 2014.

## Slide 93

Chen, Brian X. “Simplifying the Bull: How Picasso Helps to Teach Apple’s Style”. The New York Times, 10 Aug 2014, http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology. Web. 10 Aug 2014.

## Slide 95

Diagram by Scott Granneman & Jans Carton

## Slide 96

MDN contributors. “CSS Object Model (CSSOM)”. MDN Web Docs, 16 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model. Web. 26 Sep 2022.

Glazman, Daniel, et al. “CSS Object Model (CSSOM)”. W3C, 26 Aug 2021, https://www.w3.org/TR/cssom-1/. Web. 3 Oct 2022.

## Slide 98

Diagram by Scott Granneman & Jans Carton

## Slide 99

MDN contributors. “Web APIs”. MDN Web Docs, 19 Feb. 2023, https://web.archive.org/web/20250223072133/https://developer.mozilla.org/en-US/docs/Web/API. Web. 3 Mar. 2025.

September 2022: 80 available, 26 experimental, 1 deprecated. MDN contributors. “Web APIs”. MDN Web Docs, 2 Sep 2022, https://web.archive.org/web/20220901000258/https://developer.mozilla.org/en-US/docs/Web/API. Web. 26 Sep 2022.

July 2020: 69 available APIs

## Slide 100

MDN contributors. “Web APIs”. MDN Web Docs, 19 Feb. 2023, https://web.archive.org/web/20250223072133/https://developer.mozilla.org/en-US/docs/Web/API. Web. 3 Mar. 2025.

## Slide 101

MDN contributors. “Web APIs”. MDN Web Docs, 2 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/API. Web. 26 Sep 2022.

## Slide 102

The Render Tree also adds things that weren’t in the DOM, like list item marker boxes or anonymous block boxes

Diagram by Scott Granneman & Jans Carton

MDN contributors. “Populating the page: how browsers work”. MDN Web Docs, 14 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work. Web. 3 Oct 2022.

Liccini, Joe. “An Introduction to the Browser Rendering Pipeline”. Web Performance Tips, 21 Feb 2022, https://www.webperf.tips/tip/browser-rendering-pipeline/. Web. 3 Oct 2022.

## Slide 103

Diagram by Scott Granneman & Jans Carton

MDN contributors. “Populating the page: how browsers work”. MDN Web Docs, 14 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work. Web. 3 Oct 2022.

Liccini, Joe. “An Introduction to the Browser Rendering Pipeline”. Web Performance Tips, 21 Feb 2022, https://www.webperf.tips/tip/browser-rendering-pipeline/. Web. 3 Oct 2022.

## Slide 104

Diagram by Scott Granneman & Jans Carton

MDN contributors. “Populating the page: how browsers work”. MDN Web Docs, 14 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work. Web. 3 Oct 2022.

Liccini, Joe. “An Introduction to the Browser Rendering Pipeline”. Web Performance Tips, 21 Feb 2022, https://www.webperf.tips/tip/browser-rendering-pipeline/. Web. 3 Oct 2022.

## Slide 105

Diagram by Scott Granneman & Jans Carton

MDN contributors. “Introduction to events”. MDN Web Docs, 20 Sep 2022, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events. Web. 3 Oct 2022.

## Slide 106

Wikipedia contributors. “Document Object Model”. Wikipedia, The Free Encyclopedia, 22 May 2021, https://en.wikipedia.org/wiki/Document_Object_Model. Web. 3 Oct. 2022.

MDN contributors. “Introduction to events”. MDN Web Docs, 20 Sep 2022, https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events. Web. 3 Oct 2022.

## Slide 107

If you hear people say that a CSS selector affects all instances of an HTML element, it’s really all the DOM objects generated by those HTML elements

## Slide 110

Laziris, Louis. “CSS Rules vs. CSS Rulesets”. Impressive Webs, 20 Sep 2022, https://web.archive.org/web/20220922234932/https://www.impressivewebs.com/css-rules-vs-css-rulesets/. Web. 26 Sep 2022.

Atkins Jr., Tab & Simon Sapin. “9.1. Style rules”. CSS Syntax Module Level 3, W3C, 24 Dec 2021, https://www.w3.org/TR/css-syntax-3/#style-rules. Web. 2 Oct 2022.
“Style rule” used to be called “ruleset”, “rule set”, or just “rule” (the problem with “rule” by itself is that there are other rules besides style rules, e.g., at-rules & nesting rules, which can get confusing)
“ruleset”: MDN contributers. “CSS rulesets” on “Syntax”. MDN Web Docs, 12 August 2021, https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_rulesets. 
“rule set” & “rule”: Bos, Bert, Tantek Çelik, Ian Hickson, & Håkon Wium Lie. “Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification”. World Wide Web Consortium, 07 June 2011, https://www.w3.org/TR/CSS2/syndata.html#rule-sets.

## Slide 111

Graham, Geoff. “CSS Rules vs. CSS Rulesets”. CSS-Tricks, 21 Sep 2022, https://css-tricks.com/css-rules-vs-css-rulesets/. Web. 26 June 2023.

## Slide 112

1: type, .class, #ID, E F, pseudo classes (:link, :visited, & :active), pseudo-elements (::first-line & ::first-letter) + grouping

2: *, [foo], [foo="bar"], [foo~="bar"], [foo|="en"], :first-child, :lang(fr), (:active), :hover, :focus, ::before, ::after, E > F, E + F

3: [foo^="bar"], [foo$="bar"], [foo*="bar"], ::marker, :root, :empty, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :target, :enabled, :disabled, :checked, :indeterminate, :not(s), E ~ F

4: ::first-letter::prefix, ::first-letter::postfix, ::selection, ::target-text, ::spelling-error, ::grammar-error, ::placeholder, ::file-selector-button, :is(), :not(), :where(), :has(), :defined, :dir(), :lang(), :any-link, :local-link, :target-within, :scope, :focus-visible, :focus-within, :current, :past, :future, :playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked, :open, :closed, :modal, :fullscreen, :picture-in-picture, :read-only, :read-write, :placeholder-shown, :autofill, :default, :blank, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :user-valid, :user-invalid, :nth-col(), :nth-last-col(), E || F

Lie, Håkon Wium & Bert Bos. “Cascading Style Sheets, level 1”. W3C, 11 Apr 2008, https://www.w3.org/TR/REC-CSS1/. Web. 26 Sep 2022.

Bos, Bert. “Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification”. W3C, 7 Dec 2021, https://www.w3.org/TR/CSS21/. Web. 26 Sep 2022.

Çelik, Tantek. “Selectors Level 3”. W3C, 6 Nov 2018, https://www.w3.org/TR/selectors-3/. Web. 26 Sep 2022.
::marker: Elika J. Etemad / fantasai et al. “CSS Lists and Counters Module Level 3”. World Wide Web Consortium (W3C), 17 Nov. 2020, https://www.w3.org/TR/css-lists-3/#changes-from-css2. Web. 3 Mar. 2025. In particular see https://www.w3.org/TR/css-lists-3/#changes-from-css2.

Etemad, Elika J. [fantasai] et al. “Selectors Level 4”. W3C, 11 Nov. 2022, https://www.w3.org/TR/2022/WD-selectors-4-20221111/. Web. 30 July 2024.

## Slide 113

Etemad, Elika J. [fantasai]. “3.1. Structure and Terminology”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#structure. Web. 2 Oct 2022.

## Slide 118

WebSanity. “CSS: type selectors”. CodePen, 7 May 2014, https://codepen.io/websanity/pen/jOVNQa?editors=1100. Web. 7 May 2014.

## Slide 120

Class name is an identifier according to the spec, just like an ID name is

## Slide 121

WebSanity. “CSS: class selector”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/KKNPJQ?editors=1100. Web. 7 July 2020. 

## Slide 122

WebSanity. “CSS: class selector”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/KKNPJQ?editors=1100. Web. 7 July 2020. 

## Slide 123

WebSanity. “CSS: class selector”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/KKNPJQ?editors=1100. Web. 7 July 2020. 

## Slide 125

WebSanity. “CSS: class selector (multiple classes)”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/WNoJqv?editors=1100. Web. 11 Apr 2022.

## Slide 128

Hickson, Ian et al. “HTML Living Standard”. WHATWG, 22 Sep 2022, https://html.spec.whatwg.org/multipage/dom.html#classes. Web. 26 Sep 2022.

Also true for HTML 4.01: Raggett, Dave, et al. “7.5.2 Element Identifiers: the Id and Class Attributes.” HTML 4.01 Specification, W3C, 24 Dec. 1999, https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2.

## Slide 129

Ruscoe, Tony [tonyruscoe], et al. “Google HTML/CSS Style Guide”. Google Style Guides, GitHub, 6 May 2022, https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters. Web. 26 Sep 2022.

## Slide 130

Nɪsʜᴀɴᴛʜ ॐ. “What are the different kinds of cases?”. Stack Overflow, 10 Oct 2020, https://stackoverflow.com/a/64293621. Web. 23 Aug 2022.

Pugh, Dean. “A brief list of programming naming conventions”. DeanPugh.com, 20 Mar 2018, https://www.deanpugh.com/a-brief-list-of-programming-naming-conventions/. Web. 23 Aug 2022.

Wikipedia contributors. “Camel case”. Wikipedia, The Free Encyclopedia, 11 Aug. 2022, https://en.wikipedia.org/wiki/Camel_case. Web. 23 Aug. 2022.

Wikipedia contributors. “Letter case”. Wikipedia, The Free Encyclopedia, 15 Aug. 2022, https://en.wikipedia.org/wiki/Letter_case. Web. 23 Aug. 2022.

Wikipedia contributors. “Snake case”. Wikipedia, The Free Encyclopedia, 12 May 2022, https://en.wikipedia.org/wiki/Snake_case. Web. 23 Aug. 2022.

## Slide 132

Ruscoe, Tony [tonyruscoe], et al. “Google HTML/CSS Style Guide”. Google Style Guides, GitHub, 6 May 2022, https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming. Web. 26 Sep 2022.

## Slide 133

TODO: Add discussion of utility classes vs design pattern/structure identifier classes

## Slide 135

ID name is an identifier according to the spec, just like an class name is

## Slide 137

WebSanity. “CSS: id selector”. CodePen, 7 Dec 2018, https://codepen.io/websanity/pen/abBbWb?editors=1000. Web. 7 Dec 2018. 

## Slide 138

WebSanity. “CSS: id selector”. CodePen, 7 Dec 2018, https://codepen.io/websanity/pen/abBbWb?editors=1100. Web. 7 Dec 2018. 

## Slide 142

HttpWatch. “6 Things You Should Know About Fragment URLs”. HttpWatch, 1 Mar 2011, https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations. Web. 4 May 2022.

Wikipedia contributors. “URI fragment”. Wikipedia, The Free Encyclopedia, 6 Sep. 2022, https://en.wikipedia.org/wiki/URI_fragment. Web. 3 Oct. 2022.

Troncy, Raphaël. “Media Fragments URI 1.0 (basic)”. W3C, 25 Sep 2012, https://www.w3.org/TR/media-frags/. Web. 2 Oct 2022.

Berners-Lee, Tim. “URI References: Fragment Identifiers on URIs”. Design Issues, W3C, Apr 1997, https://www.w3.org/DesignIssues/Fragment.html. Web. 2 Oct 2022.

## Slide 144

HttpWatch. “6 Things You Should Know About Fragment URLs”. HttpWatch, 1 Mar 2011, https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations. Web. 4 May 2022.

Wikipedia contributors. “URI fragment”. Wikipedia, The Free Encyclopedia, 6 Sep. 2022, https://en.wikipedia.org/wiki/URI_fragment. Web. 3 Oct. 2022.

Troncy, Raphaël. “Media Fragments URI 1.0 (basic)”. W3C, 25 Sep 2012, https://www.w3.org/TR/media-frags/. Web. 2 Oct 2022.

Berners-Lee, Tim. “URI References: Fragment Identifiers on URIs”. Design Issues, W3C, Apr 1997, https://www.w3.org/DesignIssues/Fragment.html. Web. 2 Oct 2022.

## Slide 145

Granneman, R. Scott. “Page Fragment Identifiers - Links - HTML Overview, 2nd Edition”. Vimeo, 14 Mar 2023, https://vimeo.com/808119834. Web. 14 Mar 2023.

## Slide 147

WebSanity. “HTML: a element with URL fragments”. CodePen, 14 July 2020, http://codepen.io/websanity/pen/lGfLw?editors=100. Web. 26 Sep 2022.

## Slide 148

HttpWatch. “6 Things You Should Know About Fragment URLs”. HttpWatch, 1 Mar 2011, https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations. Web. 4 May 2022.

Wikipedia contributors. “URI fragment”. Wikipedia, The Free Encyclopedia, 6 Sep. 2022, https://en.wikipedia.org/wiki/URI_fragment. Web. 3 Oct. 2022.

Troncy, Raphaël. “Media Fragments URI 1.0 (basic)”. W3C, 25 Sep 2012, https://www.w3.org/TR/media-frags/. Web. 2 Oct 2022.

Berners-Lee, Tim. “URI References: Fragment Identifiers on URIs”. Design Issues, W3C, Apr 1997, https://www.w3.org/DesignIssues/Fragment.html. Web. 2 Oct 2022.

## Slide 154

WebSanity. “CSS: ID used as unique hook for JavaScript”. CodePen, 21 Jan 2016, https://codepen.io/websanity/pen/adEjdV?editors=1010. Web. 21 Jan 2016.

## Slide 155

WebSanity. “CSS: ID used as unique hook for JavaScript”. CodePen, 21 Jan 2016, https://codepen.io/websanity/pen/adEjdV?editors=1010. Web. 21 Jan 2016.

## Slide 158

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 159

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 160

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 161

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 162

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 163

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 164

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 165

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 166

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 167

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 168

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 169

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 170

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 171

WebSanity. “CSS: universal selector”. CodePen, 14 Mar 2023, https://codepen.io/websanity/pen/NWbWJE?editors=1000. Web. 14 Mar 2023.

## Slide 174

Etemad, Elika J. [fantasai]. “3.1. Structure and Terminology”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#structure. Web. 2 Oct 2022.

## Slide 177

Usually .alert is all you want, allowing you to use the class with any element

table.inventory.northwest matches
<table class="inventory northwest">

## Slide 180

WebSanity. “CSS: compound selectors”. CodePen, 13 May 2014, https://codepen.io/websanity/pen/eYBKNR?editors=1100. Web. 13 May 2014.

## Slide 181

Etemad, Elika J. [fantasai]. “3.1. Structure and Terminology”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#structure. Web. 2 Oct 2022.

## Slide 185

This used to be called key selectors

## Slide 186

Etemad, Elika J. [fantasai] et al. “3.1. Structure and Terminology”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#selector-subject. Web. 29 Sep 2022.

## Slide 190

WebSanity. “CSS: Complex selector using the descendant combinator”. CodePen, 23 Apr. 2024, https://codepen.io/websanity/pen/LYvMoMd?editors=1100. Web. 23 Apr. 2024.

## Slide 191

WebSanity. “CSS: Complex selector using the descendant combinator”. CodePen, 23 Apr. 2024, https://codepen.io/websanity/pen/LYvMoMd?editors=1100. Web. 23 Apr. 2024.

## Slide 192

WebSanity. “CSS: Complex selector using the descendant combinator”. CodePen, 23 Apr. 2024, https://codepen.io/websanity/pen/LYvMoMd?editors=1100. Web. 23 Apr. 2024.

## Slide 193

WebSanity. “CSS: Complex selector using the descendant combinator”. CodePen, 23 Apr. 2024, https://codepen.io/websanity/pen/LYvMoMd?editors=1100. Web. 23 Apr. 2024.

## Slide 194

WebSanity. “CSS: Complex selector using the descendant combinator”. CodePen, 23 Apr. 2024, https://codepen.io/websanity/pen/LYvMoMd?editors=1100. Web. 23 Apr. 2024.

## Slide 195

WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 196

WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 197

Focus on <small>
WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 198

Focus on <small>
WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 199

Focus on <a>
WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 200

Focus on <a>
WebSanity. “CSS: Descendant combinators”. CodePen, 15 July 2020, http://codepen.io/websanity/pen/KgrkmJ?editors=1100. Web. 15 July 2020. 

## Slide 203

WebSanity. “CSS: Child combinator with a table”. CodePen, 1 Dec 2020, http://codepen.io/websanity/pen/BjZNdL?editors=110. Web. 27 Sep 2022.

## Slide 204

WebSanity. “CSS: Child combinator with a table”. CodePen, 1 Dec 2020, http://codepen.io/websanity/pen/BjZNdL?editors=110. Web. 27 Sep 2022.

## Slide 205

WebSanity. “CSS: Child combinator with a table”. CodePen, 1 Dec 2020, http://codepen.io/websanity/pen/BjZNdL?editors=110. Web. 27 Sep 2022.

## Slide 206

WebSanity. “CSS: Child combinator with a table”. CodePen, 1 Dec 2020, http://codepen.io/websanity/pen/BjZNdL?editors=110. Web. 27 Sep 2022.

## Slide 208

Note that this assumes that every <img> inside <aside> is going to be a headshot

## Slide 210

WebSanity. “CSS: Leverage HTML structure in your CSS”. CodePen, 3 Oct 2022, https://codepen.io/websanity/pen/GRdGrgZ?editors=1100. Web. 03 Oct 2022.

## Slide 211

WebSanity. “CSS: Leverage HTML structure in your CSS”. CodePen, 3 Oct 2022, https://codepen.io/websanity/pen/GRdGrgZ?editors=1100. Web. 03 Oct 2022.

## Slide 213

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 214

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 215

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 216

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 217

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 218

In actuality, all you need is :first-child & :last-child, as the * is implied

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

## Slide 219

WebSanity. “CSS: Universal selector, practical example”. CodePen, 2 Apr. 2022, https://codepen.io/websanity/pen/QWqaBay?editors=1100. Web. 11 Apr 2022.

I was watching a movie from 1929 starring Maurice Chevalier, which explains the French 🥖👩‍🎨😃
## Slide 221

WebSanity. “CSS Complex Selectors: Descendant vs Child”. CodePen, 8 Nov 2018, https://codepen.io/websanity/pen/JeYrmb?editors=1100. Web. 8 Nov 2018. 

## Slide 222

WebSanity. “CSS Complex Selectors: Descendant vs Child”. CodePen, 8 Nov 2018, https://codepen.io/websanity/pen/JeYrmb?editors=1100. Web. 8 Nov 2018.

## Slide 223

Etemad, Elika J. [fantasai]. “3.1. Structure and Terminology”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#structure. Web. 2 Oct 2022.

## Slide 225

MDN contributors. “Selector list”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list. Web. 2 Oct 2022.

## Slide 235

The order does matter if two of the properties are the same, like:
    font-size: 12px;
    font-size: .75rem;
In that case, the second one wins. Why do that? In very rare cases, because you need to ensure backward compatibility with an old browser that doesn’t support the current property value.

## Slide 238

Wikipedia contributors. “Design pattern”. Wikipedia, The Free Encyclopedia, 27 Aug. 2022, https://en.wikipedia.org/wiki/Design_pattern. Web. 27 Sep. 2022.

Alexander, Christopher. A Pattern Language: Towns, Buildings, Construction. New York: Oxford University Press (1977). p. x.

## Slide 239

Déramond, Julien [julien-deramond]. “Supported content”. Navbar, Bootstrap Documentation, 14 Sep 2022, https://getbootstrap.com/docs/5.2/components/navbar/#supported-content. Web. 3 Oct 2022.

## Slide 240

Otto, Mark [mdo]. “Cards”. Bootstrap Documentation, 14 May 2020, https://getbootstrap.com/docs/4.5/components/card/. Web. 21 July 2020.

## Slide 246

WebSanity. “CSS Layout: Block & Inline”. CodePen, 14 Mar 2023, https://codepen.io/websanity/full/jOvzmvv. Web. 14 Mar 2023.

## Slide 248

Hickson, Ian, et al. “4.5.26 The span element”. HTML Living Standard, WHATWG, 28 Sep 2022, https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element. Web. 3 Oct 2022. 

## Slide 251

WebSanity. “HTML: span element”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/NWRrNz?editors=1100. Web. 11 Apr. 2022.

## Slide 253

Hickson, Ian, et al. “4.4.15 The div element”. HTML Living Standard, WHATWG, 28 Sep 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element. Web. 3 Oct 2022. 

## Slide 254

OK, <div> does do one thing without CSS: it creates a line break, but that’s not why you’d use it

## Slide 255

WebSanity. “HTML: Why to use the div element”. CodePen, 6 Apr 2016, http://codepen.io/websanity/pen/dMZgBP?editors=1000. Web. 29 Sep 2022.

Lovecraft, H. P. “The Case of Charles Dexter Ward”. The H. P. Lovecraft Archive, 20 Aug 2009, http://www.hplovecraft.com/writings/texts/fiction/cdw.aspx. Web. 29 Sep 2022.

## Slide 256

WebSanity. “HTML: Why to use the div element”. CodePen, 6 Apr 2016, http://codepen.io/websanity/pen/dMZgBP?editors=1000. Web. 29 Sep 2022.

## Slide 257

WebSanity. “HTML: Why to use the div element”. CodePen, 6 Apr 2016, http://codepen.io/websanity/pen/tEHnx?editors=110. Web. 29 Sep 2022.

## Slide 258

WebSanity. “HTML: Why to use the div element”. CodePen, 6 Apr 2016, http://codepen.io/websanity/pen/tEHnx?editors=110. Web. 29 Sep 2022.

## Slide 259

WebSanity. “HTML: Why to use the div element”. CodePen, 6 Apr 2016, http://codepen.io/websanity/pen/dMZgBP?editors=1000. Web. 29 Sep 2022.

## Slide 260

H. P. Lovecraft’s “The Dunwich Horror“, http://www.hplovecraft.com/writings/texts/fiction/dh.aspx

## Slide 261

WebSanity. “HTML: Reason to use a single div around a single element”. CodePen, 11 Apr 2022, https://codepen.io/websanity/pen/vYpaZKw?editors=1100. Web. 11 Apr 2022.

## Slide 263

What does Seamus look like? Why?

WebSanity. “CSS: Inheritance (stupid simple)”. CodePen, 13 May 2014, http://codepen.io/websanity/pen/bIDeA?editors=110. Web. 29 Sep 2022.

## Slide 264

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.2. Inheritance”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#inheriting. Web. 2 Oct 2022.

## Slide 265

WebSanity. “CSS: Inheritance”. CodePen, 9 May 2014, http://codepen.io/websanity/pen/gpnjK?editors=110. Web. 29 Sep 2022.

## Slide 266

As of September 2022, there are 84 inherited properties (see https://raw.githubusercontent.com/mdn/data/main/css/properties.json for the full list of properties)

## Slide 268

Etemad, Elika J. [fantasai], et al. “CSS Cascading and Inheritance Level 4”. W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#cascade-sort. Web. 2 Oct 2022.

## Slide 269

Etemad, Elika J. [fantasai], et al. “CSS Cascading and Inheritance Level 4”. W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#cascade-sort. Web. 2 Oct 2022.

## Slide 270

Raising Arizona. Directed by Joel Coen, performances by John Goodman & William Forsythe, 20th Century Fox, 1987.

## Slide 271

Etemad, Elika J. [fantasai], et al. “CSS Cascading and Inheritance Level 4”. W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#cascade-sort. Web. 2 Oct 2022.

## Slide 272

Created by Jans Carton & Scott Granneman

As of CSS Cascading and Inheritance Level 4 (August 2020), there have been a few big changes to the Cascade:
CSS Cascading and Inheritance Level 4 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/) adds encapsulation contexts (Shadow DOM) after Origin; more on this in the Web Components presentation

CSS Cascading and Inheritance Level 5 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-5/) adds cascade layers after Inline; more on that in the CSS Selectors presentation 

Changes involving Shadow DOM: Etemad, Elika J. [fantasai], et al. “6.1. Cascade Sorting Order”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#cascade-sort. Web. 2 Oct 2022.

## Slide 276

ffxbld. “layout/style/res/html.css”. Mercurial > mozilla-central, 26 Dec 2015, https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css. Web. 26 Dec 2015.

## Slide 277

margin-block-start is currently Mozilla-only

ffxbld. “layout/style/res/html.css”. Mercurial > mozilla-central, 26 Dec 2015, https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css. Web. 26 Dec 2015.

## Slide 278

Hsieh, Wenson. “html.css in webkit/trunk/Source/WebCore/css – WebKit”. WebKit, 29 Oct 2015, https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css. Web. 27 Dec 2015.

## Slide 279

1__qem = 1 quirky em = a margin which can be collapsed if the page is in quirks mode; see: Lawther, Mike. WebKit, 14 Feb 2012, https://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSPrimitiveValue.h?rev=107688#L167. Web. 4 Oct 2022.

Hsieh, Wenson. “html.css in webkit/trunk/Source/WebCore/css – WebKit”. WebKit, 29 Oct 2015, https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css. Web. 27 Dec 2015.

## Slide 280

Neal, Jonathan. “Opera 10.51 UA Style Sheet”. IECSS.com, 12 Feb 2011, https://web.archive.org/web/20111017194726/http://www.iecss.com/opera-10.51.css. Web. 4 Oct 2022.

## Slide 281

Neal, Jonathan. “Opera 10.51 UA Style Sheet”. IECSS.com, 12 Feb 2011, https://web.archive.org/web/20111017194726/http://www.iecss.com/opera-10.51.css. Web. 4 Oct 2022.

## Slide 282

Default rules for browser CSS

Hickson, Ian, et al. “15.2 The CSS user agent style sheet and presentational hints”. HTML Living Standard, WHATWG, 24 Dec 2015, https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints. Web. 27 Dec 2015.

## Slide 283

Hickson, Ian, et al. “14.3.3 Flow content”. HTML Living Standard, WHATWG, 24 Dec 2015, https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3. Web. 27 Dec 2015.

## Slide 284

OpenDyslexic3 font: Gonzalez, Abbie. “OpenDyslexic: A typeface for Dyslexia”. Open Dyslexic, 17 Oct. 2019, https://opendyslexic.org. Web. 11 Apr 2022.

## Slide 285

mozillaZine editors. “Profile folder - Firefox”. mozillaZine, 7 Sep 2015, http://kb.mozillazine.org/Profile_folder_-_Firefox. Web. 20 Mar 2018.

mozillaZine editors. “UserContent.css”. mozillaZine, 19 Feb 2018, http://kb.mozillazine.org/UserContent.css. Web. 4 Oct 2022.

## Slide 286

Scher, Jefferson [jscher2000]. “Firefox Changes Breaking userChrome.css”. userChrome.org, 6 Dec 2019, https://www.userchrome.org/firefox-changes-userchrome-css.html. Web. 4 Oct 2022.

## Slide 288

https://src.chromium.org/viewvc/chrome?revision=234007&view=revision 

https://codereview.chromium.org/64843004 

https://bugs.chromium.org/p/chromium/issues/detail?id=347016 

## Slide 289

https://msdn.microsoft.com/en-us/library/mt227929%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

http://stackoverflow.com/questions/33060628/how-to-attach-user-css-to-microsoft-edge

## Slide 292

stylus.openstyles. “Stylus”. Chrome Web Store, 30 Aug 2022, https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne. Web. 4 Oct 2022.

Stylus Team & Jeremy Schomery. “Stylus”. Firefox Browser Add-Ons, 29 Aug 2022, https://addons.mozilla.org/firefox/addon/styl-us/. Web. 4 Oct 2022.

Freuden, Mike. “Cascadea”. Mac App Store Preview, Nov 2021, https://apps.apple.com/us/app/cascadea/id1432182561?mt=12. Web. 4 Oct 2022.

Heaton, Robert. “‘Stylish’ browser extension steals all your internet history”. Robert Heaton, 2 July 2018, https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/. Web. 4 Oct 2022.

Heaton, Robert. “‘Stylish’ is back, and you still shouldn't use it”. Robert Heaton, 16 Aug 2018, https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/. Web. 4 Oct 2022.

## Slide 293

Stylus 1.5.22, 8 Apr 2022.

Wikipedia contributors. “Gestalt psychology”. Wikipedia, The Free Encyclopedia, 3 Apr 2022, https://en.wikipedia.org/w/index.php?title=Gestalt_psychology&oldid=1080745910. Web. 8 Apr 2022.

## Slide 294

Stylus 1.5.22, 8 Apr 2022.

Wikipedia contributors. “Gestalt psychology”. Wikipedia, The Free Encyclopedia, 3 Apr 2022, https://en.wikipedia.org/w/index.php?title=Gestalt_psychology&oldid=1080745910. Web. 8 Apr 2022.

## Slide 295

Stylus 1.5.22, 8 Apr 2022.

Wikipedia contributors. “Gestalt psychology”. Wikipedia, The Free Encyclopedia, 3 Apr 2022, https://en.wikipedia.org/w/index.php?title=Gestalt_psychology&oldid=1080745910. Web. 8 Apr 2022.

## Slide 296

Stylus 1.5.22, 8 Apr 2022.

## Slide 297

Stylus 1.5.22, 8 Apr 2022.

## Slide 298

Stylus 1.5.22, 8 Apr 2022.

## Slide 299

Stylus 1.5.22, 8 Apr 2022.

## Slide 300

Stylus 1.5.22, 8 Apr 2022.

## Slide 301

Stylus 1.5.22, 8 Apr 2022.

## Slide 302

Stylus 1.5.22, 8 Apr 2022.

## Slide 303

Gusted. “Website themes and skins — UserStyles.world”. UserStyles.world, 7 Apr 2022, https://userstyles.world/. Web. 2022-04-09.

## Slide 304

Gusted. “Explore website themes — UserStyles.world”. UserStyles.world, 7 Apr 2022, https://userstyles.world/explore?page=1&sort=mostinstalls. Web. 2022-04-09.

## Slide 305

Gusted. “Explore website themes — UserStyles.world”. UserStyles.world, 7 Apr 2022, https://userstyles.world/explore?page=1&sort=mostviews. Web. 2022-04-09.

## Slide 306

Gusted. “Search — UserStyles.world”. UserStyles.world, 7 Apr 2022, https://userstyles.world/search?q=duckduckgo&sort=default. Web. 2022-04-09.

## Slide 309

Why? Because if authors chose fonts, I’d like to see them, but if they don’t, then use mine.

## Slide 311

Judis, Stefan. “You can't override !important user agent CSS declarations”. Stefan Judis Web Development, 7 Feb. 2022, https://www.stefanjudis.com/today-i-learned/you-cant-override-important-user-agent-css-declarations/. 9 Apr 2022.

## Slide 316

Serban, Stanca. “mozilla-central: layout/style/res/html.css@c47b3b28fb48c01c33585b46650249b182cabe00”. Mozilla, Mercurial repositories, 14 Mar 2023, https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css. Web. 14 Mar 2023.

## Slide 317

Serban, Stanca. “mozilla-central: layout/style/res/html.css@c47b3b28fb48c01c33585b46650249b182cabe00”. Mozilla, Mercurial repositories, 14 Mar 2023, https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css. Web. 14 Mar 2023.

## Slide 318

FIXME Tim’s cut support beam

## Slide 320

Created by Jans Carton & Scott Granneman

Changes to the Cascade:
CSS Cascading and Inheritance Level 4 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/) adds encapsulation contexts (Shadow DOM) after Origin; more on this in the Web Components presentation

CSS Cascading and Inheritance Level 5 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-5/) adds cascade layers after Inline; more on that in the CSS Selectors presentation 

## Slide 322

“In the cascade, these declarations [style="foo"] are considered to have author origin and a specificity higher than any selector.”
Çelik, Tantek, et al. “4. Cascading and Interpretation”. CSS Style Attributes, W3C, 7 Nov. 2013, https://www.w3.org/TR/css-style-attr/#interpret. Web. 10 Apr 2022.

## Slide 324

Created by Jans Carton & Scott Granneman

Changes to the Cascade:
CSS Cascading and Inheritance Level 4 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/) adds encapsulation contexts (Shadow DOM) after Origin; more on this in the Web Components presentation

CSS Cascading and Inheritance Level 5 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-5/) adds cascade layers after Inline; more on that in the CSS Selectors presentation 

## Slide 325

Etemad / fantasai, Elika J. & Tab Atkins Jr. “16. Calculating a selector’s specificity”. Selectors Level 4: W3C Working Draft, 21 Nov. 2018, https://www.w3.org/TR/2018/WD-selectors-4-20181121/#specificity-rules. Web. 10 Apr 2022.

## Slide 326

NOTE: “Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.” For more on the negation pseudo-class, see my CSS - Selectors presentation or the following:
Etemad, Elika J. [fantasai], et al. “17. Calculating a selector’s specificity”. Selectors Level 4, W3C, 7 May 2022, https://www.w3.org/TR/selectors-4/#specificity-rules. Web. 4 Oct 2022.

Çelik, Tantek, et al. “9. Calculating a selector's specificity”. Selectors Level 3: W3C Recommendation, 6 Nov. 2018, https://www.w3.org/TR/selectors-3/#specificity. Web. 10 Apr 2022.

## Slide 329

Etemad / fantasai, Elika J. & Tab Atkins Jr. “16. Calculating a selector’s specificity”. Selectors Level 4: W3C Working Draft, 21 Nov. 2018, https://www.w3.org/TR/2018/WD-selectors-4-20181121/#specificity-rules. Web. 10 Apr 2022.

## Slide 330

WebSanity. “10 Apr 2022”. CodePen, 27 Dec. 2020, https://codepen.io/websanity/pen/eYNpLEj?editors=1100. Web. 10 Apr 2022.

## Slide 332

WebSanity. “CSS Specificity calculation”. CodePen, 10 Apr. 2022, https://codepen.io/websanity/pen/oNzGBZY?editors=1100. Web. 10 Apr 2022.

## Slide 338

Created by Jans Carton & Scott Granneman

Changes to the Cascade:
CSS Cascading and Inheritance Level 4 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/) adds encapsulation contexts (Shadow DOM) after Origin; more on this in the Web Components presentation

CSS Cascading and Inheritance Level 5 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-5/) adds cascade layers after Inline; more on that in the CSS Selectors presentation 

## Slide 341

Answer: red, because it is last in the CSS stylesheet

## Slide 343

Answer: blue, because it is last in the CSS stylesheet

## Slide 345

Created by Jans Carton & Scott Granneman

As of CSS Cascading and Inheritance Level 4 (August 2020), there have been a few big changes to the Cascade:
CSS Cascading and Inheritance Level 4 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/) adds encapsulation contexts (Shadow DOM) after Origin; more on this in the Web Components presentation

CSS Cascading and Inheritance Level 5 (currently 13 Jan 2022, https://www.w3.org/TR/css-cascade-5/) adds cascade layers after Inline; more on that in the CSS Selectors presentation 

Changes involving Shadow DOM: Etemad, Elika J. [fantasai], et al. “6.1. Cascade Sorting Order”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#cascade-sort. Web. 2 Oct 2022.

## Slide 349

I used a Mac tool — Pixel Winch (https://www.ricciadams.com/projects/pixel-winch) — to measure & label those pixels

## Slide 364

Created by Jans Carton & Scott Granneman

## Slide 367

Created by Jans Carton & Scott Granneman

## Slide 369

Created by Jans Carton & Scott Granneman

## Slide 371

Again, I used a Mac tool — Pixel Winch (https://www.ricciadams.com/projects/pixel-winch) — to measure & label those pixels

## Slide 375

Duckett, Jon. HTML & CSS: Design & Build Websites. Indianapolis, IN: John Wiley & Sons (2011).

## Slide 377

MDN contributors. “CSS reference”. MDN Web Docs, 21 Aug 2021, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. Web. 11 Apr 2022.

## Slide 378

CSS-Tricks, 6 July 2020, https://css-tricks.com/. Web. 6 July 2022.

## Slide 379

Coyier, Chris. “Popular this month”. CSS-Tricks, 6 July 2020, https://css-tricks.com/. Web. 6 July 2022.

## Slide 380

CSS-Tricks, 6 July 2020, https://css-tricks.com/guides/. Web. 6 July 2020. 

Slide updated 2 Oct 2022.

## Slide 381

Deveria, Alexis [@Fyrd]. “Can I use... Support tables for HTML5, CSS3, etc”. Can I use…, 18 Oct 2017, http://caniuse.com. Web. 18 Oct 2017.

## Slide 382

Deveria, Alexis [@Fyrd]. “CSS Grid Layout”. Can I use…, 18 Oct 2017, http://caniuse.com/#search=grid. Web. 18 Oct 2017.

## Slide 383

Vanninen, Ville V. [@sakamies]. “CSS Vocabulary”. Vocabs, http://apps.workflower.fi/vocabs/css/en. Web. 30 May 2015.

## Slide 384

Vanninen, Ville V. [@sakamies]. “CSS Vocabulary”. Vocabs, http://apps.workflower.fi/vocabs/css/en#selector. Web. 30 May 2015.

## Slide 385

Vanninen, Ville V. [@sakamies]. “CSS Vocabulary”. Vocabs, http://apps.workflower.fi/vocabs/css/en#property. Web. 30 May 2015.

## Slide 386

Granneman, Scott [rsgranne]. “Pinboard: bookmarks for rsgranne tagged ‘css’”. Pinboard, 3 Jan 2014, https://pinboard.in/u:rsgranne/t:css. Web. 27 Jan 2014. 

## Slide 389

Firefox 100

## Slide 390

Safari 15.4

## Slide 391

Brave 1.37.113 (same as Chrome & the version of Edge based on Chromium)

## Slide 394

Sorhus, Sindre. “System Color Picker”. Sindre Sorhus, https://sindresorhus.com/system-color-picker. Web. 26 Sep 2022.

## Slide 398

Microsoft. “Microsoft PowerToys: Utilities to customize Windows”. Microsoft technical documentation, 6 July 2022, https://docs.microsoft.com/en-us/windows/powertoys/. Web. 24 July 2022.

## Slide 399

Microsoft. “Microsoft PowerToys: Utilities to customize Windows”. Microsoft technical documentation, 6 July 2022, https://docs.microsoft.com/en-us/windows/powertoys/. Web. 24 July 2022.

## Slide 400

mattwojo et al. “Color Picker utility”. Microsoft technical documentation, 13 June 2022, https://docs.microsoft.com/en-us/windows/powertoys/color-pickerhttps://docs.microsoft.com/en-us/windows/powertoys/color-picker. Web. 24 July 2022.

## Slide 401

https://granneman.com/downloads/web-dev/CSS-Overview-Condensed.pdf

https://granneman.com/downloads/web-dev/CSS-Overview-Condensed.txt

## Slide 402

https://www.granneman.com/presentations/all-presentations