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. 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 35 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 36 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 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/#input-byte-stream. ## Slide 43 WebSanity. “Integrating CSS - embedded styles”. CodePen, 7 July 2020, https://codepen.io/websanity/pen/aQPXrX?editors=1000. Web. 7 July 2020. ## Slide 45 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