by jonathan french. what is css? cascading style sheet style sheet language used for the look and...

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