• Save
OOP CSS Presenation
Upcoming SlideShare
Loading in...5

OOP CSS Presenation



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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 2

http://www.slideshare.net 2


Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

OOP CSS Presenation OOP CSS Presenation Presentation Transcript

  • CSS Cascading Style Sheets Not like the mountain range.
  • 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)
  • 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
  • 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.
  • Parts of Speech Selectors Properties
  • 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”
  • 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
  • Browser Compatibility http:// www.quirksmode.org/ compatibility.html CSS2 CSS3
  • CSS3 is really cool Rounded Corners Drop Shadows Multiple Columns Multiple Backgrounds
  • Why’s it called Cascading?
  • 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.
  • 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>
  • 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.
  • That’s not OOP Type selectors are basically super classes ID selectors are like instances of a class Class selectors are like modules
  • Box Model IE 6 is broken Almost all other browsers follow this Width/Height is cumulative
  • Box Model cont. none run-in block table inline inherit inline-block inline-table list-item
  • Floats Left Right None Clear? clearfix