Notes for CSS - Overview

By Scott Granneman & Jans Carton

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

## Slide 3

http://www.granneman.com

## Slide 4

http://twitter.com/garybernhardt/status/664149582046040064

## Slide 6

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

## Slide 7

Wikipedia contributors. “CSS”. Wikipedia, The Free Encyclopedia, 23 Sep. 2022, https://en.wikipedia.org/wiki/CSS. Accessed 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. Accessed 2 Oct 2022.

## Slide 9

Deveria, Alexis [@Fyrd]. “CSS Grid Layout”. Can I use…, 18 Oct 2017, http://caniuse.com/#search=grid. Accessed 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. Accessed 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. Accessed 2 Oct 2022.

95.5% in Sep. 2020

## Slide 13

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. Accessed 15 Apr. 2024.

## Slide 14

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

## Slide 15

WebSanity. “HTML: font element”. CodePen, 2 Oct 2022, https://codepen.io/websanity/pen/wvzvzj?editors=1000. Accessed 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. Accessed 2 Oct 2022.

## Slide 20

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/. Accessed 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 27

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

## Slide 28

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 36

https://developer.mozilla.org/en-US/docs/Web/CSS/@charset 

The info on this slide was true for CSS 2.1 (https://drafts.csswg.org/css2/#charset), but not later: https://www.w3.org/TR/css-syntax-3/#input-byte-stream 

For Unicode byte-order, see https://en.wikipedia.org/wiki/Byte_order_mark

## Slide 37

Atkins Jr., Tab & Simon Sapin. “CSS Syntax Module Level 3: W3C Candidate Recommendation, 16 July 2019”. World Wide Web Consortium, 16 July 2019, https://www.w3.org/TR/css-syntax-3/#charset-rule. 

CSS 2.1: https://drafts.csswg.org/css2/#charset 

## Slide 38

Atkins Jr., Tab & Simon Sapin. “CSS Syntax Module Level 3: W3C Candidate Recommendation, 16 July 2019”. World Wide Web Consortium, 16 July 2019, https://www.w3.org/TR/css-syntax-3/#input-byte-stream. 

## Slide 44

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

## Slide 46

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)

Other examples of resource inlining: embedding JavaScript via <script> & base64 encoding in Data URLs

## Slide 49

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

## Slide 56

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

## Slide 57

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

## Slide 62

Grigorik, Ilya. “Table 10-1. Time and user perception” from “Chapter 10: Primer on Web Performance”. High Performance Browser Networking (2013). Licensed under CC BY-NC-ND 4.0. https://hpbn.co/primer-on-web-performance/. Accessed November 16, 2018.

## Slide 64

This was last seen in Web Development: The Absolute Basics

Diagram by Scott Granneman & Jans Carton

## Slide 65

A more accurate representation for the Browser Processing Pipeline

Diagram by Scott Granneman & Jans Carton

## Slide 66

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

Glazman, Daniel, et al. “CSS Object Model (CSSOM)”. W3C, 26 Aug 2021, https://www.w3.org/TR/cssom-1/. Accessed 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. Accessed 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. Accessed 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/. Accessed 3 Oct 2022.

## Slide 68

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. Accessed 11 Apr. 2022.

## Slide 69

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 70

Corydave. “Bloom's Taxonomy”. Wikimedia, 9 April 2021, https://en.wikipedia.org/wiki/File:BloomsTaxonomy.png. Licensed CC0 1.0 (Public domain).

## Slide 71

Matthew.viel. “File:KM Pyramid Adaptation.png”. Wikimedia, 07 June 2016, https://en.wikipedia.org/wiki/File:KM_Pyramid_Adaptation.png. Licensed CC BY-SA 4.0.

## Slide 72

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 73

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 74

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 75

Medium69. “File:Sucrose molecule.svg”. Wikipedia, 1 November 2014, https://commons.wikimedia.org/wiki/File:Sucrose_molecule.svg. 

## Slide 76

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

## Slide 77

Frevert U, Engelmann S, Zougbédé S, Stange J, Ng B, et al; converted to SVG by Viacheslav Vtyurin. “File:Hepatic structure2.svg”. Wikimedia, 24 May 2005, https://en.wikipedia.org/wiki/File:Hepatic_structure2.svg. Licensed CC BY 2.5.

Based on the research article “Intravital Observation of Plasmodium berghei Sporozoite Infection of the Liver”, PLoS Biology, doi:10.1371/journal.pbio.0030192.g011.

## Slide 78

OpenStax College. “File:2120 Major Systemic Artery.jpg”. Wikimedia, 19 June 2013, https://en.wikipedia.org/wiki/File:2120_Major_Systemic_Artery.jpg. Licensed CC BY 3.0.

## Slide 79

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 80

Diagram by Scott Granneman & Jans Carton

## Slide 81

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

## Slide 82

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. Accessed 7 Jan 2019.

## Slide 83

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

## Slide 86

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

## Slide 87

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

## Slide 88

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

## Slide 89

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

## Slide 90

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

## Slide 95

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. Accessed 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/. Accessed 26 Sep 2022.

## Slide 96

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. Accessed 10 Aug 2014.

## Slide 97

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. Accessed 10 Aug 2014.

## Slide 98

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. Accessed 10 Aug 2014.

## Slide 99

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. Accessed 10 Aug 2014.

## Slide 100

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. Accessed 10 Aug 2014.

## Slide 101

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. Accessed 10 Aug 2014.

## Slide 102

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. Accessed 10 Aug 2014.

## Slide 103

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. Accessed 10 Aug 2014.

## Slide 105

Diagram by Scott Granneman & Jans Carton

## Slide 106

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

## Slide 108

Diagram by Scott Granneman & Jans Carton

## Slide 109

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

July 2020: 69

## Slide 110

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

## Slide 111

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

## Slide 112

Diagram by Scott Granneman & Jans Carton

## Slide 113

Diagram by Scott Granneman & Jans Carton

## Slide 114

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. Accessed 3 Oct 2022.

## Slide 115

Wikipedia contributors. “Document Object Model”. Wikipedia, The Free Encyclopedia, 22 May 2021, https://en.wikipedia.org/wiki/Document_Object_Model. Accessed 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. Accessed 3 Oct 2022.

## Slide 116

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 118

Note that CSS selectors have various rules regarding case-sensitivity & capitalization. For more information, see: Hickson, Ian et al. “4.16.2 Case-sensitivity of selectors”. HTML Living Standard, 2 Aug. 2024, https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors. Accessed 5 Aug. 2024.

## Slide 119

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/. Accessed 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. Accessed 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 120

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, :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/. Accessed 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/. Accessed 26 Sep 2022.

Çelik, Tantek. “Selectors Level 3”. W3C, 6 Nov 2018, https://www.w3.org/TR/selectors-3/. Accessed 26 Sep 2022.

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

## Slide 121

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

## Slide 126

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

## Slide 128

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

## Slide 129

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

## Slide 130

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

## Slide 131

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

## Slide 133

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

## Slide 137

Hickson, Ian et al. “HTML Living Standard”. WHATWG, 22 Sep 2022, https://html.spec.whatwg.org/multipage/dom.html#classes. Accessed 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 138

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. Accessed 26 Sep 2022.

## Slide 139

Nɪsʜᴀɴᴛʜ ॐ. “What are the different kinds of cases?”. Stack Overflow, 10 Oct 2020, https://stackoverflow.com/a/64293621. Accessed 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/. Accessed 23 Aug 2022.

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

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

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

## Slide 141

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. Accessed 26 Sep 2022.

## Slide 142

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

## Slide 144

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

## Slide 146

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

## Slide 147

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

## Slide 149

http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2

http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name

## Slide 150

Hickson, Ian, et al. “HTML Living Standard”. WHATWG, 22 Sep 2022, http://www.w3.org/TR/html51/dom.html#the-id-attribute. Accessed 26 Sep 2022.

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. Accessed 26 Sep 2022.

## Slide 151

function log(node){
    console.log("node", node);
}
<textarea id="favorite-story" onclick="log(this)"></textarea>

## Slide 154

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. Accessed 4 May 2022.

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

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

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

## Slide 155

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. Accessed 4 May 2022.

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

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

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

## Slide 156

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

## Slide 157

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

## Slide 158

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

## Slide 161

WebSanity. “CSS: Universal selector”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/NWbWJE?editors=1100. Accessed 11 Apr 2022.

## Slide 162

WebSanity. “CSS: Universal selector”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/NWbWJE?editors=1100. Accessed 11 Apr 2022.

## Slide 163

WebSanity. “CSS: Universal selector”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/NWbWJE?editors=1100. Accessed 11 Apr 2022.

## Slide 168

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

## Slide 171

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

## Slide 176

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. Accessed 29 Sep 2022.

## Slide 180

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

## Slide 181

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

## Slide 182

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

## Slide 183

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

## Slide 184

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

## Slide 185

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

## Slide 187

WebSanity. “CSS: descendant combinator”. CodePen, 22 July 2020, https://codepen.io/websanity/pen/yLeZQoo?editors=1100. Accessed 22 July 2020. 

## Slide 188

WebSanity. “CSS: descendant combinator”. CodePen, 22 July 2020, https://codepen.io/websanity/pen/yLeZQoo?editors=1100. Accessed 22 July 2020.

## Slide 191

WebSanity. “CSS: child combinator with lists”. CodePen, 1 Dec 2020, https://codepen.io/websanity/pen/ZEQwmXv?editors=1000. Accessed 1 Dec 2020.

## Slide 192

WebSanity. “CSS: child combinator with lists”. CodePen, 1 Dec 2020, https://codepen.io/websanity/pen/ZEQwmXv?editors=1000. Accessed 1 Dec 2020.

## Slide 193

WebSanity. “CSS: child combinator with lists”. CodePen, 1 Dec 2020, https://codepen.io/websanity/pen/ZEQwmXv?editors=1000. Accessed 1 Dec 2020.

## Slide 194

WebSanity. “CSS: child combinator with lists”. CodePen, 1 Dec 2020, https://codepen.io/websanity/pen/ZEQwmXv?editors=1000. Accessed 1 Dec 2020.

## Slide 195

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

## Slide 196

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

## Slide 197

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

## Slide 198

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

## Slide 200

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

## Slide 202

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

## Slide 204

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

## Slide 205

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

## Slide 206

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

## Slide 207

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

## Slide 208

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

## Slide 209

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

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

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

## Slide 212

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

## Slide 214

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

## Slide 224

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 227

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

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

## Slide 228

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

## Slide 229

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

## 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. Accessed 3 Oct 2022. 

## Slide 239

WebSanity. “HTML: span element”. CodePen, 11 Apr. 2022, https://codepen.io/websanity/pen/NWRrNz?editors=1100. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 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. Accessed 29 Sep 2022.

## Slide 253

WebSanity. “CSS: Inheritance”. CodePen, 9 May 2014, http://codepen.io/websanity/pen/gpnjK?editors=110. Accessed 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. Accessed 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. Accessed 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. Accessed 2 Oct 2022.

## Slide 260

Changes involving Shadow DOM: https://www.w3.org/TR/css-cascade-4/#cascade-sort 

FIXME

## Slide 261

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. Accessed 2 Oct 2022.

## Slide 262

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. Accessed 2 Oct 2022.

## Slide 266

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. Accessed 26 Dec 2015.

## Slide 267

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. Accessed 26 Dec 2015.

## Slide 268

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. Accessed 27 Dec 2015.

## Slide 269

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. Accessed 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. Accessed 27 Dec 2015.

## Slide 270

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. Accessed 4 Oct 2022.

## Slide 271

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. Accessed 4 Oct 2022.

## Slide 272

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. Accessed 27 Dec 2015.

## Slide 273

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. Accessed 27 Dec 2015.

## Slide 274

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

## Slide 275

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

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

## Slide 276

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

## Slide 277

Of course, the instructions change depending upon which version of Windows you’re using — how annoying!
 

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

## Slide 278

If you don’t see Library, hold down Option/⌥ & click on the Go menu, & then select Library

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

## Slide 280

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 281

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 284

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

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

Freuden, Mike. “Cascadea”. Mac App Store Preview, Nov 2021, https://apps.apple.com/us/app/cascadea/id1432182561?mt=12. Accessed 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/. Accessed 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/. Accessed 4 Oct 2022.

## Slide 285

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. Accessed 8 Apr 2022.

## Slide 286

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. Accessed 8 Apr 2022.

## Slide 287

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. Accessed 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

Stylus 1.5.22, 8 Apr 2022.

## Slide 292

Stylus 1.5.22, 8 Apr 2022.

## Slide 293

Stylus 1.5.22, 8 Apr 2022.

## Slide 294

Stylus 1.5.22, 8 Apr 2022.

## Slide 295

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

## Slide 296

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

## Slide 297

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

## Slide 298

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

## Slide 301

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

## Slide 303

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.

FIXME

## Slide 304

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 309

FIXME Tim’s cut support beam

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

“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. Accessed 10 Apr 2022.

## Slide 314

Emphasis added

Çelik, Tantek, et al. “4. Cascading and Interpretation”. CSS Style Attributes, W3C, 7 Nov. 2013, https://www.w3.org/TR/css-style-attr/#interpret. Accessed 10 Apr 2022.

## Slide 316

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 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. Accessed 10 Apr 2022.

## Slide 318

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. Accessed 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. Accessed 10 Apr 2022.

## Slide 321

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. Accessed 10 Apr 2022.

## Slide 322

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

## Slide 323

Emphasis added

Çelik, Tantek & Elika J. Etemad. “4. Cascading and Interpretation”. CSS Style Attributes, 7 Nov. 2013, https://www.w3.org/TR/css-style-attr/#interpret. Accessed 10 Apr 2022.

FIXME move earlier!!

## Slide 325

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

## Slide 330

Street, Keegan. “Specificity Calculator”. Specificity Calculator, 28 Aug. 2018, https://specificity.keegan.st. Accessed 10 Apr 2022. 

## Slide 332

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 335

Answer: red, because it is last in the CSS

## Slide 337

Answer: blue, because it is last in the CSS

## Slide 339

Created by Scott Granneman & Jans Carton

Note: as of CSS Cascading and Inheritance Level 4 (August 2020), things have changed if the Shadow DOM is involved; more on this in the Web Components presentation

## Slide 340

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. Accessed 2 Oct 2022.

## Slide 344

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

## Slide 359

Created by Jans Carton & Scott Granneman

## Slide 362

Created by Jans Carton & Scott Granneman

## Slide 364

Created by Jans Carton & Scott Granneman

## Slide 366

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

## Slide 369

MDN contributors. “CSS reference”. MDN Web Docs, 28 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. Accessed 4 Oct 2022.

MDN contributors. “CSS values and units”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units. Accessed 4 Oct 2022.

## Slide 370

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “3.2. Resetting All Properties: the all property”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#all-shorthand. Accessed 4 Oct 2022.

MDN contributors. “initial”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/initial. Accessed 4 Oct 2022.

MDN contributors. “inherit”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/inherit. Accessed 4 Oct 2022.

MDN contributors. “unset”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/unset. Accessed 4 Oct 2022.

MDN contributors. “revert”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/revert. Accessed 4 Oct 2022.

MDN contributors. “all”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/all. Accessed 4 Oct 2022.

The W3C says that “Other CSS specifications can define additional CSS-wide keywords”, but we don’t see any others at this time (9 July 2020). See Atkins, Tab, et al. “3.1.1. CSS-wide keywords: initial, inherit and unset”. CSS Values and Units Module Level 3, W3C, 6 June 2019, https://www.w3.org/TR/css-values-3/#common-keywords. Accessed 4 Oct 2022.

## Slide 371

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “3.2. Resetting All Properties: the all property”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#all-shorthand. Accessed 4 Oct 2022.

MDN contributors. “initial”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/initial. Accessed 4 Oct 2022.

MDN contributors. “inherit”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/inherit. Accessed 4 Oct 2022.

MDN contributors. “unset”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/unset. Accessed 4 Oct 2022.

MDN contributors. “revert”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/revert. Accessed 4 Oct 2022.

MDN contributors. “all”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/all. Accessed 4 Oct 2022.

## Slide 372

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

MDN contributors. “initial”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/initial. Accessed 4 Oct 2022.

MDN contributors. “display”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/display. Accessed 4 Oct 2022.

MDN contributors. “font-size”. MDN Web Docs, 26 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/font-size. Accessed 4 Oct 2022.

MDN contributors. “border-style”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/border-style. Accessed 4 Oct 2022.

MDN contributors. “border-width”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/border-width. Accessed 4 Oct 2022.

MDN contributors. “margin”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/margin. Accessed 4 Oct 2022.

MDN contributors. “padding”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/padding. Accessed 4 Oct 2022.

MDN contributors. “font-family”. MDN Web Docs, 26 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/font-family. Accessed 4 Oct 2022.

## Slide 373

https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side

## Slide 374

https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side

## Slide 375

https://codepen.io/websanity/pen/NWxYOGL?editors=1100 

## Slide 376

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

MDN contributors. “inherit”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/inherit. Accessed 4 Oct 2022.

## Slide 377

WebSanity. “CSS: inherit value”. CodePen, 21 Nov 2018, https://codepen.io/websanity/pen/OVNzxG?editors=1100. Accessed 4 Oct 2022.

## Slide 378

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

MDN contributors. “unset”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/unset. Accessed 4 Oct 2022.

## Slide 379

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

MDN contributors. “revert”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/revert. Accessed 4 Oct 2022.

## Slide 380

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “7.3. Explicit Defaulting”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#defaulting-keywords. Accessed 4 Oct 2022.

MDN contributors. “revert”. MDN Web Docs, 29 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/revert. Accessed 4 Oct 2022.

## Slide 382

Etemad, Elika J. [fantasai] & Tab Atkins Jr. “3.2. Resetting All Properties: the all property”. CSS Cascading and Inheritance Level 4, W3C, 13 Jan 2022, https://www.w3.org/TR/css-cascade-4/#all-shorthand. Accessed 4 Oct 2022.

MDN contributors. “all”. MDN Web Docs, 27 Sep 2022, https://developer.mozilla.org/en-US/docs/Web/CSS/all. Accessed 4 Oct 2022.

## Slide 383

WebSanity. “CSS: all: unset global keywords”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/qBboQgL?editors=1100. Accessed 4 Oct 2022.

## Slide 384

WebSanity. “CSS: all: unset global keywords”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/qBboQgL?editors=1100. Accessed 4 Oct 2022.

## Slide 385

Deveria, Alexis [@Fyrd]. “CSS initial value”. Can I use…, 4 Oct 2022, https://caniuse.com/css-initial-value. Accessed 5 Oct 2022.

Deveria, Alexis [@Fyrd]. “types: Global keywords: inherit”. Can I use…, 4 Oct 2022, https://caniuse.com/mdn-css_types_global_keywords_inherit. Accessed 5 Oct 2022.

Deveria, Alexis [@Fyrd]. “CSS unset value”. Can I use…, 4 Oct 2022, https://caniuse.com/css-unset-value. Accessed 5 Oct 2022.

Deveria, Alexis [@Fyrd]. “CSS revert value”. Can I use…, 4 Oct 2022, https://caniuse.com/css-revert-value. Accessed 5 Oct 2022.

Ruud, Anders Hartvoll. “Feature: revert keyword”. Chrome Platform Status, 26 July 2022, https://www.chromestatus.com/feature/5644990145363968. Accessed 5 Oct 2022.

Deveria, Alexis [@Fyrd]. “CSS all property”. Can I use…, 4 Oct 2022, https://caniuse.com/css-all. Accessed 5 Oct 2022.

## Slide 388

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

## Slide 390

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

## Slide 391

Hazaël-Massieux, Dominique. “W3C to Work With MDN On Web Platform Documentation”. Mail, News, Blogs, Podcasts, and Tutorials, W3C, 18 Oct 2017, https://www.w3.org/blog/2017/10/w3c-to-work-with-mdn-on-web-platform-documentation/. Accessed 10 Feb 2020.

## Slide 392

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

## Slide 393

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

## Slide 394

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

Slide updated 2 Oct 2022.

## Slide 395

https://www.quirksmode.org

## Slide 396

http://meiert.com/en/indices/css-properties/

## Slide 397

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

## Slide 398

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

## Slide 399

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

## Slide 400

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

## Slide 401

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

## Slide 402

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

## Slide 405

Firefox 100

## Slide 406

Safari 15.4

## Slide 407

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

## Slide 409

“The W3C CSS Validation Service”. CSS Validation Service, W3C, https://jigsaw.w3.org/css-validator/. Accessed 27 Jan 2014.

## Slide 412

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

## Slide 416

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

## Slide 417

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

## Slide 418

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. Accessed 24 July 2022.