OOP CSS Presenation

1,654 views

Published on

Brief Overview of CSS and how it's similar to OOP

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,654
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

OOP CSS Presenation

  1. 1. CSS Cascading Style Sheets Not like the mountain range.
  2. 2. What isn’t CSS A programming language It lacks variables, logic, operators, etc. A markup language It contains no “data” or “content” A standard (It’s a specification and no one agrees)
  3. 3. What is CSS A method to style any XML Presentation (not content) Universally dis-agreed upon Inheritance based, so conceptually similar as subclassing in OOP
  4. 4. CSS 1 & 2 & 3 Three major “versions” of CSS Completely different levels of implementation across browsers. CSS 1: 1996 CSS 2: 1998 CSS 3: Probably never.
  5. 5. Parts of Speech Selectors Properties
  6. 6. Selectors Type <a></a> <div></div><h1></h1> “a” or “div” or “h1” Class <div class=”foo”></div> “.foo” IDs <div id=”logo”></div> “#logo”
  7. 7. Advanced Selectors Compound <h1 id=”header” class=”new”>Foo</h1> h1#header.new Psuedo <a href=”http://someothersite.com/></a> a[href^"=http://"] not: <a href=”/thisislocal.com”></a> not IE6 safe
  8. 8. Browser Compatibility http:// www.quirksmode.org/ compatibility.html CSS2 CSS3
  9. 9. CSS3 is really cool Rounded Corners Drop Shadows Multiple Columns Multiple Backgrounds
  10. 10. Why’s it called Cascading?
  11. 11. Cascading xml is hierarchical so css is hierarchical. Styles applied to parent elements cascade to their children. Styles applied at the most general level cascade to all elements that fit that general level.
  12. 12. Cascading <html> <head> <title>A first cascade</title> <style type="text/css"> p { font-size: 36px; color: red; background: yellow; } </style> </head> <body> This is body <br /> <p>This is a default styled paragraph</p> <p style="font-size: 24px;">This is 24px paragraph</p> <br /> This is more default body <br /> </body> </html>
  13. 13. So what’s this OOP OPP has inheritance. In object-oriented programming, inheritance is a way to form new classes (instances of which are called objects) using classes that have already been defined. The inheritance concept was invented in 1967 for Simula.
  14. 14. That’s not OOP Type selectors are basically super classes ID selectors are like instances of a class Class selectors are like modules
  15. 15. Box Model IE 6 is broken Almost all other browsers follow this Width/Height is cumulative
  16. 16. Box Model cont. none run-in block table inline inherit inline-block inline-table list-item
  17. 17. Floats Left Right None Clear? clearfix

×