by jonathan french. what is css? cascading style sheet style sheet language used for the look and...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/1.jpg)
CSSBy Jonathan French
![Page 2: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/2.jpg)
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 Graphics or SVG, Class Project
XML User Interface Markup Language or XUL
HTML and XHTML
![Page 3: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/3.jpg)
CSS FormattingFormatting code, cleaning up CSS
Validating code
![Page 4: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/4.jpg)
CSS PlacementInternal or Embedded Style
Inline Style
External Style
![Page 5: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/5.jpg)
Internal or Embedded Style
![Page 6: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/6.jpg)
Inline Style
![Page 7: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/7.jpg)
External StyleHTML Doc
Style Sheet
![Page 8: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/8.jpg)
History of CSS1990- HTML - desire to separate structure from layout
1994- The saga of CSS beginsHakon 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
![Page 9: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/9.jpg)
W3CWorld 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
![Page 10: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/10.jpg)
CSS VersionsCSS 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)
Each module adds new features or expands upon CSS 2
![Page 11: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/11.jpg)
Problems With CSSCompatibility- 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
![Page 12: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/12.jpg)
IE Box Model Bug
![Page 13: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/13.jpg)
Compatibility PrefixesIE : -ms-
FireFox : -moz-
Chrome/Safari/Opera : -webkit-
List of examples
![Page 14: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/14.jpg)
Benefits of CSSAllows for easy changes
Allows for a smaller HTML file size
Allows for consistency
Makes life easy for users who wish to view content only
![Page 15: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/15.jpg)
CSS3 ExamplesCSS Creatures
Futurama Animation Dr. Zoidberg
Google Doodle Inspired
Responsive Cat
![Page 16: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/16.jpg)
QUESTIONS
![Page 17: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/17.jpg)
Works Cited20 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-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-712437
A Case of Indifference (n.d.). In WCT Illustrated. Retrieved October 29, 2014, from http://webconsistencytesting.com/illustrated.html
Cascading Style Sheets (n.d.). In Wikipedia. Retrieved October 29, 2014,
from http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations
CLEANCSS (n.d.). Retrieved October 29, 2014, from 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/
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/facts
![Page 18: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062717/56649e1a5503460f94b08608/html5/thumbnails/18.jpg)
Works Cited
Format CSS Code (n.d.). In {CSS}Portal. Retrieved October 29, 2014, from http://www.cssportal.com/format-css/index.php
Facts about W3C (n.d.). In W3C. Retrieved October 29, 2014, from http://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.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-15694