Your SlideShare is downloading. ×
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Designing With CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing With CSS

1,055

Published on

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

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,055
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
95
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. DESIGNING WITH Daniel Reedy daniel.reedy@housing.siu.edu
    • 2. Daniel Reedy daniel.reedy@housing.siu.edu
    • 3. CASCADING STYLE Daniel Reedy daniel.reedy@housing.siu.edu
    • 4. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
    • 5. FLEXIBILITY Daniel Reedy daniel.reedy@housing.siu.edu
    • 6. SEPARATION OF COMPONENTS Daniel Reedy daniel.reedy@housing.siu.edu
    • 7. screen.css index.html print.css Daniel Reedy daniel.reedy@housing.siu.edu
    • 8. Daniel Reedy daniel.reedy@housing.siu.edu
    • 9. Daniel Reedy daniel.reedy@housing.siu.edu
    • 10. + Daniel Reedy daniel.reedy@housing.siu.edu
    • 11. + = Daniel Reedy daniel.reedy@housing.siu.edu
    • 12. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
    • 13. CONSISTANCY Daniel Reedy daniel.reedy@housing.siu.edu
    • 14. BANDWIDTH Daniel Reedy daniel.reedy@housing.siu.edu
    • 15. PAGE REFORMATTING Daniel Reedy daniel.reedy@housing.siu.edu
    • 16. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
    • 17. GETTING STARTED Daniel Reedy daniel.reedy@housing.siu.edu
    • 18. EVEN THE PLAYING FIELD Daniel Reedy daniel.reedy@housing.siu.edu
    • 19. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    • 20. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. RESET STYLE SHEET Daniel Reedy daniel.reedy@housing.siu.edu
    • 23. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
    • 24. GREAT WEB TYPOGRAPHY Daniel Reedy daniel.reedy@housing.siu.edu
    • 25. STATIC IMAGES Daniel Reedy daniel.reedy@housing.siu.edu
    • 26. SIFR 2.0 Daniel Reedy daniel.reedy@housing.siu.edu
    • 27. EMBEDDED OPEN TYPE Daniel Reedy daniel.reedy@housing.siu.edu
    • 28. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    • 29. Daniel Reedy daniel.reedy@housing.siu.edu
    • 30. Daniel Reedy daniel.reedy@housing.siu.edu
    • 31. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. @FONT-FACE Daniel Reedy daniel.reedy@housing.siu.edu
    • 34. Daniel Reedy daniel.reedy@housing.siu.edu
    • 35. Daniel Reedy daniel.reedy@housing.siu.edu
    • 36. Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    • 37. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    • 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. CÚFON & @FONT- Daniel Reedy daniel.reedy@housing.siu.edu Font Available Plugin: http:// code.google.com/p/jquery-
    • 40. Daniel Reedy daniel.reedy@housing.siu.edu
    • 41. FRESH IDEAS ON WEB Daniel Reedy daniel.reedy@housing.siu.edu
    • 42. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
    • 43. .WEBFONT Daniel Reedy daniel.reedy@housing.siu.edu
    • 44. TYPEKIT Daniel Reedy daniel.reedy@housing.siu.edu
    • 45. KERNEST Daniel Reedy daniel.reedy@housing.siu.edu
    • 46. FONT DECK Daniel Reedy daniel.reedy@housing.siu.edu
    • 47. Daniel Reedy daniel.reedy@housing.siu.edu
    • 48. LAYOUT Daniel Reedy daniel.reedy@housing.siu.edu
    • 49. Daniel Reedy daniel.reedy@housing.siu.edu
    • 50. BOX MODEL Daniel Reedy daniel.reedy@housing.siu.edu
    • 51. Daniel Reedy daniel.reedy@housing.siu.edu
    • 52. Daniel Reedy daniel.reedy@housing.siu.edu
    • 53. Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Daniel Reedy daniel.reedy@housing.siu.edu
    • 54. Element 1 Daniel Reedy daniel.reedy@housing.siu.edu
    • 55. Daniel Reedy daniel.reedy@housing.siu.edu
    • 56. Daniel Reedy daniel.reedy@housing.siu.edu
    • 57. CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    • 58. PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    • 59. BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    • 60. MARGIN BORDER PADDING CONTENT Daniel Reedy daniel.reedy@housing.siu.edu
    • 61. TOP MARGIN BORDER PADDING LEFT CONTENT RIGHT BOTTOM Daniel Reedy daniel.reedy@housing.siu.edu
    • 62. Daniel Reedy daniel.reedy@housing.siu.edu
    • 63. UNITS OF Daniel Reedy daniel.reedy@housing.siu.edu
    • 64. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
    • 65. PIXELS (PX) Daniel Reedy daniel.reedy@housing.siu.edu
    • 66. EM SPACE (EM) Daniel Reedy daniel.reedy@housing.siu.edu
    • 67. PERCENT (%) Daniel Reedy daniel.reedy@housing.siu.edu
    • 68. Daniel Reedy daniel.reedy@housing.siu.edu
    • 69. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. /* 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. /* 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. ESTABLISH A Daniel Reedy daniel.reedy@housing.siu.edu
    • 74. Daniel Reedy daniel.reedy@housing.siu.edu
    • 75. WHICH ONE? Daniel Reedy daniel.reedy@housing.siu.edu
    • 76. Daniel Reedy daniel.reedy@housing.siu.edu
    • 77. FLOATS Daniel Reedy daniel.reedy@housing.siu.edu
    • 78. Daniel Reedy daniel.reedy@housing.siu.edu
    • 79. Daniel Reedy daniel.reedy@housing.siu.edu
    • 80. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    • 81. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    • 82. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. box 1 box 2 Daniel Reedy daniel.reedy@housing.siu.edu
    • 85. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
    • 86. CSS FRAMEWORKS Daniel Reedy daniel.reedy@housing.siu.edu
    • 87. SPEED UP DEVELOPMENT Daniel Reedy daniel.reedy@housing.siu.edu
    • 88. SIMPLIFY DESIGN Daniel Reedy daniel.reedy@housing.siu.edu
    • 89. EASILY BREAKABLE Daniel Reedy daniel.reedy@housing.siu.edu
    • 90. STRICT CONSTRAINTS Daniel Reedy daniel.reedy@housing.siu.edu
    • 91. Daniel Reedy daniel.reedy@housing.siu.edu
    • 92. BLUEPRINT 960 GRID YAHOO Daniel Reedy daniel.reedy@housing.siu.edu
    • 93. 960 GRID Daniel Reedy daniel.reedy@housing.siu.edu
    • 94. Daniel Reedy daniel.reedy@housing.siu.edu
    • 95. RESET, TYPOGRAPHY, & Daniel Reedy daniel.reedy@housing.siu.edu
    • 96. Daniel Reedy daniel.reedy@housing.siu.edu
    • 97. GRIDS Daniel Reedy daniel.reedy@housing.siu.edu
    • 98. Daniel Reedy daniel.reedy@housing.siu.edu
    • 99. PUTTING IT ALL TOGETHER Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. Daniel Reedy daniel.reedy@housing.siu.edu
    • 102. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
    • 103. THE STYLE SHEETS Daniel Reedy daniel.reedy@housing.siu.edu
    • 104. THE STYLE SHEETS reset 960 typography layout colour Daniel Reedy daniel.reedy@housing.siu.edu
    • 105. THE STYLE SHEETS reset 960 typography layout colour screen print Daniel Reedy daniel.reedy@housing.siu.edu
    • 106. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
    • 107. THE STYLE SHEETS reset 960 typography layout colour If Internet Explorer ie7 ie6 screen print Daniel Reedy daniel.reedy@housing.siu.edu
    • 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. <!-- // 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. Daniel Reedy daniel.reedy@housing.siu.edu
    • 111. WHAT’S NEW IN CSS3? Daniel Reedy daniel.reedy@housing.siu.edu
    • 112. Daniel Reedy daniel.reedy@housing.siu.edu
    • 113. Q&A – CSS EVALUATION Daniel Reedy daniel.reedy@housing.siu.edu
    • 114. Daniel Reedy daniel.reedy@housing.siu.edu
    • 115. THANK YOU! Daniel Reedy daniel.reedy@housing.siu.edu
    • 116. Daniel Reedy daniel.reedy@housing.siu.edu
    • 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

    ×