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 9

Still CR as of 2020-07-07

## Slide 10

https://www.w3.org/Style/CSS/current-work

## Slide 12

https://w3techs.com/technologies/overview/site_element 

## Slide 24

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

## Slide 25

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 33

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 34

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 35

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 41

https://codepen.io/websanity/pen/aQPXrX?editors=1000

## Slide 43

http://chimera.labs.oreilly.com/books/1230000000545/ch11.html#RESOURCE_INLINING

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

## Slide 46

http://codepen.io/websanity/pen/cLqbJ?editors=100

## Slide 53

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

## Slide 54

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

## Slide 59

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 61

This was last seen in Web Development: The Absolute Basics

Diagram by Scott Granneman & Jans Carton

## Slide 62

A more accurate representation for the Browser Processing Pipeline

Diagram by Scott Granneman & Jans Carton

## Slide 63

Specs at http://www.w3.org/TR/dom/ & http://www.w3.org/TR/DOM-Requirements/

## Slide 65

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 66

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 67

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

## Slide 68

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 69

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 70

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 71

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 72

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

## Slide 73

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 74

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 75

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 76

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 77

Diagram by Scott Granneman & Jans Carton

## Slide 79

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 83

https://en.wikipedia.org/wiki/The_Thing_(1982_film)

## Slide 92

3D View stopped working in Firefox 47

https://developer.mozilla.org/en-US/docs/Tools/3D_View

Tilt 3D was an extension that worked up to Firefox 21

https://addons.mozilla.org/en-US/firefox/addon/tilt/

## Slide 93

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 94

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 95

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 96

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 97

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 98

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 99

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 100

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 102

Diagram by Scott Granneman & Jans Carton

## Slide 105

Diagram by Scott Granneman & Jans Carton

## Slide 106

https://developer.mozilla.org/en-US/docs/Web/API

FIXME: update this number

## Slide 107

https://developer.mozilla.org/en-US/docs/Web/API

## Slide 108

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 109

Diagram by Scott Granneman & Jans Carton

## Slide 110

Diagram by Scott Granneman & Jans Carton

## Slide 111

Diagram by Scott Granneman & Jans Carton

## Slide 112

https://en.wikipedia.org/w/index.php?title=Document_Object_Model&oldid=1024475914

## Slide 113

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 116

https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
“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 117

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

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

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

## Slide 118

https://www.w3.org/TR/selectors-4/#structure

## Slide 123

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

## Slide 124

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

## Slide 125

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

## Slide 130

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

## Slide 131

http://codepen.io/websanity/pen/Bvdsb?editors=110 

## Slide 132

http://codepen.io/websanity/pen/Bvdsb?editors=110 

## Slide 133

http://codepen.io/websanity/pen/Bvdsb?editors=110

## Slide 135

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

## Slide 139

http://www.w3.org/TR/html51/dom.html#classes

http://www.w3.org/TR/html51/infrastructure.html#set-of-space-separated-tokens

Same rules for HTML 4.01:
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-cdata

## Slide 140

https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters

FIXME - lower camel case, upper camel case, snake case

## Slide 141

kebab-case: https://en.wikipedia.org/wiki/Letter_case#Kebab_case

snake_case: https://en.wikipedia.org/wiki/Snake_case & https://en.wikipedia.org/wiki/Letter_case#Snake_case 

flatcase: https://www.deanpugh.com/a-brief-list-of-programming-naming-conventions/ 

lazycase: https://stackoverflow.com/a/64293621 

camelCase: https://en.wikipedia.org/wiki/Camel_case & https://en.wikipedia.org/wiki/Letter_case#Camel_case 

## Slide 143

https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming

## Slide 144

.center is unique, as it is both a function *and* appearance

## Slide 146

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

## Slide 148

http://codepen.io/websanity/pen/gorts?editors=110

## Slide 149

http://codepen.io/websanity/pen/gorts?editors=110

FIXME!

## Slide 151

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 152

http://www.w3.org/TR/html51/dom.html#the-id-attribute 

https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming

## Slide 154

As you will see in the CSS - Selectors slides, you do need IDs for fragment identifiers & JavaScript hooks

## Slide 155

See https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations

See https://en.wikipedia.org/wiki/Fragment_identifier, http://www.w3.org/TR/media-frags/, or http://www.w3.org/DesignIssues/Fragment.html for details

## Slide 156

See https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations

See https://en.wikipedia.org/wiki/Fragment_identifier, http://www.w3.org/TR/media-frags/, or http://www.w3.org/DesignIssues/Fragment.html for details

## Slide 157

http://codepen.io/websanity/pen/lGfLw?editors=100

TODO FIXME

## Slide 158

http://codepen.io/websanity/pen/adEjdV?editors=101

## Slide 159

http://codepen.io/websanity/pen/adEjdV?editors=101

## Slide 163

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

## Slide 166

http://codepen.io/websanity/pen/bkxfA?editors=110

## Slide 168

FIXME - put table from CSS Selectors here too

## Slide 175

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

## Slide 176

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

## Slide 177

http://codepen.io/websanity/pen/KgrkmJ?editors=1100 

## Slide 178

http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 179

Focus on <small>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 180

Focus on <small>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100 

## Slide 181

Focus on <a>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 182

Focus on <a>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 184

FIXME improve - wrap each img in p

## Slide 187

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 188

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

## Slide 189

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 190

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 191

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 192

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 193

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 194

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 196

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

## Slide 197

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

## Slide 198

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

## Slide 199

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

## Slide 200

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

## Slide 201

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

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

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

## Slide 204

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

## Slide 216

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? Backward compatibility.

## Slide 219

https://en.wikipedia.org/wiki/Design_pattern

## Slide 220

https://getbootstrap.com/docs/4.5/utilities/borders/#sizes

## Slide 221

https://getbootstrap.com/docs/4.5/components/card/

## Slide 228

http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element

## Slide 231

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

## Slide 233

http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element

## Slide 234

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

## Slide 235

http://codepen.io/websanity/pen/dMZgBP?editors=1000

http://www.hplovecraft.com/writings/texts/fiction/cdw.aspx

## Slide 236

http://codepen.io/websanity/pen/dMZgBP?editors=1000

## Slide 237

http://codepen.io/websanity/pen/tEHnx?editors=110

## Slide 238

http://codepen.io/websanity/pen/tEHnx?editors=110

## Slide 239

http://codepen.io/websanity/pen/dMZgBP?editors=1000

## Slide 240

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

## Slide 241

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 243

http://codepen.io/websanity/pen/bIDeA?editors=110

What does Seamus look like? Why?

## Slide 245

http://codepen.io/websanity/pen/gpnjK?editors=110

## Slide 248

http://www.w3.org/TR/CSS2/cascade.html

## Slide 249

http://www.w3.org/TR/CSS2/cascade.html

## Slide 251

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

## Slide 252

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 256

Firefox (Gecko)

https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css, 2020-12-26

For forms, see http://hg.mozilla.org/mozilla-central/file/tip/layout/style/forms.css

## Slide 257

margin-block-start is currently Mozilla-only

https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css, 2020-12-26

## Slide 258

WebKit (Safari)

https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, 2015-12-27

## Slide 259

1__qem = 1 quirky em = a margin which can be collapsed if the page is in quirks mode; see http://stackoverflow.com/questions/7448673/what-does-1-qem-mean

https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, 2015-12-27

## Slide 260

http://www.iecss.com/opera-10.51.css 

## Slide 261

http://www.iecss.com/opera-10.51.css 

## Slide 262

Default rules for browser CSS

https://html.spec.whatwg.org/multipage/rendering.html

## Slide 263

https://html.spec.whatwg.org/multipage/rendering.html

## Slide 264

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

## Slide 265

http://kb.mozillazine.org/Profile_folder_-_Firefox 

http://kb.mozillazine.org/UserContent.css 

## Slide 267

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

http://kb.mozillazine.org/UserContent.css 

## Slide 268

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

http://kb.mozillazine.org/UserContent.css 

## Slide 270

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 271

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 274

Stylus for Chromium-based browsers: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne 

Stylus for Firefox: https://addons.mozilla.org/firefox/addon/styl-us/ 

Cascadea for Safari: https://apps.apple.com/us/app/cascadea/id1432182561?mt=12 

Problems with Stylish: https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/ & https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/

## Slide 275

Stylus 1.5.22, 2022-04-08

## Slide 276

Stylus 1.5.22, 2022-04-08

## Slide 277

Stylus 1.5.22, 2022-04-08

## Slide 278

Stylus 1.5.22, 2022-04-08

## Slide 279

Stylus 1.5.22, 2022-04-08

## Slide 280

Stylus 1.5.22, 2022-04-08

## Slide 281

Stylus 1.5.22, 2022-04-08

## Slide 282

Stylus 1.5.22, 2022-04-08

## Slide 283

Stylus 1.5.22, 2022-04-08

## Slide 284

Stylus 1.5.22, 2022-04-08

## Slide 285

Stylus 1.5.22, 2022-04-08

## Slide 286

Stylus 1.5.22, 2022-04-08

## Slide 289

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

## Slide 291

Note: Original order of origin & importance from CSS Overview, from lightest to heaviest

## 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 / 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.

Çelik, Tantek, Elika J. Etemad, Daniel Glazman, & Ian Hickson. “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 304

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

## Slide 306

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

FIXME: Change to Alphabet 1,26,1 & add Specificity: before Alphabet

## Slide 307

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

FIXME: Change to Alphabet 1,26,1 & add Specificity: before Alphabet

## Slide 308

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

Change text in HTML to foobar

## Slide 310

FIXME: fade out everything except the box

## Slide 313

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

## Slide 317

Answer: red, because it is last in the CSS

## Slide 319

Answer: blue, because it is last in the CSS

## Slide 321

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 324

I used a Mac tool—Pixel Winch—to measure & label those pixels

## Slide 339

Created by Scott Granneman & Jans Carton

## Slide 342

Created by Scott Granneman & Jans Carton

## Slide 344

Created by Scott Granneman & Jans Carton

## Slide 346

Again, I used a Mac tool—Pixel Winch—to measure & label those pixels

## Slide 350

See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Keyword_index for a comprehensive list

## Slide 351

https://drafts.csswg.org/css-cascade/#defaulting-keywords 

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

The W3C says that “Other CSS specifications can define additional CSS-wide keywords.” (https://www.w3.org/TR/css-values-3/#common-keywords) but we don’t see any others at this time (2020-07-09)

https://drafts.csswg.org/css-fonts-4/#font-family-prop 

## Slide 354

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

## Slide 355

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

## Slide 356

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

## Slide 358

http://codepen.io/websanity/pen/OVNzxG?editors=110

## Slide 364

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

## Slide 365

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

## Slide 366

https://caniuse.com/#feat=css-initial-value

https://caniuse.com/#feat=mdn-css_types_global_keywords_inherit 

https://caniuse.com/#feat=css-unset-value

https://caniuse.com/#feat=css-revert-value & https://www.chromestatus.com/feature/5644990145363968 

https://caniuse.com/#feat=css-all

## Slide 371

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 372

https://www.w3.org/blog/2017/10/w3c-to-work-with-mdn-on-web-platform-documentation/

## Slide 373

https://css-tricks.com/

## Slide 374

https://css-tricks.com/

## Slide 375

https://css-tricks.com/guides/ 

## Slide 376

https://www.quirksmode.org

## Slide 377

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

## Slide 378

https://caniuse.com

## Slide 379

http://caniuse.com/#search=grid

## Slide 380

http://apps.workflower.fi/vocabs/css/en 

## Slide 381

http://apps.workflower.fi/vocabs/css/en#selector 

## Slide 382

http://apps.workflower.fi/vocabs/css/en#property

## Slide 383

https://pinboard.in/u:rsgranne/t:css 

## Slide 386

Firefox 100

## Slide 387

Safari 15.4

## Slide 388

Brave 1.37.113

## Slide 390

https://jigsaw.w3.org/css-validator/

## Slide 393

http://theolabrothers.com

## Slide 394

http://theolabrothers.com

## Slide 398

The Mac version is garbage

## Slide 399

http://annystudio.com/software/colorpicker/

## Slide 400

http://annystudio.com/software/colorpicker/

## Slide 401

PicPick (https://picpick.app/en/) looks pretty good, but it doesn’t seem to support HSL; $30

## Slide 402

http://www.iconico.com/colorpro/ 

## Slide 403

http://www.iconico.com/colorpro/