Coding Potpourri: CSS
Upcoming SlideShare
Loading in...5
×
 

Coding Potpourri: CSS

on

  • 1,142 views

 

Statistics

Views

Total Views
1,142
Views on SlideShare
1,133
Embed Views
9

Actions

Likes
1
Downloads
12
Comments
0

3 Embeds 9

http://cssis.tomboone.com 4
http://cssis.org 4
http://cssis.local 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    Coding Potpourri: CSS Coding Potpourri: CSS Presentation Transcript

    • #sc_drag_crop  {          bottom:  -­‐25px;          text-­‐align:  center;          right:  10px;          min-­‐width:  30px;          padding:  0  10px; } CSS:  Cascading  Style  Sheets Tom  Boone Loyola  Law  School  –  Los  Angeles thomas.boone@lls.edu h=p://www.slideshare.net/tombooneTuesday, July 26, 11
    • Without  CSS,  all  content   is  already  on  the  page. 2Tuesday, July 26, 11
    • Without  CSS,  most   content  is  unreadable. 3Tuesday, July 26, 11
    • For  example... 4Tuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • #1 #2 #3 Browser Site User Style Style Style Sheet Sheet SheetTuesday, July 26, 11
    • Default  Styles #1 #2 #3 Browser Site User Style Style Style Sheet Sheet SheetTuesday, July 26, 11
    • ***Website  Styles*** #1 #2 #3 Browser Site User Style Style Style Sheet Sheet SheetTuesday, July 26, 11
    • User  Overrides #1 #2 #3 Browser Site User Style Style Style Sheet Sheet SheetTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • StyleTuesday, July 26, 11
    • Style 100  ptTuesday, July 26, 11
    • StyleTuesday, July 26, 11
    • Style 300  ptTuesday, July 26, 11
    • Style Times  New  RomanTuesday, July 26, 11
    • StyleTuesday, July 26, 11
    • Style HelveAcaTuesday, July 26, 11
    • Style BlackTuesday, July 26, 11
    • StyleTuesday, July 26, 11
    • Style BlueTuesday, July 26, 11
    • Style #0000FFTuesday, July 26, 11
    • Style BoldTuesday, July 26, 11
    • Style ItalicTuesday, July 26, 11
    • STYLE UppercaseTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Inline  Styles <p  style="font-­‐weight:  bold;">    Some  text </p>Tuesday, July 26, 11
    • Inline  Styles <p  style="font-­‐weight:  bold;">    Some  text </p>Tuesday, July 26, 11
    • Inline  Styles <p  style="font-­‐weight:  bold;">    Some  text </p>Tuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Embedded  Stylesheet <head>    <title>A  page  title</title>    <style  type="text/css">        div#header  {            color:  #ffffff;            font-­‐weight:  bold;        }    </style> </head>Tuesday, July 26, 11
    • Embedded  Stylesheet <head>    <title>A  page  title</title>    <style  type="text/css">        div#header  {            color:  #ffffff;            font-­‐weight:  bold;        }    </style> </head>Tuesday, July 26, 11
    • Embedded  Stylesheet <head>    <title>A  page  title</title>    <style  type="text/css">        div#header  {            color:  #ffffff;            font-­‐weight:  bold;        }    </style> </head>Tuesday, July 26, 11
    • Embedded  Stylesheet <head>    <title>A  page  title</title>    <style  type="text/css">        div#header  {            color:  #ffffff;            font-­‐weight:  bold;        }    </style> </head>Tuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Linked  Stylesheet <head>    <title>A  page  title</title>    <link  rel="stylesheet"   type="text/css"  href="style.css"> </head>Tuesday, July 26, 11
    • Linked  Stylesheet <head>    <title>A  page  title</title>    <link  rel="stylesheet"   type="text/css"  href="style.css"> </head>Tuesday, July 26, 11
    • Linked  Stylesheet <head>    <title>A  page  title</title>    <link  rel="stylesheet"   type="text/css"  href="style.css"> </head>Tuesday, July 26, 11
    • style.css div#header  {          background-­‐color:  #000000;          color:  #ffffff;          border:  1px  solid  #ffffff;          font-­‐weight:  bold; } ul.menu  {  list-­‐style-­‐type:  none; }Tuesday, July 26, 11
    • style.css div#header  {          background-­‐color:  #000000; Linked          color:  #ffffff;          border:  1px  solid  #ffffff;          font-­‐weight:  bold; } ul.menu  { Stylesheet  list-­‐style-­‐type:  none; }Tuesday, July 26, 11
    • Linked  Stylesheet <head>    <title>A  page  title</title>    <link  rel="stylesheet"   type="text/css"  href="style.css"> </head>Tuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Three  Kinds  of  Stylesheets Linked Embedded InlineTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Cascading Style SheetsTuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule p  {color:  red;} 52Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector p  {color:  red;} 53Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector DeclaraAon p  {color:  red;} 54Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector DeclaraAon p  {color:  red;} Property Value 55Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector p  {color:  red;} 56Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector <p>some  text</p> 57Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector p  {color:  red;} Affects  EVERY  <p>  tag  on  the  page. 58Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector <p>some  text</p> 59Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector li  {color:  red;} 60Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector <li>some  text</li> 61Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector li  {color:  red;} Affects  EVERY  <li>  tag  on  the  page. 62Tuesday, July 26, 11
    • Anatomy  of  a  CSS  Rule Selector <li>some  text</li> 63Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 64Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 65Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> 66Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> 67Tuesday, July 26, 11
    • Classes Selector p.summary  {color:  red;} 68Tuesday, July 26, 11
    • Classes Selector p.summary  {color:  red;} 69Tuesday, July 26, 11
    • Classes Selector p.summary  {color:  red;} Affects  only  <p>  tags  assigned  a   “summary”  class. 70Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> 71Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> <p>some  text</p> 72Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> <p>some  text</p> <p  class="body">some  text</p> 73Tuesday, July 26, 11
    • Classes Selector p.summary  {color:  red;} p.body  {color:  blue;} 74Tuesday, July 26, 11
    • Classes <p  class="summary">some  text</p> <p>some  text</p> <p  class="body">some  text</p> 75Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 76Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 77Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> 78Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> 79Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> Each  ID  can  only  appear  ONCE  on  a  page. Classes  can  repeat. 80Tuesday, July 26, 11
    • IDs Selector p#summary  {color:  red;} 81Tuesday, July 26, 11
    • IDs Selector p#summary  {color:  red;} 82Tuesday, July 26, 11
    • IDs Selector p#summary  {color:  red;} Affects  only  <p>  tags  assigned  a   “summary”  id. 83Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> 84Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> <p>some  text</p> 85Tuesday, July 26, 11
    • IDs <p  class="summary">some  text</p> <p>some  text</p> <p  class="summary">some  text</p> 86Tuesday, July 26, 11
    • IDs Selector p#summary  {color:  red;} p.summary  {color:  blue;} 87Tuesday, July 26, 11
    • IDs <p  id="summary">some  text</p> <p>some  text</p> <p  class="summary">some  text</p> 88Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 89Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 90Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li>some  text</li>    <li>some  more  text</li> </ul> 91Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li>some  text</li>    <li>some  more  text</li> </ul> 92Tuesday, July 26, 11
    • Descendant  Selectors Selector ul  li  {color:  red;} White  space  between  selectors   means  the  la=er  must  be  a   “descendant”  of  the  former. 93Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li>some  text</li>    <li>some  more  text</li> </ul> 94Tuesday, July 26, 11
    • Descendant  Selectors Selector ul  li  {color:  red;} <li>  tags  not  descended  from  <ul>   tags  will  NOT  be  affected. 95Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li>some  text</li>    <li>some  more  text</li> </ul> <ol>    <li>some  numbered  text</li>    <li>more  numbered  text</li> </ol> 96Tuesday, July 26, 11
    • Descendant  Selectors Selector ul  li  {color:  red;} ol  li  {color:  blue;} 97Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li>some  text</li>    <li>some  more  text</li> </ul> <ol>    <li>some  numbered  text</li>    <li>more  numbered  text</li> </ol> 98Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li  class="first">some  text</li>    <li>some  more  text</li> </ul> Classes/IDs  can  be  combined  with   descendant  selectors 99Tuesday, July 26, 11
    • Descendant  Selectors Selector ul  li.first  {color:  red;} Classes/IDs  can  be  combined  with   descendant  selectors 100Tuesday, July 26, 11
    • Descendant  Selectors <ul>    <li  class="first">some  text</li>    <li>some  more  text</li> </ul> Classes/IDs  can  be  combined  with   descendant  selectors 101Tuesday, July 26, 11
    • SelecAng  more  specific  elements Classes IDs Descendant  Selectors 102Tuesday, July 26, 11
    • Types  of  ProperAes Background Colors Images Posihon Size 103Tuesday, July 26, 11
    • Types  of  ProperAes Background 104Tuesday, July 26, 11
    • Types  of  ProperAes Border Color Width Style  (solid,  dashed,  do=ed) 105Tuesday, July 26, 11
    • Types  of  ProperAes Border 106Tuesday, July 26, 11
    • Types  of  ProperAes Font Family Size Weight 107Tuesday, July 26, 11
    • Types  of  ProperAes Font 108Tuesday, July 26, 11
    • Types  of  ProperAes Posihoning Float Clear Display 109Tuesday, July 26, 11
    • Types  of  ProperAes Posihoning 110Tuesday, July 26, 11
    • Types  of  ProperAes Text Color Alignment Line  Height Decorahon 111Tuesday, July 26, 11
    • Types  of  ProperAes Text 112Tuesday, July 26, 11
    • A  DeclaraAon  can  contain   Values  for  mulAple  ProperAes. p  {    color:  red;    font-­‐weight:  bold; } 113Tuesday, July 26, 11
    • A  CSS  rule  can  contain   mulAple  *disAnct*  selectors p,  li,  ul#menu  {    color:  red;    font-­‐weight:  bold; } 114Tuesday, July 26, 11
    • Latest  Developments Adaphve  Web  Design A  single  web  page  with  CSS  that  adapts   to  any  size  screen. CSS3 Developing  standard  that  includes   animahon,  rotahon,  scaling,  and   skewing 115Tuesday, July 26, 11
    • CSS  Resources w3schools.com  CSS  Tutorial h=p://www.w3schools.com/css/ “CSS:  The  Missing  Manual” by  David  Sawyer  McFarland “CSS:  The  Definihve  Guide” by  Eric  A.  Meyer “Stylin’  with  CSS:  A  Designer’s  Guide” by  Charles  Wyke-­‐Smith 116Tuesday, July 26, 11
    • Sorware Google  Chrome/Safari “Inspect  Element” Firefox Firebug  -­‐  Add-­‐on CSS  Edit  (Mac) 117Tuesday, July 26, 11
    • Tom  Boone Loyola  Law  School  –  Los  Angeles thomas.boone@lls.edu h=p://www.slideshare.net/tomboone 118Tuesday, July 26, 11