Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
mezzoblue.com/presentations/2011/fowd DAVE SHEA / NEW YORK / 8 NOV 2011 THEFUTUREOFCSS (or, as much as will fit in 40 minutes) [...]... http://goo.gl/81zP8 Word of Warning Sites in Question: 24ways.org & wikipedia.org 24 Ways in Chrome 24 Ways in Firefox Wikipedia in Chrome 24 Ways in Opera Wikipedia in Firefox 24 Ways in Safari Wikipedia in Safari CSS3 Checkup nth-child ul li:nth-‐child(2n+1) { background: #ccc; } nth -of- type gallery img:nth- of- ‐type(odd) { clear: left; } First/Last of Type section p:first- of- ‐type { ... li:nth-‐child(2n+1) { background: #ccc; } nth -of- type gallery img:nth- of- ‐type(odd) { clear: left; } First/Last of Type section p:first- of- ‐type { margin-‐top: 0; } section p:last- of- ‐type { margin-‐bottom: 0; } Forms - Enabled? input:enabled { border: solid 1px #000; } input:disabled { border: solid 1px #CCC; } Forms - Required? input:required:after { color:... input[type="email"]:valid { /* do nothing */ } input[type="email"]:invalid { color: #F00; } div { border-‐radius: 5px; } div { border-‐radius: 5px; } Vendor Prefixes: Time to drop them? div { -‐webkit-‐border-‐radius: 5px; -‐moz-‐border-‐radius: 5px; -‐ms-‐border-‐radius: 5px; -‐o-‐border-‐radius: 5px; border-‐radius: 5px; } div { border-‐radius: 5px;