Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 By Jonathan French

2 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

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

4 CSS Placement Internal or Embedded Style Inline Style External Style

5 Internal or Embedded Style

6 Inline Style

7 External Style HTML Doc Style Sheet

8 History of CSS 1990- HTML - desire to separate structure from layout 1994- 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 1998- CSS2 released 1999- CSS3 released

9 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

10 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

11 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

12 IE Box Model Bug

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

14 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

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

16 QUESTIONS

17 Works Cited 20 examples of SVG that will make your jaw drop (2011, July 21). In CB Creative Bloq. Retrieved October 29, 2014, from http://www.creativebloq.com/design/examples-svg-7112785http://www.creativebloq.com/design/examples-svg-7112785 22 stunning examples of CSS3 animation (2014, August 15). In CB Creative Bloq. Retrieved October 29, 2014, from http://www.creativebloq.com/css3/animation-with-css3-712437http://www.creativebloq.com/css3/animation-with-css3-712437 A Case of Indifference (n.d.). In WCT Illustrated. Retrieved October 29, 2014, from http://webconsistencytesting.com/illustrated.htmlhttp://webconsistencytesting.com/illustrated.html Cascading Style Sheets (n.d.). In Wikipedia. Retrieved October 29, 2014, from http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitationshttp://en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations CLEANCSS (n.d.). Retrieved October 29, 2014, from http://www.cleancss.com/http://www.cleancss.com/ Coyier, C. (2008, February 28). Color Rendering Difference: Firefox vs. Safari. In CSS-Tricks. Retrieved October 29, 2014, from http://css-tricks.com/color-rendering-difference-firefox-vs-safari/http://css-tricks.com/color-rendering-difference-firefox-vs-safari/ CSS3 Browser Support Reference (n.d.). In w3schools.com. Retrieved October 29, 2014, from http://www.w3schools.com/cssref/css3_browsersupport.asp Facts about W3C (n.d.). In W3C. Retrieved October 29, 2014, from http://www.w3.org/Consortium/factshttp://www.w3.org/Consortium/facts

18 Works Cited Format CSS Code (n.d.). In {CSS}Portal. Retrieved October 29, 2014, from http://www.cssportal.com/format-css/index.phphttp://www.cssportal.com/format-css/index.php Facts about W3C (n.d.). In W3C. Retrieved October 29, 2014, from http://www.w3.org/Consortium/factshttp://www.w3.org/Consortium/facts Internet Explorer Box Model Bug (n.d.). In Wikipedia. Retrieved October 29, 2014, from http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug Learning CSS (n.d.). In VORD Web Design. Retrieved October 29, 2014, from http://www.vordweb.co.uk/css/advantages-of-css.htmhttp://www.vordweb.co.uk/css/advantages-of-css.htm 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 http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694


Download ppt "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."

Similar presentations


Ads by Google