By Jonathan French

What is CSS? Cascading Style Sheet Style sheet language Used for the look and formatting of a document written in a markup language Applied to any kind of XML document such as: Plain XML (POX) Scalable Vector GraphicsScalable Vector Graphics or SVG, Class ProjectSVGClass Project XML User Interface Markup LanguageXML User Interface Markup Language or XUL HTML and XHTML

CSS Formatting Formatting codeFormatting code, cleaning up CSScleaning up CSS Validating code

CSS Placement Internal or Embedded Style Inline Style External Style

Internal or Embedded Style

Inline Style

External Style HTML Doc Style Sheet

History of CSS HTML - desire to separate structure from layout The saga of CSS begins Hakon Wium Lie first proposed CSS Bert Bos’s proposal was influential and later regarded as co-founder of CSS While being presented at a Web conference in Chicago CSS was perceived as too simple for the task 1996-After a few years of fighting, CSS 1 emerged as a W3C Recommendation CSS2 released CSS3 released

W3C World Wide Web Consortium Founded in 1994 by Tim Berners-Lee International community of member organizations, staff, and the public to develop web standards Led by Tim Berners-Lee and Jeffrey Jaffe Mission: to lead the Web to its full potential

CSS Versions CSS 1 Supports font properties, color, text attributes, margin, border,etc W3C no longer maintains the CSS 1 recommendation CSS 2 Superset of CSS 1 New capabilities such as absolute, relative, and fixed positioning, z-index, support aural styles sheets (later replaced in CSS 3) W3C no longer maintains the CSS 2 recommendation CSS 3 Divided into several separate documents called “modules” (unlike CSS 2 which is a large single specification)modules Each module adds new features or expands upon CSS 2

Problems With CSS Compatibility- does not work consistently across all the browsers Internet Explorer Box Model Bug Earlier versions of IE handled the sizing of elements in a web page differently than the standard way W3C recommends for CSS IE 6 and on are not affected as long as there are certain document type declarations in the HTML

IE Box Model Bug

Compatibility Prefixes IE : -ms- FireFox : -moz- Chrome/Safari/Opera : -webkit- List of examples

Benefits of CSS Allows for easy changes Allows for a smaller HTML file size Allows for consistency Makes life easy for users who wish to view content only

CSS3 Examples CSS Creatures Futurama AnimationFuturama Animation Dr. Zoidberg Google Doodle Inspired Responsive Cat

QUESTIONS

Works Cited 20 examples of SVG that will make your jaw drop (2011, July 21). In CB Creative Bloq. Retrieved October 29, 2014, from 22 stunning examples of CSS3 animation (2014, August 15). In CB Creative Bloq. Retrieved October 29, 2014, from A Case of Indifference (n.d.). In WCT Illustrated. Retrieved October 29, 2014, from Cascading Style Sheets (n.d.). In Wikipedia. Retrieved October 29, 2014, from CLEANCSS (n.d.). Retrieved October 29, 2014, from Coyier, C. (2008, February 28). Color Rendering Difference: Firefox vs. Safari. In CSS-Tricks. Retrieved October 29, 2014, from CSS3 Browser Support Reference (n.d.). In w3schools.com. Retrieved October 29, 2014, from Facts about W3C (n.d.). In W3C. Retrieved October 29, 2014, from

Works Cited Format CSS Code (n.d.). In {CSS}Portal. Retrieved October 29, 2014, from Facts about W3C (n.d.). In W3C. Retrieved October 29, 2014, from Internet Explorer Box Model Bug (n.d.). In Wikipedia. Retrieved October 29, 2014, from Learning CSS (n.d.). In VORD Web Design. Retrieved October 29, 2014, from Lie, H. W., & Bos, B. (n.d.). Cascading Style Sheets. Onori, P. (2013, October 8). Manipulating SVG Icons With Simple CSS. In tuts+. Retrieved October 29, 2014, from