CSS for Print Designers
Upcoming SlideShare
Loading in...5
×
 

CSS for Print Designers

on

  • 634 views

This workshop has been given over 30 times in cities all over the country. I'll come give it to your group as well, if you want. I charge $500 plus travel. It takes 3.5 hours and includes a second ...

This workshop has been given over 30 times in cities all over the country. I'll come give it to your group as well, if you want. I charge $500 plus travel. It takes 3.5 hours and includes a second half that's hands-on where participants get to code a Web site on their own. There's a book to support the workshop, from Peachpit Press, called CSS for Print Designers. Learn more at http://cssforprintdesigners.com/.

Statistics

Views

Total Views
634
Views on SlideShare
548
Embed Views
86

Actions

Likes
3
Downloads
15
Comments
0

1 Embed 86

http://simplefocusblog.wordpress.com 86

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

CSS for Print Designers CSS for Print Designers Presentation Transcript

  • JD Graffam@jdgraffam, #css4pd
  • Hola clase.Mi nombre es JD.
  • font-family:georgia;font-size:72px;background-color:lime;background-image:url(margarita.gif);
  • Hola clase.Mi nombre es JD.
  • 37 Things. That’s all.
  • What is a Web site?
  • Content WORD DOC
  • Structure HTML
  • Presentation CSS
  • Things You Should
  • Pixel density is JUST START WITH 72 DPI FOR NOW.
  • Web safe isn’t a thing any USE RGB COLOR MODE, ANY COLOR IS FINE.
  • .jpg .gifPHOTOS GRAPHICS TRANSPARENC
  • Let’s learn CSS!
  • So yeah, I lied.
  • You have to learnHTML before CSS.
  • So, uh, like, HTML5?
  • HTML is made up of tags
  • A tag identifies the content it surrounds.It must open and close. It opens with a less- than and greater-than sign. It closes the same way but with a slash.
  • <p> This is a sentence.</p>
  • Other tags you should know
  • <header>For the top of a page or section.
  • <footer>For the bottom of a page or section.
  • <nav>For a section that contains navigational links.
  • <div> Good for grouping relatedMeaningless.things.
  • <h1> through <h6>Different heading levels.
  • <ul> and <li>How you make bullet points. Always paired.
  • <ol>make numbered lists. AlwaysHow you and <li>paired.
  • <a>for anchor. HTML’s (stupid) way ofStandssaying “link.”
  • <strong>The HTML way of making something bold.
  • <em>The HTML way of making something italic.
  • <span> a <div> but for smallerMeaningless likechunks of text.
  • <img>Short for “image.”
  • Got it? Cool.
  • Now let’s make it harder.
  • Tags working in teams
  • <ul>  <li>Whole Grain Bread</li>  <li>Organic Cigarettes</li>  <li>Local IPA</li></ul>
  • • Whole GrainBread• OrganicCigarettes
  • <ol>  <li>Johnny</li>  <li>Cindy</li>  <li>Carlos</li></ol>
  • 1.Johnny2.  Cindy
  • Nesting
  • <div>  <h1>My Very Own Headline</h1>  <ul> <li>First item</li> <li>Second item</li> </ul></div>
  • Block and Inline Tags
  • Attributes
  • <a href="http://altavista.net/"><div id="bibbledibob"><span class="yadda"><img src="img/logo.gif" alt="logo"/>
  • href=”#”
  • class=”gallery”
  • id=”slide-2”
  • src=”cats.jpg”
  • alt=”Cute Kitteh”
  • HTML without CSS
  • Finally! CSS! For real!
  • And yes, it’s CSS3.
  • CSS Syntax
  • p{ color:red; }
  • p, ul, ol{ margin:10px; }
  • p.teaser{ font-size:16px; }
  • #chapter-2{ background:#999; }
  • header .brand{ float:right; }
  • Using Floats for Layout
  • Remember Nested Tags?
  • .content{ overflow:hidden; }.main{ float:right; width:60%; }.misc{ float:left; width:40%; }
  • .content{ overflow:hidden; }
  • That’s How YouClear Your Floats, Kids.
  • Padding, margins andborders make us use math. Which sucks.
  • Web Fonts
  • To host, or not to host?
  • Copy and paste, y’all<script type="text/javascript" src="//use.<script type="text/javascript">try{Typekit
  • Responsive Web Design
  • @media (max-width: 1000px){ body{ font-size: 16px; } }@media (max-width: 480px){ body{ font-size: 12px; } }
  • http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
  • Pop Quiz!
  • HTML <div id="content">   <p class="teaser">What color am I?</p> </div>CSS p{   color:red; } p.teaser{   color:white; } #content p.teaser{   color:blue; }
  • Slice and Dice
  • Planning It Out
  • Structure
  • <header><div id=”content”> <div class=”main”> <div class=”misc”>
  • Meaning
  • <nav><h1> <h3><p><ul> <img>
  • Slicing
  • Take a Break.You Deserve It.
  • Step 1. Go to cssforprintdesigners.com/mysiteStep 2. Download the file to your computer and unzip itStep 3. Open index.html with your text editor.Step 4. Open index.html (yes, the same file) with Firefox