Upload
arleen-simmons
View
220
Download
0
Embed Size (px)
Citation preview
CSSBy 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 Graphics or SVG, Class Project
XML User Interface Markup Language or XUL
HTML and XHTML
CSS FormattingFormatting code, cleaning up CSS
Validating code
CSS PlacementInternal or Embedded Style
Inline Style
External Style
Internal or Embedded Style
Inline Style
External StyleHTML Doc
Style Sheet
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
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
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
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
IE Box Model Bug
Compatibility PrefixesIE : -ms-
FireFox : -moz-
Chrome/Safari/Opera : -webkit-
List of examples
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
CSS3 ExamplesCSS Creatures
Futurama Animation Dr. Zoidberg
Google Doodle Inspired
Responsive Cat
QUESTIONS
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
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