Why CSS Was Invented (Håkon Wium Lie)

Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015

In the beginning, web pages didn't say anything about fonts, colours or layout. Cascading Style Sheets (CSS) was invented to change this, and today all web pages use CSS. How did this come about? What tools do we find in the CSS toolbox, and why? Which should be added in the future?

1. Why CSS was invented
Håkon Wium Lie
[email protected]

9. HTML
<h1>Headline</h1>
•simple structure
•universal semantics
•media-independent
•open standard

12. CSS
h1 {
font-size: 14px;
color: red;
}
•simple
•presentational
•media-dependent
•open standard

13. HTML & CSS
<h1>Headline</h1>
h1 {
font-size: 14px;
color: red;
}
•simple
•open standards

14. CSS properties

15. Some text

16. font-size: 40px
font-size

17. font-style: italic
font-style

18. font-family: serif
font-family

19. background: #fe7
background

20. border: 0.1em solid black
border

21. border: 0.1em solid #486
border-color

22. border: 0.1em dotted #486
border-style

23. border: 0.3em inset #46F
border-width

24. border: 0.5em outset #F46
border-width

25. text-shadow: 10px 10px black
text-shadow

26. text-shadow: 5px 5px 5px #F79
text-shadow

27. text-shadow: 0px 0px 20px orange; color:
white
text-shadow

28. CSS3

29. border-radius: 40px
border-radius

33. border-radius: 40px
border-radius

34. border-radius: 150px / 50px
border-radius

35. border-radius: 60px 0 / 60px 0;
border-radius

36. CSS3 transitions

37. <img src=coat-of-arm.svg>
img { transition: 1s }
img:hover { transform: rotate(-360deg) }

38. Webfonts

39. Microsoft's Core fonts
Andale MonoArial
Comic Sans MS
Courier NewGeorgia
ImpactTimes New Roman
Trebuchet MSVerdana

40. @import url(http://www.princexml.com/fonts/steffmann/
index.css);
font-family: Angel
Angel

41. font-family: Becker Inline
Becker Inline

42. font-family: Broadcast Titling
Broadcast
Titling

43. font-family: Cardiff
Cardiff

44. font-family: Direction
Direction

45. From: "Siebrand Mazeland (WMF)" <[email protected]>
Date: Wed, 14 Dec 2011 18:49:19 +0100
Sender: [email protected]
To: [email protected], [email protected]
Subject: [Wikitech-l] Report on WebFonts deployment
On Monday December 12 at 18:00 UTC we deployed the extension
WebFonts[1] to 40 wikis in 11 Indic languages and Wikimedia Incubator
-- all wikis in Assamese, Bengali, Gujarati, Hindi, Kannada, Marathi,
Nepali, Oriya, (Eastern) Punjabi, Sankrit and Telugu have WebFonts
now. WebFonts was not deployed on Malayalam and Tamil projects. The
reason for this was that community members had requested us not to. We
are confident that in time, the communities will request that WebFonts
is enabled on their projects.

47. Testing

55. Opera

62. Apps

66. Multicolumn layout

70. Books

75. body {
font: 14pt / 1.4 "Adobe Caslon Pro", serif;
font-variant: opentype(dlig, onum);
hyphens: auto;
text-replace:
"s" "\017F" /* replace s with long s, which looks like f */
"\017Ff" "sf" /* revert change where s appears before f */
"\017Fi" "si" /* revert change where s appears before i */
"\017F\20" "s\20" /* revert change at end of word */
"\017F\0A" "s\20" /* revert change at end of word, where newline follows */
"\017F\200B" "s\20" /* revert change at end of word, where zero width space follows */
"\017F," "s," /* revert change at end of word, where comma follows */
"\017F;" "s;" /* revert change at end of word, where semicolon follow */
"\017F:" "s:" /* revert change at end of word, where colon follows */
"\017F." "s." /* revert change at end of word, where period follows */
":" "\2008:"; /* add punctuation space before colon */
}

77. How long will the web last?

78. 500 years!