Notes for CSS - Overview - Condensed

By Scott Granneman & Jans Carton

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

## Slide 3

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

## Slide 4

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

## Slide 6

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

## Slide 7

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

## Slide 8

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 9

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 10

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 12

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

95.5% in Sep. 2020

## Slide 13

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 14

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 19

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 26

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

## Slide 27

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 37

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

## Slide 39

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 42

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

## Slide 43

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 47

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

## Slide 48

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

## Slide 51

This was last seen in Web Development: The Absolute Basics

Diagram by Scott Granneman & Jans Carton

## Slide 52

A more accurate representation for the Browser Processing Pipeline

Diagram by Scott Granneman & Jans Carton

## Slide 53

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 55

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 56

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 57

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 58

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 59

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 60

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 61

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 62

Diagram by Scott Granneman & Jans Carton

## Slide 63

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

## Slide 64

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 65

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

## Slide 68

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 69

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 70

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 71

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 72

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

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 78

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 79

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 80

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 81

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 83

Diagram by Scott Granneman & Jans Carton

## Slide 84

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 86

Diagram by Scott Granneman & Jans Carton

## Slide 87

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 88

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

## Slide 89

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 90

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 91

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 92

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 93

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 94

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 97

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 98

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 99

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 104

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

## Slide 106

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

## Slide 107

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

## Slide 108

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

## Slide 109

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

## Slide 111

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

## Slide 114

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 115

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 116

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 118

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 119

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

## Slide 121

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

## Slide 123

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

## Slide 124

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

## Slide 128

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 130

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

## Slide 132

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

## Slide 133

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 135

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 136

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 139

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

## Slide 140

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

## Slide 141

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

## Slide 142

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

## Slide 143

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

## Slide 144

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

## Slide 145

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

## Slide 146

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

## Slide 147

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

## Slide 148

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

## Slide 149

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

## Slide 150

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

## Slide 151

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

## Slide 154

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 157

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

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

## Slide 160

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

## Slide 161

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 166

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 170

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

## Slide 171

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

## Slide 172

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

## Slide 173

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

## Slide 174

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

## Slide 175

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

## Slide 178

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

## Slide 179

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

## Slide 180

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

## Slide 181

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

## Slide 183

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

## Slide 185

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 187

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

## Slide 188

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

## Slide 189

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

## Slide 190

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

## Slide 191

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 192

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 194

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

## Slide 195

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

## Slide 196

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 198

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 208

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 211

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 212

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 213

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

## Slide 219

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

## Slide 221

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 224

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

## Slide 226

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 227

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

## Slide 228

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 229

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 230

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 231

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 232

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 233

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

## Slide 234

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 236

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 237

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 238

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

## Slide 239

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 241

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 242

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 243

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

## Slide 244

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 245

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 249

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 250

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 251

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 252

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 253

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 254

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 255

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 256

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 257

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

## Slide 258

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 259

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 261

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 262

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 265

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 266

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 267

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 268

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 269

Stylus 1.5.22, 8 Apr 2022.

## Slide 270

Stylus 1.5.22, 8 Apr 2022.

## Slide 271

Stylus 1.5.22, 8 Apr 2022.

## Slide 272

Stylus 1.5.22, 8 Apr 2022.

## Slide 273

Stylus 1.5.22, 8 Apr 2022.

## Slide 274

Stylus 1.5.22, 8 Apr 2022.

## Slide 275

Stylus 1.5.22, 8 Apr 2022.

## Slide 276

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

## Slide 277

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

## Slide 278

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

## Slide 279

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

## Slide 282

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

## Slide 284

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 289

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 290

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 291

FIXME Tim’s cut support beam

## Slide 293

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 295

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

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 298

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 299

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 302

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 303

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

## Slide 305

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

## Slide 311

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 314

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

## Slide 316

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

## Slide 318

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

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

## Slide 337

Created by Jans Carton & Scott Granneman

## Slide 340

Created by Jans Carton & Scott Granneman

## Slide 342

Created by Jans Carton & Scott Granneman

## Slide 344

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

## Slide 348

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

## Slide 350

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 351

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

## Slide 352

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

## Slide 353

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

Slide updated 2 Oct 2022.

## Slide 354

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 355

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

## Slide 356

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

## Slide 357

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

## Slide 358

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

## Slide 359

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 362

Firefox 100

## Slide 363

Safari 15.4

## Slide 364

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

## Slide 367

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

## Slide 371

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 372

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 373

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.