Designing With CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + dlaur dlaur 4 months ago
    Can you tag this with siucweb?
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1

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

2 Favorites

Designing With CSS - Presentation 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
SlideShare Zeitgeist 2009

+ Dan ReedyDan Reedy Nominate

custom

529 views, 2 favs, 0 embeds more stats

This presentation is a basic introduction to beginn more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 529
    • 529 on SlideShare
    • 0 from embeds
  • Comments 1
  • Favorites 2
  • Downloads 50
Most viewed embeds

more

All embeds

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Tags

-->
What's New

© 2009 SlideShare Inc. All rights reserved.