18
CS S By Jonathan French

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

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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

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

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

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