Designing With CSS

1,257 views

Published on

This presentation is a basic introduction to beginning and advanced CSS usage, including information about the University Housing website redesign.

Published in: Technology, Education
1 Comment
1 Like
Statistics
Notes
  • Can you tag this with siucweb?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,257
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
96
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Goals of this presentation:
    1. Brief overview of CSS
    2. The Basics of Getting Started
    3. CSS Frameworks
    4. Brief look @ Putting it together
    5. Q&A – CSS Evaluation
  • This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you’d simply override later. There are pros & cons to using almost any CSS technique, decide yourself what you’d like to do!
  • This is a basic reset stylesheet. This might not work for your setup, or you may wish to change something you’d simply override later. There are pros & cons to using almost any CSS technique, decide yourself what you’d like to do!
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • sIRF: Scalable Inman Flash Replacement (flash)EOT: Microsoft’s choice (browser)
    @font-face: CSS3, supported in some browsers (we’ll cover it more later) (CSS)
    cúfon: javascript solution (javascript)
  • We use this at Housing, which you’ll see a little later when I show some examples from the housing website.
  • We use this at Housing, which you’ll see a little later when I show some examples from the housing website.
  • We use this at Housing, which you’ll see a little later when I show some examples from the housing website.
  • .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren’t any browser makers though...
    Typekit: Jeffery Veen, Jason Santa Maria, & other’s take on javascript embedding of fonts.
    Kernest: Similar to typekit with open source fonts
    Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  • .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren’t any browser makers though...
    Typekit: Jeffery Veen, Jason Santa Maria, & other’s take on javascript embedding of fonts.
    Kernest: Similar to typekit with open source fonts
    Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  • .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren’t any browser makers though...
    Typekit: Jeffery Veen, Jason Santa Maria, & other’s take on javascript embedding of fonts.
    Kernest: Similar to typekit with open source fonts
    Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  • .webfont: New kid on the block but there are a lot of type foundries behind this, including Hoefler & Frere-Jones-designers of Gotham (the Obama font), and the font used in this presentation (Champion) . At this point there aren’t any browser makers though...
    Typekit: Jeffery Veen, Jason Santa Maria, & other’s take on javascript embedding of fonts.
    Kernest: Similar to typekit with open source fonts
    Font Deck: Similar to TypeKit, created by Clearleft (Andy Budd, Jeremy Keith, and others work for this UK design firm)
  • Units of Measure on the web can be absolute or relative.
    It’s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors.
    The most common units are
    * Pixels - relative to the screen resolutions
    * Em Space - width of the capital letter ‘M’ of a font
    * Percentage - relative to the parent size
  • Units of Measure on the web can be absolute or relative.
    It’s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors.
    The most common units are
    * Pixels - relative to the screen resolutions
    * Em Space - width of the capital letter ‘M’ of a font
    * Percentage - relative to the parent size
  • Units of Measure on the web can be absolute or relative.
    It’s highly suggested to use relative measures as it is nearly impossible to control the environment of your visitors.
    The most common units are
    * Pixels - relative to the screen resolutions
    * Em Space - width of the capital letter ‘M’ of a font
    * Percentage - relative to the parent size
  • Global sizing is typically based on 16px across most browsers. That is a bit big. Establishing a font size of 62.5% resets our baseline to 1em = 10px.

    Now we have the ability to do fun things like
  • Global sizing is typically based on 16px across most browsers. That is a bit big. Establishing a font size of 62.5% resets our baseline to 1em = 10px.

    Now we have the ability to do fun things like
  • Then we can create our typographical sizes
  • And we have the ability to do fun things like set heights & widths based on em
  • It matters less now, but still a decision you’ll need to make. It mattered more when text zooming was the norm.
  • First we’ll look at page zooming (this is the default in most browsers).

    Notice that we increase the total height & width of all elements, causing the need to horizontally scroll as well as vertically scroll
  • With text zooming, only the size of the text changes, the other elements do not change in size. Many people with low vision prefer this because they do not need to scroll horizontally.

    The idea of sizing elements with EM is that if your layout is em based, it will have a pseudo-page zoom effect.
  • Floating is what allows us to do all sorts of crazy things with CSS and get modern day column layouts.
  • There are two div elements. We tell box 1 to float on the left, give us some space on the right side, and, following W3C recommendations, we assign a width.

    Elements above the floated element will not be affected, all items below will wrap, that’s why we see box 2 come up
  • There are two div elements. We tell box 1 to float on the left, give us some space on the right side, and, following W3C recommendations, we assign a width.

    Elements above the floated element will not be affected, all items below will wrap, that’s why we see box 2 come up
  • Luckily you don’t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them.

    Cons: less flexibility–less skill required
  • Luckily you don’t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them.

    Cons: less flexibility–less skill required
  • Luckily you don’t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them.

    Cons: less flexibility–less skill required
  • Luckily you don’t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them.

    Cons: less flexibility–less skill required
  • Luckily you don’t all have to spend as much time as once necessary to make a great CSS layout. There are many CSS frameworks and there are a lot of pros and cons to them.

    Cons: less flexibility–less skill required
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • University Housing is using the 960 Grid System
  • Most frameworks consists of three things; Reset Stylesheets, Typography Stylesheets, and Grids (fluid or fixed). We’ve talked about reset stylesheets & typography already so let’s take a quick look at grids
  • The University Housing website is using the 960 Grid System 12-column grid layout. The red bars are the primary grid layout. You can have nested grid layouts and you can do some limited adjusting ( removing of leading or trailing gutters, etc…)
  • The University Housing website is using the 960 Grid System 12-column grid layout. The red bars are the primary grid layout. You can have nested grid layouts and you can do some limited adjusting ( removing of leading or trailing gutters, etc…)
  • Combining all of this basic CSS knowledge is the most challenging part. The rest of the presentation I’ll be highlighting pieces of the University Housing website’s latest design. I’ll be touching on an idea called “progressive enhancement” or “progressive enrichment”.
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • You can see we have some interesting fonts at the top, we’re using a combo of @font-face & cúfon to achieve this.

    1. SIU Header
    2. Navigation
    3. Housing Header / Mission Statement
    4. Content
    a. Left Column
    b. Middle Column
    c. Right Column
  • The Housing website is created with the aim of progressive enrichment.
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • I prefer to split out my styles into logical stylesheets. I’ve also set up a system that will allow me to add-in advanced CSS techniques without a lot of hacks.

    The top level represents the main styles. You can certainly combine them into one or two big files, if you’d like.

    The arrows point to the files involved in the progressive enhancement
  • Designing With CSS

    1. 1. DESIGNING WITH Daniel Reedy daniel.reedy@housing.siu.edu
    2. 2. Daniel Reedy daniel.reedy@housing.siu.edu
    3. 3. CASCADING STYLE Daniel Reedy daniel.reedy@housing.siu.edu
    4. 4. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
    5. 5. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
    6. 6. SEPARATION OF COMPONENTS Daniel Reedy daniel.reedy@housing.siu.edu
    7. 7. screen.css index.html print.css Daniel Reedy daniel.reedy@housing.siu.edu
    8. 8. Daniel Reedy daniel.reedy@housing.siu.edu
    9. 9. Daniel Reedy daniel.reedy@housing.siu.edu
    10. 10. + Daniel Reedy daniel.reedy@housing.siu.edu
    11. 11. + = Daniel Reedy daniel.reedy@housing.siu.edu
    12. 12. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
    13. 13. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
    14. 14. BANDWIDTH Daniel Reedy daniel.reedy@housing.siu.edu
    15. 15. PAGE REFORMATTING Daniel Reedy daniel.reedy@housing.siu.edu
    16. 16. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
    17. 17. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
    18. 18. EVEN THE PLAYING FIELD Daniel Reedy daniel.reedy@housing.siu.edu
    19. 19. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    20. 20. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    21. 21. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, line-height: 1; blockquote, pre, a, abbr, acronym, color: black; address, big, cite, code,del, dfn, em, background: white; font, img, ins, kbd, q, s, samp, small, } strike, strong, sub, sup, tt, var, dl, dt, ol, ul { dd, ol, ul, li, fieldset, form, label, list-style: none; legend, } table, caption, tbody, tfoot, thead, tr, /* tables still need 'cellspacing="0"' th, td { in the markup */ margin: 0; table { padding: 0; border-collapse: separate; RESET STYLE SHEET border: 0; border-spacing: 0; outline: 0; } font-weight: inherit; caption, th, td { font-style: inherit; text-align: left; font-size: 100%; font-weight: normal; font-family: inherit; } vertical-align: baseline; blockquote:before, blockquote:after, } q:before, q:after { /* remember to define focus styles! content: ""; */ } :focus { blockquote, q { outline: 0; quotes: "" ""; } } Daniel Reedy body { daniel.reedy@housing.siu.edu http://meyerweb.com/eric/thoughts/ 2007/05/01/reset-reloaded/
    22. 22. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    23. 23. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
    24. 24. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
    25. 25. STATIC IMAGES Daniel Reedy daniel.reedy@housing.siu.edu
    26. 26. SIFR 2.0 Daniel Reedy daniel.reedy@housing.siu.edu
    27. 27. EMBEDDED OPEN TYPE Daniel Reedy daniel.reedy@housing.siu.edu
    28. 28. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    29. 29. Daniel Reedy daniel.reedy@housing.siu.edu
    30. 30. Daniel Reedy daniel.reedy@housing.siu.edu
    31. 31. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    32. 32. /* In your CSS file (e.g. typography.css) */ @font-face { font-family: "MinyaNouvelle"; @FONT-FACE src: url('http://localhost/fonts/minya-nouvelle-bd.otf') format("opentype"); } h1, h2, h3, h4, h5 { font-family: "MinyaNouvelle", sans-serif } Daniel Reedy daniel.reedy@housing.siu.edu
    33. 33. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    34. 34. Daniel Reedy daniel.reedy@housing.siu.edu
    35. 35. Daniel Reedy daniel.reedy@housing.siu.edu
    36. 36. Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    37. 37. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    38. 38. <!-- // In the <HEAD> tags of your document --> <script type="text/javascript"> $(document).ready(function() { if(!$.fontAvailable('MinyaNouvelle')) { Cufon.replace('h1', { fontFamily: “MinyaNouvelle” }); CÚFON & @FONT- } }); </script> <!-- // Directly prior to the </BODY> tag. This is need for IE --> <script type="text/javascript"> Cufon.now(); </script> Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    39. 39. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    40. 40. Daniel Reedy daniel.reedy@housing.siu.edu
    41. 41. FRESH IDEAS ON WEB Daniel Reedy daniel.reedy@housing.siu.edu
    42. 42. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
    43. 43. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
    44. 44. TYPEKIT Daniel Reedy daniel.reedy@housing.siu.edu
    45. 45. KERNEST Daniel Reedy daniel.reedy@housing.siu.edu
    46. 46. FONT DECK Daniel Reedy daniel.reedy@housing.siu.edu
    47. 47. Daniel Reedy daniel.reedy@housing.siu.edu
    48. 48. LAYOUT Daniel Reedy daniel.reedy@housing.siu.edu
    49. 49. Daniel Reedy daniel.reedy@housing.siu.edu
    50. 50. BOX MODEL Daniel Reedy daniel.reedy@housing.siu.edu
    51. 51. Daniel Reedy daniel.reedy@housing.siu.edu
    52. 52. Daniel Reedy daniel.reedy@housing.siu.edu
    53. 53. Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Daniel Reedy daniel.reedy@housing.siu.edu
    54. 54. Element 1 Daniel Reedy daniel.reedy@housing.siu.edu
    55. 55. Daniel Reedy daniel.reedy@housing.siu.edu
    56. 56. Daniel Reedy daniel.reedy@housing.siu.edu
    57. 57. CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    58. 58. PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    59. 59. BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    60. 60. MARGIN BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    61. 61. TOP MARGIN BORDER PADDING LEFT CONTENT RIGHT BOTTOM Daniel Reedy daniel.reedy@housing.siu.edu
    62. 62. Daniel Reedy daniel.reedy@housing.siu.edu
    63. 63. UNITS OF Daniel Reedy daniel.reedy@housing.siu.edu
    64. 64. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
    65. 65. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
    66. 66. EM SPACE (EM) Daniel Reedy daniel.reedy@housing.siu.edu
    67. 67. PERCENT (%) Daniel Reedy daniel.reedy@housing.siu.edu
    68. 68. Daniel Reedy daniel.reedy@housing.siu.edu
    69. 69. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
    70. 70. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
    71. 71. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A h1 { font-size: 2.4em; } /* 24px */ h2 { font-size: 1.8em; } /* 18px */ h3 { font-size: 1.4em; } /* 14px */ Daniel Reedy daniel.reedy@housing.siu.edu
    72. 72. /* In your type CSS file (e.g. typography.css) */ body { font-size: 62.5%; /* This establishes a 10px = 1em ratio */ } ESTABLISH A h1 { font-size: 2.4em; } /* 24px */ h2 { font-size: 1.8em; } /* 18px */ h3 { font-size: 1.4em; } /* 14px */ /* In your layout CSS File (e.g. screen.css) */ #header { height: 3em; } /* 30px */ Daniel Reedy daniel.reedy@housing.siu.edu
    73. 73. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
    74. 74. Daniel Reedy daniel.reedy@housing.siu.edu
    75. 75. WHICH ONE? Daniel Reedy daniel.reedy@housing.siu.edu
    76. 76. Daniel Reedy daniel.reedy@housing.siu.edu
    77. 77. FLOATS Daniel Reedy daniel.reedy@housing.siu.edu
    78. 78. Daniel Reedy daniel.reedy@housing.siu.edu
    79. 79. Daniel Reedy daniel.reedy@housing.siu.edu
    80. 80. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    81. 81. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    82. 82. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    83. 83. box 1 box 2 <!-- // In your .html file --> <div id=”box1”> <p>box 1</p> </div> <div id=”box2”> <p>box 2</p> </div> /* In your layout CSS File (e.g. screen.css) */ #box1 { float: left; margin-right: 1em; width: 3em; } Daniel Reedy daniel.reedy@housing.siu.edu
    84. 84. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    85. 85. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
    86. 86. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
    87. 87. SPEED UP DEVELOPMENT Daniel Reedy daniel.reedy@housing.siu.edu
    88. 88. SIMPLIFY DESIGN Daniel Reedy daniel.reedy@housing.siu.edu
    89. 89. EASILY BREAKABLE Daniel Reedy daniel.reedy@housing.siu.edu
    90. 90. STRICT CONSTRAINTS Daniel Reedy daniel.reedy@housing.siu.edu
    91. 91. Daniel Reedy daniel.reedy@housing.siu.edu
    92. 92. BLUEPRINT 960 GRID YAHOO Daniel Reedy daniel.reedy@housing.siu.edu
    93. 93. 960 GRID Daniel Reedy daniel.reedy@housing.siu.edu
    94. 94. Daniel Reedy daniel.reedy@housing.siu.edu
    95. 95. RESET, TYPOGRAPHY, & Daniel Reedy daniel.reedy@housing.siu.edu
    96. 96. Daniel Reedy daniel.reedy@housing.siu.edu
    97. 97. GRIDS Daniel Reedy daniel.reedy@housing.siu.edu
    98. 98. Daniel Reedy daniel.reedy@housing.siu.edu
    99. 99. PUTTING IT ALL TOGETHER Daniel Reedy daniel.reedy@housing.siu.edu
    100. 100. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> <body> <div class="container_12"> <div class="grid_12"> <!-- // SIU Header --> </div> <div class="clear">&nbsp;</div> </div> <div id="housing_header" class="container_12"> <div class="grid_12 alpha omega"> <!-- // Navigation --> </div> <div class="prefix_8 grid_4 omega"> <!-- // Mission Statement --> </div> <div class="clear">&nbsp;</div> </div> <div id="page_content" class="container_12"> <div class="grid_4"> <!-- // Left Column --> </div> <div class="prefix_1 grid_4"> <!-- // Middle Column --> </div> <div class="grid_3 omega"> <!-- // Right Column --> </div> <div class="clear">&nbsp;</div> </div>
    101. 101. Daniel Reedy daniel.reedy@housing.siu.edu
    102. 102. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
    103. 103. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
    104. 104. THE STYLE SHEETS reset 960 typography layout colour Daniel Reedy daniel.reedy@housing.siu.edu
    105. 105. THE STYLE SHEETS reset 960 typography layout colour screen print Daniel Reedy daniel.reedy@housing.siu.edu
    106. 106. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
    107. 107. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
    108. 108. /* colour.css */ html { background: rgb(87,0,36); } a { color: rgb(14,117,138); } a:visted { color: rgb(110,5,101); } #siu_header, #siu_header a { color: rgb(132,128,111); } #mission { color: rgb(216,214,184); } #main_navigation, #main_navigation a, #footer_navigation, #footer_navigation a { color: rgb(255,255,255); } #columns, #columns a { color: rgb(87,0,36); } #copyright { color: rgb(255,255,255); } /* typography.css */ body { font-size:62.5%; } /* 1em = 10px */ h1 { font-size:2.4em; } /* displayed at 24px */ h2 { font-size:2.0em; } /* displayed at 20px */ h3 { font-size:1.8em; } /* displayed at 18px */ h4 { font-size:1.4em; } /* displayed at 14px */ #page_content p { font-size:1.4em; line-height: 1.8em; margin-bottom: 1.8em;} /* displayed at 14px */ #siu_header { font-size: 2.0em; text-align: center; letter-spacing: .5em; text-transform: uppercase; } #siu_header a { text-decoration: none; } #mission { font-size: 2.3em; letter-spacing: .04em; } #main_navigation, #footer_navigation { font-size: 1.5em; text-align: center; text-transform: uppercase; } #columns h2 { font-size: 1.8em; text-transform: uppercase; } #columns ul li { font-size: 1.4em; line-height: 1.8em;} #copyright { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: .8em; letter-spacing: .1em; line-height: 1.6em; } .angelina { font-size: 1.8em; }
    109. 109. <!-- // index.html --> <div class="flyer"> <p> <a href="/contract/residence-halls/"> <img src="/images/housing_rocks.png" alt="Housing Rocks" /> </a> </p> </div> /* screen.css */ .flyer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); }
    110. 110. Daniel Reedy daniel.reedy@housing.siu.edu
    111. 111. WHAT’S NEW IN CSS3? Daniel Reedy daniel.reedy@housing.siu.edu
    112. 112. Daniel Reedy daniel.reedy@housing.siu.edu
    113. 113. Q&A – CSS EVALUATION Daniel Reedy daniel.reedy@housing.siu.edu
    114. 114. Daniel Reedy daniel.reedy@housing.siu.edu
    115. 115. THANK YOU! Daniel Reedy daniel.reedy@housing.siu.edu
    116. 116. Daniel Reedy daniel.reedy@housing.siu.edu
    117. 117. ERIC MEYER RESET CSS: HTTP://MEYERWEB.COM/ERIC/THOUGHTS/ 2007/05/01/RESET-RELOADED/ SCALABLE INMAN FLASH REPLACEMENT: HTTP:// WWW.MIKEINDUSTRIES.COM/BLOG/SIFR/ EMBEDDED OPEN TYPE (EOT) FONT TOOL: HTTP:// WWW.MICROSOFT.COM/TYPOGRAPHY/WEFT.MSPX OVERVIEW OF @FONT-FACE: HTTPS://DEVELOPER.MOZILLA.ORG/ INDEX.PHP?TITLE=EN/CSS/%40FONT-FACE CÚFON: HTTP://WIKI.GITHUB.COM/SORCCU/CUFON/ABOUT .WEBFONT PROPOSAL HTTP://LISTS.W3.ORG/ARCHIVES/PUBLIC/WWW- FONT/2009JULSEP/0440.HTML TYPE FOUNDRIES SUPPORTING .WEBFONT: HTTP:// WWW.TYPOGRAPHER.ORG/2009/07/WEBFONT-PROPOSAL-GAINS- Daniel Reedy daniel.reedy@housing.siu.edu

    ×