Notes for CSS - Overview - Condensed

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/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

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 11

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

## Slide 12

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

## Slide 13

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 14

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 15

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 17

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 18

Wikipedia contributors. “Separation of concerns”. Wikipedia, The Free Encyclopedia, 16 July 2022, https://en.wikipedia.org/wiki/Separation_of_concerns. Web. 3 Oct. 2022.

## Slide 19

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 24

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 31

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

## Slide 32

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 42

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

## Slide 44

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 47

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

## Slide 48

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 52

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

## Slide 53

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

## Slide 56

This was last seen in Web Development: The Absolute Basics

Diagram by Scott Granneman & Jans Carton

## Slide 57

A more accurate representation for the Browser Processing Pipeline

Diagram by Scott Granneman & Jans Carton

## Slide 58

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 60

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 61

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 62

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 63

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 64

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 65

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 66

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 67

Diagram by Scott Granneman & Jans Carton

## Slide 68

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

## Slide 69

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 70

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

## Slide 73

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 74

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 75

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 76

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 77

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

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 84

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 85

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 86

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 87

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 89

Diagram by Scott Granneman & Jans Carton

## Slide 90

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 92

Diagram by Scott Granneman & Jans Carton

## Slide 93

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

July 2020: 69 available APIs

## Slide 94

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

## Slide 95

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 96

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 97

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 98

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 99

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 100

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 103

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 104

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 105

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"], :root, :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, :empty, :target, :enabled, :disabled, :checked, :indeterminate, :not(s), E ~ F

4: :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, :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.

Etemad, Elika J. [fantasai] et al. “Selectors Level 4”. W3C, 7 May 2022, https://www.w3.org/TR/2022/WD-selectors-4-20220507/. Web. 26 Sep 2022.

## Slide 106

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 111

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

## Slide 113

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

## Slide 114

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

## Slide 115

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

## Slide 116

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

## Slide 118

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

## Slide 121

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 122

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 123

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 125

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 126

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

## Slide 128

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

## Slide 130

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

## Slide 131

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

## Slide 135

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 137

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 138

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

## Slide 140

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

## Slide 141

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 147

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 148

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 151

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

## Slide 152

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

## Slide 153

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

## Slide 154

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

## Slide 155

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

## Slide 156

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

## Slide 157

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

## 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 167

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 170

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

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

## Slide 173

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

## 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 179

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 183

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

## Slide 184

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

## Slide 185

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

## Slide 186

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

## Slide 187

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

## Slide 188

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

## Slide 191

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

## Slide 192

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

## Slide 193

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

## Slide 194

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

## Slide 196

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

## Slide 198

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 199

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 201

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

## Slide 202

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

## Slide 203

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

## Slide 204

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

## Slide 205

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

## Slide 206

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 207

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 209

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

## Slide 210

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

## Slide 211

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 213

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 223

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 226

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 227

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 228

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

## Slide 234

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

## Slide 236

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 239

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

## Slide 241

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 242

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

## Slide 243

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 244

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 245

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 246

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 247

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 248

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

## Slide 249

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 251

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 252

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 253

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

## Slide 254

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 256

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 257

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 258

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

## Slide 259

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 260

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 264

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 265

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 266

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 267

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 268

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 269

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 270

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 271

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 272

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

## Slide 273

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 274

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 276

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 277

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 280

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 281

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 282

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 283

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 284

Stylus 1.5.22, 8 Apr 2022.

## Slide 285

Stylus 1.5.22, 8 Apr 2022.

## Slide 286

Stylus 1.5.22, 8 Apr 2022.

## Slide 287

Stylus 1.5.22, 8 Apr 2022.

## Slide 288

Stylus 1.5.22, 8 Apr 2022.

## Slide 289

Stylus 1.5.22, 8 Apr 2022.

## Slide 290

Stylus 1.5.22, 8 Apr 2022.

## Slide 291

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

## Slide 292

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

## Slide 293

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

## Slide 294

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

## Slide 297

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

## Slide 299

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 304

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 305

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 306

FIXME Tim’s cut support beam

## Slide 308

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 310

“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 312

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 313

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 314

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 317

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 318

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

## Slide 320

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

## Slide 326

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 329

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

## Slide 331

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

## Slide 333

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 337

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

## Slide 352

Created by Jans Carton & Scott Granneman

## Slide 355

Created by Jans Carton & Scott Granneman

## Slide 357

Created by Jans Carton & Scott Granneman

## Slide 359

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

## Slide 363

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

## Slide 365

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 366

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

## Slide 367

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

## Slide 368

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

Slide updated 2 Oct 2022.

## Slide 369

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 370

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

## Slide 371

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

## Slide 372

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

## Slide 373

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

## Slide 374

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 377

Firefox 100

## Slide 378

Safari 15.4

## Slide 379

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

## Slide 382

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

## Slide 386

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 387

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 388

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.